diff --git a/assets/css/main.css b/assets/css/main.css index d81fbf5..9769a4d 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -864,7 +864,7 @@ ul.footer-menu>li { } .highlight-copy-btn { - /* display: none; */ + display: none; position: absolute; top: 0px; right: 0px; diff --git a/exampleSiteMultilingual/content/posts/codes.md b/exampleSiteMultilingual/content/posts/codes.md new file mode 100644 index 0000000..1f60c35 --- /dev/null +++ b/exampleSiteMultilingual/content/posts/codes.md @@ -0,0 +1,174 @@ ++++ +author = "Junyi" +title = "Demo - Codes" +date = "2024-04-23" +description = "Codes, Codefences, and Syntax Highlighting." +tags = [ + "icons", + "anubis2", + "hugo" +] ++++ + +## 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 ... + ``` + +```c {linenos=table, hl_lines=[1,"3-4",8], linenostart=199} +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 ... + ``` + +```c {linenos=true, hl_lines=[1,"3-4",8], linenostart=1} +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 ... + ``` + +```c {linenos=inline, hl_lines=[1,"3-4",8], linenostart=1} +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 ... + ``` + +```c {linenos=false, hl_lines=[1,"3-4",8]} +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 ... + ``` + +```c {linenos=table, hl_lines=[1,"3-4",8], linenostart=199, 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; +} +``` + +### Line Number (table) and Highlight Inline (❌ Not supported by Anubis2) + + ```c {linenos=true,hl_lines=[1,"3-4",8], hl_inline=true} + // codes ... + ``` + +```c {linenos=true,hl_lines=[1,"3-4",8], hl_inline=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 shortcode, with Line Number (table), with Highlight Lines and Anchor + + {{}} + // codes + {{}} + +{{< 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 + + {{}} + // codes + {{}} + +{{< 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 + + {{}} + // codes + {{}} + +{{< 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 >}} diff --git a/exampleSiteMultilingual/content/posts/icons.md b/exampleSiteMultilingual/content/posts/icons.md index 23dff6c..0f85c12 100644 --- a/exampleSiteMultilingual/content/posts/icons.md +++ b/exampleSiteMultilingual/content/posts/icons.md @@ -1,6 +1,6 @@ +++ author = "Junyi" -title = "Icons" +title = "Demo - Social Icons" date = "2024-04-23" description = "Guide to using social icons supported by Anubis2." tags = [ @@ -12,6 +12,8 @@ tags = [ 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 `{{}}`. + + Here is a list of available icons, their shortcodes, and what they look like when rendered: diff --git a/exampleSiteMultilingual/hugo.toml b/exampleSiteMultilingual/hugo.toml index 6ef6ee1..5ca0302 100644 --- a/exampleSiteMultilingual/hugo.toml +++ b/exampleSiteMultilingual/hugo.toml @@ -145,9 +145,19 @@ category = "categories" tag = "tags" author = "authors" +[markup] +defaultMarkdownHandler = 'goldmark' + [markup.goldmark.renderer] unsafe = true +[markup.highlight] +anchorLineNos = false +codeFences = true # tested with true and false. Both work. +noClasses = true # If you run with markup.highlight.noClasses=false in your site configuration, you need a style sheet. +style = 'base16-snazzy' +tabWidth = 4 + [params.UmamiAnalytics] enabled = true dnt = false