{"repo":"andreruffert/syntax-highlight-element","free":true,"listed":false,"github":"https://github.com/andreruffert/syntax-highlight-element","clone":"git clone https://github.com/andreruffert/syntax-highlight-element.git","description":"👓 Syntax Highlighting using the CSS Custom Highlight API","language":"JavaScript","stars":613,"topics":["web-components","custom-elements","javascript","syntax-highlight","syntax-highlighting"],"license":"MIT","category":"ui-components","readme_excerpt":"<syntax-highlight> element Syntax Highlighting using the CSS Custom Highlight API. 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]. element demo in the browser with DevTools open\" Examples For examples checkout the CodePen <syntax-highlight> collection. Install Install via npm Usage JavaScript Import as ES module Or via CDN HTML CSS Make sure to load a theme e.g. syntax-highlight-element/themes/prettylights.css . Or via CDN Currently there are only limited 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 Full list of all languages supported 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 [prism github]: https://github.com/PrismJS/prism [bramus github]: https://github.com/bramus [bramus blog pos","default_branch":null,"files":null,"tree":[],"storefront":"/r/andreruffert","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/andreruffert/syntax-highlight-element/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}