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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Custom Enhance element to debug/inspect the `state` property | |
// that is passed to Enhance views. | |
// | |
// Optional `key` attribute can be used to inspect from | |
// a desired depth. | |
// | |
// Default styling is Monokai Midnight, but can be overridden | |
// by changing the various custom properties. | |
// | |
// Usage: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Add this to mootool core just before | |
// Browser[Browser.name] = true; | |
// Browser[Browser.name + parseInt(Browser.version, 10)] = true; | |
// Browser.Platform[Browser.Platform.name] = true; | |
if (ua.indexOf('trident/7.0') > -1) { | |
Browser.name = 'ie'; | |
Browser.version = '11'; | |
} |