hugo-theme-anubis2/exampleSiteMultilingual/content/posts/demo-multiline-codes.md

+++ author = "Junyi" title = "Demo - Multiline Codes" date = "2024-04-23" description = "Codes, Codefences, and Syntax Highlighting." tags = [ "icons", "anubis2", "hugo" ] +++

There are 9 tests.

Line Numbers, Highlight Lines

Line Number (table) and Highlight Lines

linenos=table will give copy-and-paste friendly code blocks.

```c {linenos=table, hl_lines=[1,"3-4",8], linenostart=199}
// codes ...
```

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;
}

Line Number (true) and Highlight Lines

```c {linenos=true, hl_lines=[1,"3-4",8], linenostart=1}
// codes ...
```

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;
}

Line Number (inline) and Highlight Lines

```c {linenos=inline, hl_lines=[1,"3-4",8], linenostart=1}
// codes ...
```

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;
}

Line Number (false) and Highlight Lines

linenos=false will turn off line numbers if it’s configured to be on in site configuration.

```c {linenos=false, hl_lines=[1,"3-4",8]}
// codes ...
```

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;
}

Anchor, Inline, Shortcode

Line Number (table) and Highlight Lines and Anchor

Now you can click on the line number to get a link to that line.

```c {linenos=table, hl_lines=[1,"3-4",8], linenostart=199, anchorlinenos=true}
// codes ...
```

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;
}

Line Number (table) and Highlight Inline (❌ Not supported by Anubis2)

```c {linenos=true,hl_lines=[1,"3-4",8], hl_inline=true}
// codes ...
```

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;
}

Highlight shortcode, with Line Number (table), with Highlight Lines and Anchor

{{</* highlight c "linenos=table,hl_lines=1 3-4 8, anchorlinenos=true" */>}}
// codes
{{</* /highlight */>}}

{{< highlight c "linenos=table,hl_lines=1 3-4 8, anchorlinenos=true" >}} 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; } {{< / highlight >}}

Highlight shortcode, with Line Number (inline), with Highlight Lines and Anchor

{{</* highlight c "linenos=inline,hl_lines=1 3-4 8, anchorlinenos=true" */>}}
// codes
{{</* /highlight */>}}

{{< highlight c "linenos=inline,hl_lines=1 3-4 8, anchorlinenos=true" >}} 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; } {{< / highlight >}}

Highlight shortcode, No Line Number, With Highlight Lines and Anchor

{{</* highlight c "linenos=false,hl_lines=1 3-4 8, anchorlinenos=true" */>}}
// codes
{{</* /highlight */>}}

{{< highlight c "linenos=false,hl_lines=1 3-4 8, anchorlinenos=true" >}} 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; } {{< / highlight >}}