How Code Highlighting Actually Works on This Site

Two different ways to show code

If you just want to reference something small inline - a function name, a filename, whatever - wrap it in <code>. That's exactly how debounce() is written in this very sentence.

For a real chunk of code, though, you want a <pre class="ql-syntax"> block instead. That's what gets generated the moment you hit the code-block button (</>) in the admin editor.

A working example: debounce

Here's an actual, runnable debounce function written as a proper code block. Nothing here is manually colored - highlight.js takes care of all of that on its own.

function debounce(fn, delayMs) {
  let timer;
  return function debounced(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delayMs);
  };
}

const onResize = debounce(() => {
  console.log("window resized");
}, 200);

window.addEventListener("resize", onResize);

What that block looks like as raw HTML

If you're typing this straight into a seeder file rather than clicking through the admin editor, this is what the block above actually stores under the hood - notice how < and > get escaped so the browser shows them as plain text instead of rendering them.

<pre class="ql-syntax">function debounce(fn, delayMs) {
  let timer;
  return function debounced(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delayMs);
  };
}</pre>

The short version

• Small inline reference → <code>
• Actual code block → <pre class="ql-syntax">, code sits directly inside it, no extra <code> wrapper
• Writing it by hand? Remember to escape <, >, and &
• Using the admin editor? Don't worry - it handles the escaping for you