|
7 | 7 | > ___Fully customisable, editable syntax-highlighted textareas that can be placed in any HTML form.___ [[🚀 View the Demo](https://codepen.io/WebCoder49/details/jOypJOx)] |
8 | 8 |
|
9 | 9 |  |
10 | | -*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.* |
| 10 | +*This demonstration uses themes from [Prism.js](https://prismjs.com/) and [highlight.js](https://highlightjs.org/), two syntax-highlighting programs which work well with and have compatibility built-in with code-input.* |
11 | 11 |
|
12 | | -*A frontend JavaScript library, with:* [](https://github.com/WebCoder49/code-input-for-typescript) |
| 12 | +*A frontend JavaScript library, with:*<br/> |
| 13 | +[](https://github.com/WebCoder49/code-input-for-typescript) |
13 | 14 |
|
14 | 15 | --- |
15 | 16 |
|
|
19 | 20 | ## What are the advantages of using code-input, and what can it be used for? |
20 | 21 | 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**. |
21 | 22 |
|
22 | | -The `<code-input>` element works like a `<textarea>` and therefore **works in HTML5 forms and supports using the `name`, `value` and `placeholder` attributes, events like `onchange`, form resets, to name a few...** |
| 23 | +The `<code-input>` element works like a `<textarea>` and therefore **works in HTML5 forms and supports using the `name`, `value` and `placeholder` attributes, events like `onchange`, form resets, to name a few...** [(Demo)](https://codepen.io/WebCoder49/details/JjmqjZv) |
| 24 | + |
| 25 | +`code-input` has also accumulated many **features in optional [plugins](./plugins/README.md)** from open-source contributions, allowing you to choose any features you want. If a feature you want is not present, [please open an issue / contribute it!](#contributing) |
23 | 26 |
|
24 | 27 | ## 🚀 Getting Started With `code-input` (in 4 simple steps) |
25 | 28 |
|
@@ -112,8 +115,13 @@ Now that you have registered a template, you can use the custom `<code-input>` e |
112 | 115 | ``` |
113 | 116 | *or* |
114 | 117 | ```HTML |
115 | | - <code-input lang="HTML" placeholder="Type code here" template="syntax-highlighted" onchange="console.log('Your code is', this.value)"><a href='https://github.com/WebCoder49/code-input'>code-input</a></code-input> |
| 118 | + <code-input lang="HTML" placeholder="Type code here" template="syntax-highlighted" onchange="console.log('Your code is', this.value)">< href='https://github.com/WebCoder49/code-input'>code-input</a></code-input> |
116 | 119 | ``` |
117 | 120 |
|
118 | 121 | ## Contributing |
119 | 122 | If you have any features you would like to add to `code-input`, or have found any bugs, please [open an issue](https://github.com/WebCoder49/code-input/issues) or [fork and submit a pull request](https://github.com/WebCoder49/code-input/fork)! All contributions to this open-source project would be greatly appreciated. |
| 123 | + |
| 124 | + |
| 125 | +|| |
| 126 | +|---| |
| 127 | +|...have contributed pull requests so far.| |
0 commit comments