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
+84-31Lines changed: 84 additions & 31 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,47 +14,100 @@ Unlike other front-end code-editor projects, the simplicity of how `code-input`
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
16
17
+
<details>
18
+
<summary>
19
+
17
20
## Getting Started With `code-input`
21
+
</summary>
22
+
18
23
`code-input` is designed to be **both easy to use and customisable**. Here's how to use it to create syntax-highlighted textareas:
24
+
25
+
### Import `code-input`
19
26
-**First, import your favourite syntax-highlighter's JS and CSS theme files** to turn editable.
20
27
- 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.
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.
54
+
55
+
-*Highlight.js:*
56
+
```js
57
+
codeInput.registerTemplate("syntax-highlighted", codeInput.templates.hljs(hljs, [] /* Array of plugins (see below) */));
58
+
```
59
+
60
+
-*Prism.js:*
61
+
```js
62
+
codeInput.registerTemplate("syntax-highlighted", codeInput.templates.prism(Prism, [] /* Array of plugins (see below) */));
25
63
```
26
64
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
-
> NB: You need to do this above where you declare any `code-input` elements in the HTML.
function(result_element) { /* Highlight function - with `pre code` code element */
45
-
/* Highlight code in result_element - code is already escaped so it doesn't become HTML */
46
-
},
47
-
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 */
48
-
true, /* Optional - This is used for editing code - setting this to true overrides the Tab key and uses it for indentation */
49
-
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 */
50
-
));
51
-
```
52
-
53
-
- Now that you have registered a template, you can use the custom `<code-input>` element inHTML. 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}`classto the `pre code`block. You can now use HTML attributes and events to make your element as simple or interactive as you like!
function(result_element) { /* Highlight function - with `pre code` code element */
69
+
/* Highlight code in result_element - code is already escaped so it doesn't become HTML */
70
+
},
71
+
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 */
72
+
true, /* Optional - This is used for editing code - setting this to true overrides the Tab key and uses it for indentation */
73
+
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 */,
74
+
[] // Array of plugins (see below)
75
+
));
76
+
```
77
+
78
+
### Adding plugins
79
+
[Plugins](./plugins/) allow you to add extra features to a template, like [automatic indentation](plugins/indent.js) or [support for highlight.js's language autodetection](plugins/autodetect.js). To use them, just:
80
+
- Import the plugins' JS files after you have imported `code-input` and before registering the template.
81
+
- Place instances of the plugins in the array of plugins argument when registering, like this:
82
+
```html
83
+
<scriptsrc="code-input.js"></script>
84
+
<!--...-->
85
+
<scriptsrc="plugins/autodetect.js"></script>
86
+
<scriptsrc="plugins/indent.js"></script>
87
+
<!--...-->
88
+
<script>
89
+
codeInput.registerTemplate("syntax-highlighted",
90
+
codeInput.templates.hljs(
91
+
hljs,
92
+
[
93
+
newcodeInput.plugins.Autodetect(),
94
+
newcodeInput.plugins.Indent()
95
+
]
96
+
)
97
+
);
98
+
</script>
99
+
```
100
+
101
+
### Using the component
102
+
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!
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.
0 commit comments