Merge pull request #80 from Junyi-99/feat-better-preview

.gitignore

@@ -1 +1,2 @@
 public/
+.DS_Store

README.md

@@ -53,7 +53,7 @@ name = "Junyi"
 unsafe = true # true | false; Enable unsafe mode to have a better experience
 
 [markup.highlight]
-style = 'base16-snazzy' # Highlight.js style
+style = 'base16-snazzy' # Chroma style, find more at here: https://swapoff.org/chroma/playground/
 
 ```
 

assets/css/main.css

@@ -154,14 +154,20 @@ thead {
 
 table {
     max-width: 100%;
+    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 */
@@ -175,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);
@@ -184,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;
 }
 
@@ -203,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;
@@ -249,11 +258,16 @@ div.highlight {
     margin-bottom: 14px;
 }
 
+div.highlight div {
+    overflow: scroll;
+}
+
 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

@@ -10,7 +10,31 @@ tags = [
 ]
 +++
 
-There are 9 tests.
+```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;
+}
+```
+
+## 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-->
 
@@ -45,7 +69,7 @@ int main() {
 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`.
+        // 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;
@@ -102,30 +126,34 @@ Now you can click on the line number to get a link to that line.
 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`.
+        // 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)
+### 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" */>}}
@@ -175,4 +203,4 @@ if (a == 999)
 }
 return 0;
 }
-{{< / highlight >}}
+{{< / highlight >}} -->

exampleSiteMultilingual/content/posts/emoji-support.md

@@ -9,7 +9,7 @@ tags = [
 +++
 
 Emoji can be enabled in a Hugo project in a number of ways.
-<!--more-->
+
 The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
 
 To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.

exampleSiteMultilingual/content/posts/emoji-support.zh.md

@@ -10,8 +10,6 @@ tags = [
 
 在 Hugo 博客里，你可以用多种方式使用 Emoji：
 
-<!--more-->
-
 The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
 
 To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.

exampleSiteMultilingual/content/posts/markdown-syntax.md

@@ -20,6 +20,7 @@ favorite = true
 
 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.
 
+
 <!--more-->
 
 ## Headings

exampleSiteMultilingual/content/posts/math-typesetting.md

@@ -2,38 +2,15 @@
 author: Hugo Authors
 title: Math Typesetting
 date: 2019-03-08
-description: A brief guide to setup KaTeX
+description: A brief guide to setup MathJax
 math: true
 ---
 
 Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
-<!--more-->
 
-In this example we will be using [KaTeX](https://katex.org/)
+- To enable MathJax on a page basis include the parameter `math: true` in content files.
 
-- Create a partial under `/layouts/partials/math.html`
+## Examples
-- Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally.
-- Include the partial in your templates like so:
-
-```
-{{ if or .Params.math .Site.Params.math }}
-{{ partial "math.html" . }}
-{{ end }}
-```
-- To enable KaTex globally set the parameter `math` to `true` in a project's configuration
-- To enable KaTex on a per page basis include the parameter `math: true` in content files.
-
-**Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
-{{< math.inline >}}
-{{ if or .Page.Params.math .Site.Params.math }}
-<!-- KaTeX -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
-{{ end }}
-{{</ math.inline >}}
-
-### Examples
 
 Inline math: $$ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $$
 

exampleSiteMultilingual/content/posts/placeholder-text.md

@@ -31,7 +31,7 @@ tractus malis.
 4. Arcanaque montibus omnes
 5. Quidem et
 
-# Vagus elidunt
+## Vagus elidunt
 
 <svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
 

exampleSiteMultilingual/hugo.toml

@@ -156,13 +156,13 @@ author = "authors"
 defaultMarkdownHandler = 'goldmark'
 
 [markup.goldmark.renderer]
-unsafe = true
+unsafe = true # Enable unsafe mode to have a better experience
 
 [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'
+style              = 'catppuccin-frappe' # Find more style at here: https://swapoff.org/chroma/playground/
 tabWidth           = 4
 
 [params.UmamiAnalytics]

layouts/_default/single.html

@@ -53,29 +53,10 @@
     */}}
 
     {{ if .Store.Get "hasMermaid" }}
-        {{ partial "resource.html" (dict "context" . "type" "js" "filename" "js/load-mermaid.js") }}
+        {{ partial "mermaid_support.html" . }}
+    {{ end }}
 
-        {{ $colorTheme := "light" }}
+    {{ if .Params.math }}
-        {{ if and (site.Params.colortheme) (ne site.Params.colortheme "") }}
+        {{ partial "mathjax_support.html" . }}
-            {{ $colorTheme = site.Params.colortheme | lower }}
-        {{ end }}
-
-        <script type="module">
-            function detectCurrentScheme3() {
-                    const defaultTheme = "{{ $colorTheme }}";
-                    if (localStorage !== null && localStorage.getItem("user-color-scheme")) {
-                            return localStorage.getItem("user-color-scheme");
-                    }
-                    if (defaultTheme === "dark" || defaultTheme === "light") {
-                            return defaultTheme;
-                    }
-                    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-            }
-
-            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
-            window.mermaid = mermaid;
-            window.initMermaid()
-            document.body.dispatchEvent(new CustomEvent(detectCurrentScheme3() + "-theme-set"));
-        </script>
     {{ end }}
 {{ end }}

layouts/index.html

@@ -8,6 +8,7 @@
         {{ range (.Paginate $pages).Pages }}
             {{ partial "post-summary.html" . }}
         {{ end }}
+        
         {{ partial "pagination.html" . }}
     </div>
 

layouts/partials/head.html

@@ -63,7 +63,7 @@
     {{ with resources.Get .  }}
       {{ $r = . }}
     {{ else }}
-      {{ errorf "error: You defined customCSS, but %s was not found, please check your config." . }}
+      {{ errorf "error: You defined customCSS, but %s was not found in the local file system, please check your config." . }}
     {{ end }}
 
     {{ if $r}}

layouts/partials/mermaid_support.html

@@ -0,0 +1,24 @@
+{{ partial "resource.html" (dict "context" . "type" "js" "filename" "js/load-mermaid.js") }}
+
+{{ $colorTheme := "light" }}
+{{ if and (site.Params.colortheme) (ne site.Params.colortheme "") }}
+{{ $colorTheme = site.Params.colortheme | lower }}
+{{ end }}
+
+<script type="module">
+    function detectCurrentScheme3() {
+        const defaultTheme = "{{ $colorTheme }}";
+        if (localStorage !== null && localStorage.getItem("user-color-scheme")) {
+            return localStorage.getItem("user-color-scheme");
+        }
+        if (defaultTheme === "dark" || defaultTheme === "light") {
+            return defaultTheme;
+        }
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+    window.mermaid = mermaid;
+    window.initMermaid()
+    document.body.dispatchEvent(new CustomEvent(detectCurrentScheme3() + "-theme-set"));
+</script>

layouts/partials/post-summary.html

@@ -35,5 +35,13 @@
         </div>
     {{ end }}
     
+    {{ if .Store.Get "hasMermaid" }}
+        {{ partial "mermaid_support.html" . }}
+    {{ end }}
+    
+    {{ if .Params.math }}
+        {{ partial "mathjax_support.html" . }}
+    {{ end }}
+
     {{ partial "post-info.html" . }}
 </article>

netlify.toml

@@ -1,13 +1,13 @@
 [build]
 publish = "exampleSiteMultilingual/public"
-command = "cd exampleSiteMultilingual && hugo --theme hugo-theme-anubis2 --themesDir=../.. --baseURL $URL"
+command = "cd exampleSiteMultilingual && hugo --themesDir=../.. --baseURL $URL"
 
 [build.environment]
 HUGO_VERSION = "0.136.5"
 HUGO_THEME = "repo"
 
 [context.deploy-preview]
-command = "cd exampleSiteMultilingual &&  hugo --theme hugo-theme-anubis2 --themesDir=../.. --buildFuture --buildDrafts --baseURL $DEPLOY_PRIME_URL"
+command = "cd exampleSiteMultilingual &&  hugo --themesDir=../.. --buildFuture --buildDrafts --baseURL $DEPLOY_PRIME_URL"
 
 [[headers]]
   for = "/*"