Top
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">factorial</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">factorial</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 factorial(n) {
if (n === 0) {
return 1;
else {
return n * factorial(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.
This site accomplishes that using constexprjs, which is a tool that can execute the javascript in your pages ahead of time. When building sites with constexprjs you use javascript instead of templating language. 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.querySelector('#post_load_css').appendChild(
make_element(`<link rel="stylesheet" href="/static/css/prism.css">`)
)
await Promise.all(els.map(
el => new Promise((resolve) => {
Prism.highlightElement(el, null, () => resolve())
})
))
}
}
It's also results in better UX. You won't see the code in black and white while the syntax highlighting code is doing its job. Websites use tricks like hiding the code blocks while the page is loading to avoid this glitch.
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.querySelector('#post_load_css').appendChild(make_element(`<link rel="stylesheet" href="/static/packages/katex/katex.css">`))
window._ConstexprJS_.addDependency('/static/packages/katex/fonts')
blocks.forEach(block => renderMathInElement(block))
}
}
See pages tagged with constexprjs for more guides.
