https://github.com/webreflection/highlighted-code
A textarea builtin extend to automatically provide code highlights based on one of the languages available via highlight.js
https://github.com/webreflection/highlighted-code
Last synced: 11 months ago
JSON representation
A textarea builtin extend to automatically provide code highlights based on one of the languages available via highlight.js
- Host: GitHub
- URL: https://github.com/webreflection/highlighted-code
- Owner: WebReflection
- License: isc
- Created: 2022-03-26T14:49:37.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-25T10:00:24.000Z (over 3 years ago)
- Last Synced: 2025-01-16T09:42:51.003Z (about 1 year ago)
- Language: HTML
- Size: 1.51 MB
- Stars: 189
- Watchers: 5
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# highlighted-code
A textarea builtin extend to automatically provide code highlights based on one of the languages available via [highlight.js](https://highlightjs.org/).
**[Live demo](https://webreflection.github.io/highlighted-code/test/demo.html)**
```html
textarea[is="highlighted-code"] { padding: 8px; }
(async ({chrome, netscape}) => {
// add Safari polyfill if needed
if (!chrome && !netscape)
await import('https://unpkg.com/@ungap/custom-elements');
const {default: HighlightedCode} =
await import('https://unpkg.com/highlighted-code');
// bootstrap a theme through one of these names
// https://github.com/highlightjs/highlight.js/tree/main/src/styles
HighlightedCode.useTheme('github-dark');
})(self);
(async ({chrome, netscape}) => {
// add Safari polyfill if needed
if (!chrome && !netscape)
await import('https://unpkg.com/@ungap/custom-elements');
const {default: HighlightedCode} = await import('https://unpkg.com/highlighted-code');
// bootstrap a theme through one of these names
// https://github.com/highlightjs/highlight.js/tree/main/src/styles
HighlightedCode.useTheme('github-dark');
})(self);
```
## API
The component is literally a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) so everything that works or applies for this kind of element works and applies for this custom element too.
The only extras attributes this component offer are:
* **language**, reflected as `area.language` to define which kind of language should be highlighted. See the [list of supported languages here](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) (see those that don't require extra packages).
* **tab-size**, reflected as `area.tabSize`, to determine the amount of virtual spaces covered by tabs. Because we live in a Mobile world, the default is `2`.
* **auto-height**, reflected as `area.autoHeight`, to render the textarea as if it was a regular element. See the [test page](https://webreflection.github.io/highlighted-code/test/) as example, or set `autoHeight = true` in the live demo and see the area growing while typing.
The exported `HighlightedCode` default class exposes these public methods/accessors:
* `HighlightedCode.useTheme(name:string)` to bootstrap [any valid CSS theme](https://github.com/highlightjs/highlight.js/tree/main/src/styles) by name. This can also be a fully qualified URL to avoid CDN when desired.
* `HighlightedCode.insertText(text:string)` to programmatically insert some text where the selection is.
* `HighlightedCode.library:hljs` a getter to retrieve the imported [hljs library](https://highlightjs.org/), usable to register missing PLs or do something else.
## Exports
The main export uses all default languages included in *highlight.js*, but there are other variants:
* `highlighted-code/web`, which includes only Markdown, JS, TS, JSON, CSS, and HTML or XML
* `highlighted-code/sql`, which includes only SQL
These variants are much lighter than default module.
## F.A.Q.
How to disable editing?
You can either `textarea.disabled = true` or:
```html
textarea[is="highlighted-code"]::before {
content: "it's that simple!";
}
```
How to disable spellcheck?
You can either `textarea.spellcheck = false` or:
```html
textarea[is="highlighted-code"]::before {
content: "it's that simple!";
}
```
How to set cols or rows?
```html
textarea[is="highlighted-code"]::before {
content: "it's that simple!";
}
```
How to set a placeholder?
```html
```
How to ...?
Look, this is [a custom element builtin extend](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example).
If you know how and when to use a textarea, you're 90% done with this module.
Now you need just the `is` attribute with value `highlighted-code`, a `language` attribute with a supported language from *highlight.js* library,
optionally a `tab-size` attribute to have tabs wider than 2, and a theme, where `default` would work too, as long as `HighlightedCode.useTheme('default')` is invoked.