|
4 | 4 | > ___Fully customisable syntax-highlighted textareas.___ |
5 | 5 |
|
6 | 6 |  |
7 | | -*This demonstration uses themes from [Prism.js](https://prismjs.com/) and [highlight.js](https://highlightjs.org/), two syntax-highlighting programs which work well with code-input.* |
| 7 | +*This demonstration uses themes from [Prism.js](https://prismjs.com/) and [highlight.js](https://highlightjs.org/), two syntax-highlighting programs which work well and have compatibility built-in with code-input.* |
8 | 8 |
|
9 | 9 | ## What does it do? |
10 | 10 | **`code-input`** lets you **turn any ordinary JavaScript syntax-highlighting theme and program into customisable syntax-highlighted textareas** using an HTML custom element. It uses vanilla CSS to superimpose a `textarea` on a `pre code` block, then handles indentations, scrolling and fixes any resulting bugs with JavaScript. To see how it works in more detail, please see [this CSS-Tricks article](https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/ "Creating an Editable Textarea That Supports Syntax-Highlighted Code") I wrote. |
|
13 | 13 | Unlike other front-end code-editor projects, the simplicity of how `code-input` works means it is **highly customisable**. As it is not a full-featured editor, you can **choose what features you want it to include, and use your favourite syntax-highlighting algorithms and themes**. |
14 | 14 |
|
15 | 15 | The `<code-input>` element works like a `<textarea>` and therefore **works in HTML5 forms and supports using the `value` and `placeholder` attributes, as well as the `onchange` event.** |
| 16 | + |
| 17 | +## Getting Started With `code-input` |
| 18 | +`code-input` is designed to be **both easy to use and customisable**. Here's how to use it to create syntax-highlighted textareas: |
| 19 | +- **First, import your favourite syntax-highlighter's JS and CSS theme files** to turn editable. |
| 20 | +- Then, import the CSS and JS files of `code-input` from a downloaded release or a CDN. The non-minified files are useful for using during development. |
| 21 | + ```html |
| 22 | + <!--In the <head>--> |
| 23 | + <script src="path/to/code-input.min.js"></script> |
| 24 | + <link rel="stylesheet" href="path/to/code-input.min.css"> |
| 25 | + ``` |
| 26 | + |
| 27 | +- The next step is to set up a `template` to link `code-input` to your syntax-highlighter. If you're using Prism.js or highlight.js, you can use the built-in template, or you can create your own otherwise. In these examples, I am registering the template as `"syntax-highlighted"`, but you can use any template name as long as you are consistent. |
| 28 | + |
| 29 | + - *Highlight.js:* |
| 30 | + ```js |
| 31 | + codeInput.registerTemplate("syntax-highlighted", codeInput.templates.hljs(hljs)); |
| 32 | + ``` |
| 33 | + |
| 34 | + - *Prism.js:* |
| 35 | + ```js |
| 36 | + codeInput.registerTemplate("syntax-highlighted", codeInput.templates.prism(Prism)); |
| 37 | + ``` |
| 38 | + |
| 39 | + - *Custom:* |
| 40 | + ```js |
| 41 | + codeInput.registerTemplate("syntax-highlighted", codeInput.templates.custom( |
| 42 | + function(result_element) { /* Highlight function - with `pre code` code element */ |
| 43 | + /* Highlight code in result_element - code is already escaped so it doesn't become HTML */ |
| 44 | + }, |
| 45 | + true, /* Optional - Is the `pre` element styled as well as the `code` element? Changing this to false uses the code element as the scrollable one rather than the pre element */ |
| 46 | + true, /* Optional - This is used for editing code - setting this to true overrides the Tab key and uses it for indentation */ |
| 47 | + false /* Optional - Setting this to true passes the `<code-input>` element as a second argument to the highlight function to be used for getting data- attribute values and using the DOM for the code-input */ |
| 48 | + )); |
| 49 | + ``` |
| 50 | + |
| 51 | +- Now that you have registered a template, you can use the custom `<code-input>` element in HTML. If you have more than one template registered, you need to add the template name as the `template` attribute. With the element, using the `lang` attribute will add a `language-{value}` class to the `pre code` block. You can now use HTML attributes and events to make your element as simple or interactive as you like! |
| 52 | + ```HTML |
| 53 | + <code-input lang="HTML"></code-input> |
| 54 | + ``` |
| 55 | + *or* |
| 56 | + ```HTML |
| 57 | + <code-input lang="HTML" placeholder="Type code here" value="<a href='https://github.com/WebCoder49/code-input'>code-input</a>" template="syntax-highlighted" onchange="console.log('Your code is', this.value)"></code-input> |
| 58 | + ``` |
0 commit comments