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" ] +++

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

Item	Line Numbers	Highlight Lines	Anchor Lines	Wide CodeBlock Scroll	Supported
Full Feature Support	ture	true	true	✅	✅
	table	true	true	✅	✅
	table	true	false	✅	✅
	inline			✅	✅
	ture	true	false	✅	✅
	ture	false	false	✅	✅
	false	true	/	✅	✅
Basic Support	false	false	/	✅	✅

Note: Anubis2 does not support hl_inline=true

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

Highlight Inline are not supported by Anubis2 ❌

```c {linenos=true,hl_lines=[1,3,5], hl_inline=true}
// codes ...
```

int main() {
    int a = 1;
    if (a == 999)
        // 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;
}