---
title: How to render pseudocode in Hugo with pseudocode.js
slug: pseudocodejs-hugo
pseudocode: true
date: 2024-03-09
---

To render pseudocode in Hugo, you can use the `pseudocode.js` library.

Here is what I did to make this working on my blog.

## Theme configuration 
In your theme files, you will first need to add link to the library CDN.
```html
<!-- in themes/<theme>/layouts/partials/pseucodode.html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.js"
        integrity="sha512-EKW5YvKU3hpyyOcN6jQnAxO/L8gts+YdYV6Yymtl8pk9YlYFtqJgihORuRoBXK8/cOIlappdU6Ms8KdK6yBCgA=="
        crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pseudocode@latest/build/pseudocode.min.css">
<script src="https://cdn.jsdelivr.net/npm/pseudocode@latest/build/pseudocode.min.js"></script>
```

And render all element with `pseudocode` HTMl class.
```html
<!-- in themes/<theme>layouts/partials/pseudocode-render.html -->
<script>
    let pseudocodeElements = document.getElementsByClassName("pseudocode");
    for (let element of pseudocodeElements) {
        pseudocode.renderElement(element);
    }
</script>
```

```html
<!-- in themes/<theme>/layouts/_default/baseof.html -->
<head>

    ...

    {{ if .Param "pseudocode" }}
      {{ partialCached "pseudocode" . }}
    {{ end }}
</head>

<body>
    
    ...

    <main>
        {{ block "main" . }}{{ end }}
        {{ if .Param "pseudocode" }}
            {{ partialCached "pseudocode-render" . }}
        {{ end }}
    <main>
</body>
```

## Writing

Then, in your Markdown article, add the following in your frontmatter:
```yaml
---
pseudocode: true
---
```

And write your pseudocode, using the `algorithmic`  $\LaTeX$ syntax.

````markdown
<pre id="hello-world-code" class="pseudocode">
    \begin{algorithmic}
    \PRINT \texttt{'hello world'}
    \end{algorithmic}
</pre>

````
Which willl be rendered as:
<pre id="hello-world-code" class="pseudocode">
    \begin{algorithmic}
    \PRINT \texttt{'hello world'}
    \end{algorithmic}
</pre>


## References

- `pseudocode.js` <https://github.com/SaswatPadhi/pseudocode.js>
- Mathematics in Markdown (Hugo documentation) <https://gohugo.io/content-management/mathematics/>