Skip to content

Commit e95c5b9

Browse files
WebCoder49WebCoder49
committed
Update README
1 parent 15c77ac commit e95c5b9

File tree

1 file changed

+84
-31
lines changed

1 file changed

+84
-31
lines changed

‎README.md‎

Lines changed: 84 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -14,47 +14,100 @@ Unlike other front-end code-editor projects, the simplicity of how `code-input`
1414

1515
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.**
1616

17+
<details>
18+
<summary>
19+
1720
## Getting Started With `code-input`
21+
</summary>
22+
1823
`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`
1926
- **First, import your favourite syntax-highlighter's JS and CSS theme files** to turn editable.
2027
- 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">
28+
29+
<details>
30+
<summary>
31+
Locally downloaded
32+
</summary>
33+
34+
```html
35+
<!--In the <head>-->
36+
<script src="path/to/code-input.min.js"></script>
37+
<link rel="stylesheet" href="path/to/code-input.min.css">
38+
```
39+
</details>
40+
<details>
41+
<summary>
42+
From JSDelivr CDN
43+
</summary>
44+
45+
```html
46+
<!--In the <head>-->
47+
<script src="https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/code-input.min.js"></script>
48+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/code-input.min.css">
49+
```
50+
</details>
51+
52+
### Creating a template
53+
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) */));
2563
```
2664

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.
30-
31-
- *Highlight.js:*
32-
```js
33-
codeInput.registerTemplate("syntax-highlighted", codeInput.templates.hljs(hljs));
34-
```
35-
36-
- *Prism.js:*
37-
```js
38-
codeInput.registerTemplate("syntax-highlighted", codeInput.templates.prism(Prism));
39-
```
40-
41-
- *Custom:*
42-
```js
43-
codeInput.registerTemplate("syntax-highlighted", codeInput.templates.custom(
44-
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 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!
65+
- *Custom:*
66+
```js
67+
codeInput.registerTemplate("syntax-highlighted", codeInput.templates.custom(
68+
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+
<script src="code-input.js"></script>
84+
<!--...-->
85+
<script src="plugins/autodetect.js"></script>
86+
<script src="plugins/indent.js"></script>
87+
<!--...-->
88+
<script>
89+
codeInput.registerTemplate("syntax-highlighted",
90+
codeInput.templates.hljs(
91+
hljs,
92+
[
93+
new codeInput.plugins.Autodetect(),
94+
new codeInput.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!
54103
```HTML
55104
<code-input lang="HTML"></code-input>
56105
```
57106
*or*
58107
```HTML
59108
<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>
60109
```
110+
</details>
111+
112+
## Contributing
113+
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

Comments
 (0)