feature: enhanced table

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 {
 
 /* <code> 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; */

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`
+
 <!--more-->
 
 ## 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;
 }
 ```
 
+
+<!-- 
+
+Those are trash codes.
+
 ### Highlight shortcode, with Line Number (table), with Highlight Lines and Anchor
 
     {{</* highlight c "linenos=table,hl_lines=1 3-4 8, anchorlinenos=true" */>}}
@@ -184,4 +203,4 @@ if (a == 999)
 }
 return 0;
 }
-{{< / highlight >}}
+{{< / highlight >}} -->

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.
+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.
-
-https://www.baidu.com
 
 
 <!--more-->