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
+5-1
Original file line number
Diff line number
Diff line change
@@ -28,6 +28,8 @@ The `<code-input>` element works like a `<textarea>` and therefore **works in HT
28
28
29
29
## [`code-input` also supports TypeScript (click)](https://github.com/WebCoder49/code-input-for-typescript)
30
30
31
+
**You can follow the instructions below, or use the starter code available [here for highlight.js](https://codepen.io/WebCoder49/pen/vYMpMoJ?editors=1100) and here for [here for Prism.js](https://codepen.io/WebCoder49/pen/ExzNRyb?editors=1100).**
32
+
31
33
`code-input` is designed to be **both easy to use and customisable**. Here's how to use it to create syntax-highlighted textareas:
32
34
33
35
### 1. Import `code-input`
@@ -118,7 +120,7 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
118
120
To see a full list of plugins and their functions, please see [plugins/README.md](./plugins/README.md).
119
121
120
122
### 4. Using the component
121
-
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 `language` attribute will add a `language-{value}` class to the `pre code` block. You can now use HTML attributes and eventsto make your element as simple or interactive as you like!
123
+
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 `language` attribute will add a `language-{value}` class to the `pre code` block. You can now use HTML attributes and events, as well as CSS styles, to make your element as simple or interactive as you like, as if it were a `textarea` element!
122
124
```HTML
123
125
<code-inputlanguage="HTML"></code-input>
124
126
```
@@ -127,6 +129,8 @@ Now that you have registered a template, you can use the custom `<code-input>` e
> ⚠️ At the moment, you need to set the `--padding` property rather than `padding` for a `code-input` element's CSS. All other properties should work as normal.
133
+
130
134
## Contributing
131
135
If you have any features you would like to add to `code-input` as plugins or core functionality, 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 will be greatly appreciated. You can see [more info in our `CONTRIBUTING.md` file](CONTRIBUTING.md).
0 commit comments