https://github.com/andreruffert/syntax-highlight-element
👓 Syntax Highlighting using the CSS Custom Highlight API
https://github.com/andreruffert/syntax-highlight-element
custom-elements syntax-highlighting web-components
Last synced: 1 day ago
JSON representation
👓 Syntax Highlighting using the CSS Custom Highlight API
- Host: GitHub
- URL: https://github.com/andreruffert/syntax-highlight-element
- Owner: andreruffert
- License: mit
- Created: 2025-02-12T03:16:37.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-05-09T08:57:45.000Z (about 1 month ago)
- Last Synced: 2025-06-09T14:06:38.152Z (13 days ago)
- Topics: custom-elements, syntax-highlighting, web-components
- Language: JavaScript
- Homepage: https://andreruffert.github.io/syntax-highlight-element/
- Size: 1.5 MB
- Stars: 40
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# <syntax-highlight> element
> Syntax Highlighting using the CSS Custom Highlight API.
[](https://github.com/andreruffert/syntax-highlight-element/actions/workflows/test.yml)
[](https://www.npmjs.com/package/syntax-highlight-element)
[](https://www.npmjs.com/package/syntax-highlight-element)
The code is highlighted without having to wrap a bunch of `` elements around each token, thanks to [Prism][prism_github]'s tokenizer and the [CSS Custom Highlight API][MDN_CSS_Custom_Highlight_API].
## Install
Install via npm
```shell
npm install syntax-highlight-element
```
## Usage
### JavaScript
Import as ES module
```js
import 'syntax-highlight-element';
```
Or via CDN
```html
```
### HTML
```html
// ...
```
### CSS
Make sure to load a theme e.g. `syntax-highlight-element/themes/prettylights.css`.
Or via CDN
```html
```
Currently there are only limited [themes](https://github.com/andreruffert/syntax-highlight-element/tree/main/src/themes) available/converted. You can always create your own theme. Contributions are also very welcome.
## Attributes
* `language` The code language. The default is `plaintext`. Default suported languages `html|css|js`.
* `content-selector` A CSS selector to specify the content element. The default is the element itself.
## Configuration
```js
/**
* @typedef Config
* @type {object}
* @property {string[]} [languages=['markup', 'css', 'javascript']] - Language grammars to highlight.
* @property {{ [key: string]: string[] }} languageTokens - Language specific token types.
*/
window.she = window.she || {};
/** @type {Config} */
window.she.config = {};
```
Full list of all [languages supported](https://prismjs.com/#supported-languages) by the prism tokenizer.
## Browser Support
- [CSS Custom Highlight API][caniuse_mdn-api_highlight]
## Credits
* [Bramus Van Damme][bramus_github] and his [blog post][bramus_blog_post] where I first read about using the [CSS Custom Highlight API][MDN_CSS_Custom_Highlight_API] for syntax highlighting.
* [Prism][prism_github]'s tokenizer.
## License
Distributed under the MIT license. See LICENSE for details.
© [André Ruffert](https://andreruffert.com)
[prism_github]: https://github.com/PrismJS/prism
[bramus_github]: https://github.com/bramus
[bramus_blog_post]: https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting
[MDN_CSS_Custom_Highlight_API]: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API
[caniuse_mdn-api_highlight]: https://caniuse.com/mdn-api_highlight