Internals of this Gleam Blog

Jan 26, 2023   Kero van Gelder

How does this blog work / where can I get the syntax highlighting?

  1. git clone https://github.com/highlightjs/highlight.js
  2. Took highlight-gleam.js from a Gleam docs build, stripped the outermost function call and exported as default, placed it in src/languages/gleam.js of the highlight.js repository.
  3. Within the highlight repository, run
    npm i
    npm run build
    node tools/build.js -n erlang gleam xml css javascript bash
    and take the resulting build/highlight.js for inclusion in your web page.
  4. 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>
  5. Run this snippet of JavaScript after loading the HTML page:
    document.querySelectorAll('code').forEach((el) => {
      hljs.highlightElement(el);
    });
  6. 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.