Syntax Highlighting in a Webpage Without Javascript

Syntax highlighted code in a webpage, like this one, is just some html with some styling added to it. For example, this html:

<pre> <span class="token keyword">function</span> <span class="token function">calculate</span> <span class="token punctuation">(</span> <span class="token parameter">n</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>n <span class="token operator">===</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token number">1</span> <span class="token punctuation">;</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> n <span class="token operator">*</span> <span class="token function">calculate</span> <span class="token punctuation">(</span> n <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </pre>

Generates this output when rendered:

function calculate(n) { if (n === 0) { return 1; else { return n * calculate(n-1) } }

As you can see, it's just a bit of HTML and CSS. The clients shouldn't have to download and execute javascript to highlight code in a webpage. As a matter of fact, syntax highlighting on this page works without javascript. You can verify that by disabling javascript in your browser and reloading this page.

It's also results in better UX. You won't see the code in black and white while the syntax highlighting code is doing it's job. Websites use tricks like hiding the code blocks while syntax highlighter is working, to avoid this glitch.

So how does syntax highlighting work in this page? It uses prism.js. But isn't that a javascript framework? How do I use prism.js in my website without javascript?


It is a tool that allows you to execute some of the javascript in your webpage beforehand, so that your clients don't have to. It allows you to use any javascript library without any fear of bloat. You can use it like a full on static site generator, as I do for this website.

When used as a static site generator, you use regular javascript to render the page, instead of an arguably less powerful, esoteric templating language that has no use outside of the given framework. As for plugins, you can use any javascript library/framework. This code is all you need to integrate prism.js in your website.

async function syntax_highlight() { document.querySelectorAll('prog, progi').forEach(el => { el.setAttribute('role', 'figure') el.textContent = el.textContent.trim() }) const els = [...document.querySelectorAll('prog[class]')] if (els.length > 0) { window.Prism = {manual: true}; await evalScript("/static/js/constexpr/third_party/prism.js") document.head.appendChild( make_element(`<link rel="stylesheet" href="/static/css/prism.css">`) ) await Promise.all( el => new Promise((resolve) => { Prism.highlightElement(el, null, () => resolve()) }) )) } }

As you can see, it's regular javascript code that uses the prism.js api. Using katex for rendering math formulae is just as simple:

async function render_latex() { const blocks = document.querySelectorAll('formula') if (blocks.length > 0) { await evalScript("/static/packages/katex/katex.js") await evalScript("/static/packages/katex/contrib/auto-render.js") document.head.appendChild(make_element(`<link rel="stylesheet" href="/static/packages/katex/katex.css">`)) blocks.forEach(block => renderMathInElement(block)) } }
See pages tagged with constexpr.js for more guides.