Skip to content

Commit 85c9d1f

Browse files
committedMay 28, 2024
Add Prism/highlight.js starter files to README (Fixes #92)
1 parent 4410b3e commit 85c9d1f

File tree

1 file changed

+5
-1
lines changed

1 file changed

+5
-1
lines changed
 

Diff for: ‎README.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ The `<code-input>` element works like a `<textarea>` and therefore **works in HT
2828

2929
## [`code-input` also supports TypeScript (click)](https://github.com/WebCoder49/code-input-for-typescript)
3030

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+
3133
`code-input` is designed to be **both easy to use and customisable**. Here's how to use it to create syntax-highlighted textareas:
3234

3335
### 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
118120
To see a full list of plugins and their functions, please see [plugins/README.md](./plugins/README.md).
119121

120122
### 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 events to 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!
122124
```HTML
123125
<code-input language="HTML"></code-input>
124126
```
@@ -127,6 +129,8 @@ Now that you have registered a template, you can use the custom `<code-input>` e
127129
<code-input language="HTML" placeholder="Type code here" template="syntax-highlighted" onchange="console.log('Your code is', this.value)">&lt; href='https://github.com/WebCoder49/code-input'>code-input&lt;/a></code-input>
128130
```
129131

132+
> ⚠️ 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+
130134
## Contributing
131135
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).
132136

0 commit comments

Comments
 (0)