How does this blog work / where can I get the syntax highlighting?
git clone https://github.com/highlightjs/highlight.js
- Took
highlight-gleam.js
from a Gleam docs build, stripped the outermost function call and exported asdefault
, placed it insrc/languages/gleam.js
of the highlight.js repository. - Within the highlight repository, run
and take the resultingnpm i npm run build node tools/build.js -n erlang gleam xml css javascript bash
build/highlight.js
for inclusion in your web page. - Write the HTML:
<code class="language-erlang">code_change(Version, State, Extra)</code> <pre><code class="language-gleam">pub fn foo(bar) { baz }</code></pre>
- Run this snippet of JavaScript after loading the HTML page:
document.querySelectorAll('code').forEach((el) => { hljs.highlightElement(el); });
- I leave setup of CSS to the file you can find in this web page, although I gratefully copied the highlight.js bits from a gleam docs build, too.
This yields code_change(Version, State, Extra)
, respectively
pub fn foo(bar) {
baz
}
Read the Source, Luke!
There is not all that much more to it. For details, the git repo is available.