pre and code elements - speced/respec GitHub Wiki
ReSpec automatically syntax-highlights <pre> and <code> elements using highlight.js. Highlighting runs in a Web Worker — it doesn't block the main thread.
<pre>
function fetch(url) {
return new Promise(resolve => {
// ... JS is auto-detected
});
}
</pre><pre class="css">
.widget {
display: flex;
color: #336;
}
</pre>abnf, css, html, http, javascript (js), json, xml, webidl
<pre class="nohighlight">
pseudocode or plain text here
</pre>async function loadSolidity() {
const worker = await new Promise(resolve => {
require(["core/worker"], ({ worker }) => resolve(worker));
});
worker.postMessage({
action: "highlight-load-lang",
langURL: "https://example.com/highlightjs-solidity.js",
propName: "hljsDefineSolidity",
lang: "solidity",
});
return new Promise(resolve => {
worker.addEventListener("message", function listener({ data }) {
if (data.action === "highlight-load-lang" && data.lang === "solidity") {
worker.removeEventListener("message", listener);
resolve();
}
});
});
}
var respecConfig = {
preProcess: [loadSolidity],
};- Highlighting is done in a Web Worker and is non-blocking
- Language is auto-detected if no class is specified
- Use
nohighlightto disable for a block - Use
nolinksto prevent auto-linking of URLs inside code blocks (Markdown mode)