Basically you place you code examples in your HTML code in the <code-example>
custom element with a language
attribute for the language. Then, in the API handler you run the entire HTML blob through the highlightCode()
function. This will use the existing @begin/parse5
package to parse the HTML. It will then traverse the DOM tree, find the <code-example>
elements, do PrismJS magic on its contents and then places them back.
At the custom element expansion stage the highlighted code gets put in the <pre>
& <code>
and adds the correct class name based on the language
attribute of the <code-example>
element.
![Screenshot 2024-02-23 141917](https://private-user-images.githubusercontent.com/1694982/307332743-9039d9ab-33ce-44c5-b1a0-ac56e1fcb21c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5OTYwMDcsIm5iZiI6MTcxOTk5NTcwNywicGF0aCI6Ii8xNjk0OTgyLzMwNzMzMjc0My05MDM5ZDlhYi0zM2NlLTQ0YzUtYjFhMC1hYzU2ZTFmY2IyMWMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDNUMDgzNTA3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzgwNzFiNGRmMDdlNjExOTE4YzMxYjViZGE0ZTlmYjczNTgxM2E3OTVmOGY1YjU3MGU5NzRiYjcxMDcyNjk3YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.-3XlUKevZVxCMPAYcmOZ2oPSpzXonyCRtBaej5FWKCQ)