How does it work?
As first step, EnlighterJS needs an element to which the highlighting should be applied. This is normally a <pre> tag containing the sourcecode with escaped html specialchars.
The inner-content of this element is extracted by EnlighterJS and used as source.
The "pure text" content is analyzed by the build-in Tokenizer using the specific language support file (based on Regular Expression).
This action splits the text into syntactic tokens
The token list is passed to the layout engine. This part of EnlighterJS creates a custom HTML element structure via jsx to hold the content. Additional components like toolbar, tab-pane, wrapper and event handler are also added.
All tokens are converted to HTML elements by one of the available renderers.
The tokens are "rendered" as <span> elements with a special css class to identify the token type.
Depending on the renderer, the elements may organized within a <ul>/<ol> list (standard codeblock).
The original (origin) element which holds the sourcecode is set to invisible via enlighter-origin origin css class. This class is additionally used to identify already highlighted codeblocks (avoid double-highlighting).
Finally, the highlighted code is injected into the page (before the origin element) and shows