This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

Feel free to switch between the light and dark themes to see how the diagram adapts its colors accordingly.

# Mermaid Diagrams

gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d

Get more examples at About Mermaid

To use an icon, simply copy its shortcode and paste it into your content where you want the icon to appear. The shortcode must be enclosed in {{< >}}.

# Individual support for code, pre, kbd, mark

code

pre

CRTL + K + B + D

199
200
201
202
203
204
205
206

int main() {
    int a = 1;
    if (a == 999)
        // This is a very long comment to test the `overflow` attribute defined in CSS. The `overflow` property in CSS deals with the content when it overflows the block-level container. It can take the following values: `visible` (default), `hidden`, `scroll`, `auto`, and `clip`.
        // If `visible` is specified, the content is not clipped and can render outside the container. If `hidden` is specified, the content is clipped and the rest of the content will be invisible. If `scroll` is specified, the browser should provide a scrolling mechanism for the user to access the clipped content.
    }
    return 0;
}

# Truth Table

Note: Anubis2 does not support hl_inline=true