--- 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 ``` And render all element with `pseudocode` HTMl class. ```html ``` ```html ... {{ if .Param "pseudocode" }} {{ partialCached "pseudocode" . }} {{ end }} ...

{{ block "main" . }}{{ end }} {{ if .Param "pseudocode" }} {{ partialCached "pseudocode-render" . }} {{ end }}

``` ## 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

    \begin{algorithmic}
    \PRINT \texttt{'hello world'}
    \end{algorithmic}

```` Which willl be rendered as:

    \begin{algorithmic}
    \PRINT \texttt{'hello world'}
    \end{algorithmic}

## References - `pseudocode.js` - Mathematics in Markdown (Hugo documentation)