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
+19-5Lines changed: 19 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,13 +1,18 @@
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
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
11
12
+
*A frontend JavaScript library, with:*[](https://github.com/WebCoder49/code-input-for-typescript)
13
+
14
+
---
15
+
11
16
## What does it do?
12
17
**`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
18
@@ -18,6 +23,8 @@ The `<code-input>` element works like a `<textarea>` and therefore **works in HT
18
23
19
24
## 🚀 Getting Started With `code-input` (in 4 simple steps)
20
25
26
+
## [`code-input` also supports TypeScript (click)](https://github.com/WebCoder49/code-input-for-typescript)
27
+
21
28
`code-input` is designed to be **both easy to use and customisable**. Here's how to use it to create syntax-highlighted textareas:
1.**Our aim is to make `code-input` work from the start like an ordinary `<textarea>` element, with `name` attribute support, form reset functions, and accessible `aria-` attribute support, etc. leading to HTML form compatibility.**
122
+
123
+
2. Thanks to many contributions, suggestions and bug identifications from the open-source community, `code-input`'s capabilities are constantly growing. With customisable plugins, you can also turn `code-input` into whatever you want.
124
+
111
125
## Contributing
112
126
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.
102
+
* @param {Number} delayMs Delay, in ms, to wait until updating the syntax highlighting
103
+
*/
104
+
constructor(delayMs: number);
105
+
}
106
+
107
+
/**
108
+
* Adds indentation using the `Tab` key, and auto-indents after a newline, as well as making it
109
+
* possible to indent/unindent multiple lines using Tab/Shift+Tab
110
+
* Files: indent.js
111
+
*/
112
+
classIndentextendsPlugin{
113
+
constructor();
114
+
}
115
+
116
+
/**
117
+
* Render special characters and control characters as a symbol with their hex code.
118
+
* Files: special-chars.js, special-chars.css
119
+
*/
120
+
classSpecialCharsextendsPlugin{
121
+
/**
122
+
* Create a special characters plugin instance.
123
+
* Default = covers many non-renderable ASCII characters.
124
+
* @param {Boolean} colorInSpecialChars Whether or not to give special characters custom background colors based on their hex code
125
+
* @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.
126
+
* @param {RegExp} specialCharRegExp The regular expression which matches special characters
* Please see `codeInput.templates.prism` or `codeInput.templates.hljs`.
141
+
* Templates are used in `<code-input>` elements and once registered with
142
+
* `codeInput.registerTemplate` will be in charge of the highlighting
143
+
* algorithm and settings for all code-inputs with a `template` attribute
144
+
* matching the registered name.
145
+
*/
146
+
exportclassTemplate{
147
+
/**
148
+
* **When `includeCodeInputInHighlightFunc` is `false`, `highlight` takes only the `<pre><code>` element as a parameter.**
149
+
*
150
+
* Constructor to create a custom template instance. Pass this into `codeInput.registerTemplate` to use it.
151
+
* I would strongly recommend using the built-in simpler template `codeInput.templates.prism` or `codeInput.templates.hljs`.
152
+
* @param {Function} highlight - a callback to highlight the code, that takes an HTML `<code>` element inside a `<pre>` element as a parameter
153
+
* @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.
154
+
* @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]'.
155
+
* @param {false} includeCodeInputInHighlightFunc - Setting this to true passes the `<code-input>` element as a second argument to the highlight function.
156
+
* @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.**
162
+
*
163
+
* Constructor to create a custom template instance. Pass this into `codeInput.registerTemplate` to use it.
164
+
* I would strongly recommend using the built-in simpler template `codeInput.templates.prism` or `codeInput.templates.hljs`.
165
+
* @param {Function} highlight - a callback to highlight the code, that takes an HTML `<code>` element inside a `<pre>` element as a parameter
166
+
* @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.
167
+
* @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]'.
168
+
* @param {true} includeCodeInputInHighlightFunc - Setting this to true passes the `<code-input>` element as a second argument to the highlight function.
169
+
* @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.Plugin`
0 commit comments