↓Skip to main content

Hugo: Congo Theme Snippets

Table of Contents

This blog was built using Hugo and the Hugo heme Congo. Below is a list of my favorite features.

Additional features are documented on the Congo sample page (raw.

Lead text #

This is a lead text.

<lead>
    This is a lead text.
</lead>

Citations and Blockquotes #

Blockquote without attribution #

Here’s a simple blockquote without attribution.

> Here's a simple blockquote _without_ *attribution*.

Blockquote with attribution #

Here’s a quote that is attributed to an author.

  • Pascal1
> Here's a quote that is attributed to an author.
> - <cite>Pascal[^1]</cite>

[^1]: The quote was copied from [Pascal's website](https://www.pascalspoerri.ch).

KaTeX / LaTeX Support #

Include katex to enable to support for parsing Tex.

< katex >

Then you can either write inline \(\LaTeX \) or multiline $$ \LaTeX . $$

Inline \(\LaTeX \) #

Inline LaTeX expressions need to be wrapped with \\( and \\) delimiters. Example: x^2 is rendered as \( x^2 \).

\(\LaTeX \) Block #

The tex code needs to be wrapped with $$ as delimiters.

Example:

$$
J(\theta_0, \theta_1) = {1 \over {2m}} \sum_{i=1}^{m} \left( h_\theta\left(x^{(i)}\right) - y^{(i)}\right)^2
$$

is rendered as: $$ J(\theta_0, \theta_1) = {1 \over {2m}} \sum_{i=1}^{m} \left( h_\theta\left(x^{(i)}\right) - y^{(i)}\right)^2 $$

Charts #

Congo supports charts through charts.js. Wrap the chartjs code with <chart>...</chart>

Example:

<chart>
   type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '## of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
</chart>

is rendered as:

Flowcharts and Diagrams #

Flowcharts and diagrams are supported with mermaid.

Example:

<mermaid>
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</mermaid>

is rendered as

graph TD; A-->B; A-->C; B-->D; C-->D;

More flowchart and diagram examples are available here.

  1. The quote was copied from Pascal’s website. ↩︎

↑