diff --git a/assets/css/main.css b/assets/css/main.css index 75a91dc..5a56b46 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -154,16 +154,20 @@ thead { table { max-width: 100%; - border-spacing: 0; display: block; overflow: scroll; + border-spacing: 0; + border-collapse: collapse; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + font-size: 14px; } - th, td { - padding: 0.5em 1em; + padding: 0.25em 0.5em; border: 1px double var(--table-border-color); + } /* Code */ @@ -177,7 +181,8 @@ kbd { color: var(--pre-color); background-color: var(--pre-bg-color); font-family: 'Menlo', 'Courier New', 'Consolas', monospace; - font-size: 14.4px; /* 18px * 0.6 */ + font-size: 14.4px; + /* 18px * 0.6 */ line-height: 154%; border-radius: 6px; border: 1px solid var(--pre-border-color); @@ -186,7 +191,8 @@ kbd { /* tag */ code { - font-size: 14.4px; /* 18px * 0.6 */ + font-size: 14.4px; + /* 18px * 0.6 */ padding: 0.1em 0.3em; } @@ -205,7 +211,8 @@ p kbd, pre kbd, p kbd kbd, pre kbd kbd { - font-size: 14.4px; /* 18px * 0.6 */ + font-size: 14.4px; + /* 18px * 0.6 */ background-color: var(--kbd-bg-color); border: 1px solid var(--pre-border-color); border-width: 1px 2px 2px 1px; @@ -259,7 +266,8 @@ div.highlight pre { border: none; display: grid; margin: 0px; - overflow: auto; /* Have to add this line, otherwise the "pre" and "code" will have different width */ + overflow: auto; + /* Have to add this line, otherwise the "pre" and "code" will have different width */ /* padding-left: 10px; */ /* padding-right: 10px; */ /* padding-top: 10px; */ diff --git a/exampleSiteMultilingual/content/posts/demo-multiline-codes.md b/exampleSiteMultilingual/content/posts/demo-multiline-codes.md index f4a359f..ed32b63 100644 --- a/exampleSiteMultilingual/content/posts/demo-multiline-codes.md +++ b/exampleSiteMultilingual/content/posts/demo-multiline-codes.md @@ -21,6 +21,21 @@ int main() { } ``` +## 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 @@ -118,23 +133,27 @@ int main() { } ``` -### Line Number (table) and Highlight Inline (❌ Not supported by Anubis2) +### Highlight Inline are not supported by Anubis2 ❌ - ```c {linenos=true,hl_lines=[1,"3-4",8], hl_inline=true} + ```c {linenos=true,hl_lines=[1,3,5], hl_inline=true} // codes ... ``` -```c {linenos=true,hl_lines=[1,"3-4",8], hl_inline=true} +```c {linenos=true,hl_lines=[1,3,5], 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; } ``` + + diff --git a/exampleSiteMultilingual/content/posts/markdown-syntax.md b/exampleSiteMultilingual/content/posts/markdown-syntax.md index 77121be..076acea 100644 --- a/exampleSiteMultilingual/content/posts/markdown-syntax.md +++ b/exampleSiteMultilingual/content/posts/markdown-syntax.md @@ -18,9 +18,7 @@ aliases = ["migrate-from-jekyl"] favorite = true +++ -[This article](https://www.baidu.com/) 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. - -https://www.baidu.com +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.