# highlighted-code
**Repository Path**: mirrors_WebReflection/highlighted-code
## Basic Information
- **Project Name**: highlighted-code
- **Description**: A textarea builtin extend to automatically provide code highlights based on one of the languages available via highlight.js
- **Primary Language**: Unknown
- **License**: ISC
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-27
- **Last Updated**: 2026-07-11
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## 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
```
## 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
```
How to disable spellcheck?
You can either `textarea.spellcheck = false` or:
```html
```
How to set cols or rows?
```html
```
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.