AcidJs.XHilite is a syntax highlighter HTML5 Web Component, based on Lea Verou‘s Prism.JS and wrapped as a custom tag with support for multiple languages and both declarative and async loading of the code to be highlighted.
Usage:
Recently I updated my HTML5, CSS3 and JavaScript experiments and website, and I am planning to use replace the syntax highlighter I am currently using with AcidJs.XHilite.
HTML Attributes of the Tag
Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:
language – The language to highlight, for example language="javascript". Default: "markup" (usable with HTML, SVG, XML, etc.). Check prismjs.com for a complete list of supported languages.
width – Optional width in pixels of the code block, for example: width="600".
height – Optional height in pixels of the code block, for example: height="200".
src – Instead of adding the code to highlight in the tag, you can specify path to the file which content needs to be highlighted, for example: src="example.js"
JavaScript Methods of the Tag
Native JavaScript methods (document.getElementById, document.querySelector, etc. as well as their jQuery or other libraries aliases).
Check the screenshots below or go straight to the demo and download:
Check the demo on this page. You will also find a download link there. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.