How to render pseudocode in Hugo with pseudocode.js
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.
<!-- 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.
<!-- in themes/<theme>layouts/partials/pseudocode-render.html -->
<script>
let pseudocodeElements = document.getElementsByClassName("pseudocode");
for (let element of pseudocodeElements) {
pseudocode.renderElement(element);
}
</script>
<!-- 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:
…Unixfu
A bean for some useful UNIX command snippets.
Add two hours
This could be useful for nocmig fan, to ease the hour computation of a bird contact.
hour() {
start=$1
duration=$2
IFS=":" read -r duration_hour duration_minute <<< $duration
date -d "$start $(($duration_hour * 60 + $duration_minute)) minutes" +"%H:%M"
}
hour 17:00 5:4322:43
WAV creation datetime
Here is a small snippet that demonstrates how to get the creation date-time of a WAV file with ffprobe
Analyze projects programming languages using github-linguist
github-linguist is a Ruby library and command line tool for detecting the programming languages used in a project. It is used by GitHub to detect the language of a project and to generate language statistics.
We can use it through the command line, in order to analyze the programming languages used in a project.
During my application to bioinformatics master degree, I had to say which programming languages I commend. So here is some quick tips to use github-linguist as I learned to do for this purpose.
Astuce: Copier du texte dans le presse-papier depuis un terminal Linux
Il suffit d’installer xclip:
sudo dnf install xclip # sur fedora par exemple
Puis, c’est tout simple:
echo "Coucou !" | xclip -selection c
Un exemple d’utilisation: copier une clé publique ssh dans le presse papier depuis le terminal:
cat ~/.ssh/id_ecdsa.pub | xclip -selection c
Générer le code LaTeX/chemfig d'une réaction chimique avec Zyme
Durant les trois années de licence bioinformatique, nous avons des cours de biochimie, et ceux ci viennent avec leur lots de structure chimiques à connaître.
En L1, j’avais réalisé un document pdf avec LaTeX/chemfig des acides aminées protéinogènes en représentation de FISCHER, et j’avais trouvé ça plutôt sympa, bien que ça m’avait pris pas mal de temps à rédiger.
Ajourd’hui, j’améliore ma méthode: fini le code de la structure en chemfig (extension LaTeX) a la mano, vive le code généré par du code !
…