pre and code elements

<pre> and <code> elements

ReSpec automatically syntax-highlights <pre> and <code> elements using highlight.js. Highlighting runs in a Web Worker — it doesn't block the main thread.

Basic usage

<pre>
function fetch(url) {
  return new Promise(resolve => {
    // ... JS is auto-detected
  });
}
</pre>

<pre class="css">
.widget {
  display: flex;
  color: #336;
}
</pre>

Supported languages (built-in)

abnf, css, html, http, javascript (js), json, xml, webidl

Disable highlighting

<pre class="nohighlight">
pseudocode or plain text here
</pre>

Load additional languages

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],
};

Notes

• Highlighting is done in a Web Worker and is non-blocking
• Language is auto-detected if no class is specified
• Use nohighlight to disable for a block
• Use nolinks to prevent auto-linking of URLs inside code blocks (Markdown mode)