https://github.com/patternslib/pat-code-editor
Syntax highlighting and other code editor functionality
https://github.com/patternslib/pat-code-editor
hacktoberfest javascript patternslib texteditor ui-components
Last synced: about 1 year ago
JSON representation
Syntax highlighting and other code editor functionality
- Host: GitHub
- URL: https://github.com/patternslib/pat-code-editor
- Owner: Patternslib
- Created: 2021-02-05T13:51:42.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T03:02:21.000Z (over 3 years ago)
- Last Synced: 2024-04-26T05:21:22.538Z (about 2 years ago)
- Topics: hacktoberfest, javascript, patternslib, texteditor, ui-components
- Language: JavaScript
- Homepage:
- Size: 326 KB
- Stars: 0
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
Awesome Lists containing this project
README
# pat-code-editor
## Documentation
This is code editor pattern based on CodeJar and PrismJS.
---
**Note:**
When prefilling the textarea, please add HTML escaped content to the template to avoid any XSS security issues or nesting errors with existing HTML.
Example to escape content in Python:
import html
escaped_html = html.escape(unescaped_html)
Example to escape content in JavaScript:
const escaped_html = unescaped_html
.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll(""", '"');
---
### Options reference
| Property | Default Value | Type | Description |
| -------------- | ------------- | ----------------- | ----------------------------- |
| language | null | String, null | Programming language to use. |
| linenumbers | false | Boolean | Show line numbers. |
| theme | null | String | Name of PrismJS theme. |
| tab | "' '" | String | Characters to use as tab. Use "\t" for a tab character, spaces in quotes (e.g. "' '") for spaces |
| indent-on | {$ | String | Regex pattern where the next line is indented. |
| spellcheck | false | Boolean | Activate spellchecking. |
| catch-tab | true | Boolean | Catch a tab keystroke and indent. |
| preserve-indent | true | Boolean | Preserve indentation of original source. |
| add-closing | true | Boolean | Automatically add closing brackets. |
| history | true | Boolean | Activate undo history. |
## Examples
### Invocation on a contenteditable div
import Pattern from "./code-editor";
Pattern.init(document.querySelector(".pat-code-editor"));
```html
import Pattern from "./code-editor";
Pattern.init(document.querySelector(".pat-code-editor"));
```
### Invocation on a textarea
This will create a div where the code editor is finally initialized and changes are synchronized back to the text editor.
body {
background-color: black;
color: blue;
}
```html
body {
background-color: black;
color: blue;
}
```