You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+23-7
Original file line number
Diff line number
Diff line change
@@ -1,23 +1,33 @@
1
1
# code-input
2
+
2
3
[](https://github.com/WebCoder49/code-input)[](https://www.npmjs.com/package/@webcoder49/code-input)
3
4
4
5
[](LICENSE)[](https://github.com/WebCoder49/code-input/releases)[](https://codepen.io/WebCoder49/details/jOypJOx)
5
6
6
-
> ___Fully customisablesyntax-highlighted textareas.___[[🚀 View the Demo](https://codepen.io/WebCoder49/details/jOypJOx)]
7
+
> ___Fully customisable, editable syntax-highlighted textareas that can be placed in any HTML form.___[[🚀 View the Demo](https://codepen.io/WebCoder49/details/jOypJOx)]
7
8
8
9
9
-
*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
+
12
+
*A frontend JavaScript library, with:*<br/>
13
+
[](https://github.com/WebCoder49/code-input-for-typescript)
14
+
15
+
---
10
16
11
17
## What does it do?
12
18
**`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
19
14
20
## What are the advantages of using code-input, and what can it be used for?
15
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**.
16
22
17
-
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.**
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)
18
26
19
27
## 🚀 Getting Started With `code-input` (in 4 simple steps)
20
28
29
+
## [`code-input` also supports TypeScript (click)](https://github.com/WebCoder49/code-input-for-typescript)
30
+
21
31
`code-input` is designed to be **both easy to use and customisable**. Here's how to use it to create syntax-highlighted textareas:
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.
* Create a debounced update plugin to pass into a template.
108
+
* @param {Number} delayMs Delay, in ms, to wait until updating the syntax highlighting
109
+
*/
110
+
constructor(delayMs: number);
111
+
}
112
+
113
+
/**
114
+
* Adds indentation using the `Tab` key, and auto-indents after a newline, as well as making it
115
+
* possible to indent/unindent multiple lines using Tab/Shift+Tab
116
+
* Files: indent.js
117
+
*/
118
+
classIndentextendsPlugin{
119
+
constructor();
120
+
}
121
+
122
+
/**
123
+
* Render special characters and control characters as a symbol with their hex code.
124
+
* Files: special-chars.js, special-chars.css
125
+
*/
126
+
classSpecialCharsextendsPlugin{
127
+
/**
128
+
* Create a special characters plugin instance.
129
+
* Default = covers many non-renderable ASCII characters.
130
+
* @param {Boolean} colorInSpecialChars Whether or not to give special characters custom background colors based on their hex code
131
+
* @param {Boolean} inheritTextColor If `colorInSpecialChars` is false, forces the color of the hex code to inherit from syntax highlighting. Otherwise, the base color of the `pre code` element is used to give contrast to the small characters.
132
+
* @param {RegExp} specialCharRegExp The regular expression which matches special characters
* Please see `codeInput.templates.prism` or `codeInput.templates.hljs`.
147
+
* Templates are used in `<code-input>` elements and once registered with
148
+
* `codeInput.registerTemplate` will be in charge of the highlighting
149
+
* algorithm and settings for all code-inputs with a `template` attribute
150
+
* matching the registered name.
151
+
*/
152
+
exportclassTemplate{
153
+
/**
154
+
* **When `includeCodeInputInHighlightFunc` is `false`, `highlight` takes only the `<pre><code>` element as a parameter.**
155
+
*
156
+
* Constructor to create a custom template instance. Pass this into `codeInput.registerTemplate` to use it.
157
+
* I would strongly recommend using the built-in simpler template `codeInput.templates.prism` or `codeInput.templates.hljs`.
158
+
* @param {Function} highlight - a callback to highlight the code, that takes an HTML `<code>` element inside a `<pre>` element as a parameter
159
+
* @param {boolean} preElementStyled - is the `<pre>` element CSS-styled as well as the `<code>` element? If true, `<pre>` element's scrolling is synchronised; if false, `<code>` element's scrolling is synchronised.
160
+
* @param {boolean} isCode - is this for writing code? If true, the code-input's lang HTML attribute can be used, and the `<code>` element will be given the class name 'language-[lang attribute's value]'.
161
+
* @param {false} includeCodeInputInHighlightFunc - Setting this to true passes the `<code-input>` element as a second argument to the highlight function.
162
+
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.Plugin`
* **When `includeCodeInputInHighlightFunc` is `true`, `highlight` takes two parameters: the `<pre><code>` element, and the `<code-input>` element.**
168
+
*
169
+
* Constructor to create a custom template instance. Pass this into `codeInput.registerTemplate` to use it.
170
+
* I would strongly recommend using the built-in simpler template `codeInput.templates.prism` or `codeInput.templates.hljs`.
171
+
* @param {Function} highlight - a callback to highlight the code, that takes an HTML `<code>` element inside a `<pre>` element as a parameter
172
+
* @param {boolean} preElementStyled - is the `<pre>` element CSS-styled as well as the `<code>` element? If true, `<pre>` element's scrolling is synchronised; if false, `<code>` element's scrolling is synchronised.
173
+
* @param {boolean} isCode - is this for writing code? If true, the code-input's lang HTML attribute can be used, and the `<code>` element will be given the class name 'language-[lang attribute's value]'.
174
+
* @param {true} includeCodeInputInHighlightFunc - Setting this to true passes the `<code-input>` element as a second argument to the highlight function.
175
+
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.Plugin`
0 commit comments