From 2a6d9b31f83cedcff541d1932469f387dffe3524 Mon Sep 17 00:00:00 2001 From: Junyi Hou Date: Sun, 17 Nov 2024 19:19:14 +0800 Subject: [PATCH 1/8] feat: better preview for math and mermaid --- .../content/posts/emoji-support.md | 2 +- .../content/posts/emoji-support.zh.md | 2 -- .../content/posts/markdown-syntax.md | 5 +++- .../content/posts/math-typesetting.md | 29 ++----------------- .../content/posts/placeholder-text.md | 2 +- layouts/_default/single.html | 27 +++-------------- layouts/index.html | 1 + layouts/partials/mermaid_support.html | 24 +++++++++++++++ layouts/partials/post-summary.html | 8 +++++ 9 files changed, 46 insertions(+), 54 deletions(-) create mode 100644 layouts/partials/mermaid_support.html diff --git a/exampleSiteMultilingual/content/posts/emoji-support.md b/exampleSiteMultilingual/content/posts/emoji-support.md index 119346a..e16eeeb 100644 --- a/exampleSiteMultilingual/content/posts/emoji-support.md +++ b/exampleSiteMultilingual/content/posts/emoji-support.md @@ -9,7 +9,7 @@ tags = [ +++ Emoji can be enabled in a Hugo project in a number of ways. - + 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. diff --git a/exampleSiteMultilingual/content/posts/emoji-support.zh.md b/exampleSiteMultilingual/content/posts/emoji-support.zh.md index 5c11cf4..3d449e1 100644 --- a/exampleSiteMultilingual/content/posts/emoji-support.zh.md +++ b/exampleSiteMultilingual/content/posts/emoji-support.zh.md @@ -10,8 +10,6 @@ tags = [ 在 Hugo 博客里，你可以用多种方式使用 Emoji： - - 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. diff --git a/exampleSiteMultilingual/content/posts/markdown-syntax.md b/exampleSiteMultilingual/content/posts/markdown-syntax.md index a092b24..77121be 100644 --- a/exampleSiteMultilingual/content/posts/markdown-syntax.md +++ b/exampleSiteMultilingual/content/posts/markdown-syntax.md @@ -18,7 +18,10 @@ aliases = ["migrate-from-jekyl"] 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. +[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 + diff --git a/exampleSiteMultilingual/content/posts/math-typesetting.md b/exampleSiteMultilingual/content/posts/math-typesetting.md index 9d96925..29dbd1c 100644 --- a/exampleSiteMultilingual/content/posts/math-typesetting.md +++ b/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. - -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` -- 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 }} - - - - -{{ end }} -{{}} - -### Examples +## Examples Inline math: $$ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $$ diff --git a/exampleSiteMultilingual/content/posts/placeholder-text.md b/exampleSiteMultilingual/content/posts/placeholder-text.md index 1e9ee4e..ac70ed6 100644 --- a/exampleSiteMultilingual/content/posts/placeholder-text.md +++ b/exampleSiteMultilingual/content/posts/placeholder-text.md @@ -31,7 +31,7 @@ tractus malis. 4. Arcanaque montibus omnes 5. Quidem et -# Vagus elidunt +## Vagus elidunt diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 296faa9..c16b949 100644 --- a/layouts/_default/single.html +++ b/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 and (site.Params.colortheme) (ne site.Params.colortheme "") }} - {{ $colorTheme = site.Params.colortheme | lower }} - {{ end }} - - + {{ if .Params.math }} + {{ partial "mathjax_support.html" . }} {{ end }} {{ end }} diff --git a/layouts/index.html b/layouts/index.html index f134cf2..9330ffd 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -8,6 +8,7 @@ {{ range (.Paginate $pages).Pages }} {{ partial "post-summary.html" . }} {{ end }} + {{ partial "pagination.html" . }} diff --git a/layouts/partials/mermaid_support.html b/layouts/partials/mermaid_support.html new file mode 100644 index 0000000..f3f298f --- /dev/null +++ b/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 }} + + diff --git a/layouts/partials/post-summary.html b/layouts/partials/post-summary.html index fd8fa8c..a9babeb 100644 --- a/layouts/partials/post-summary.html +++ b/layouts/partials/post-summary.html @@ -34,6 +34,14 @@ {{ i18n "readMore" }} {{ end }} + + {{ if .Store.Get "hasMermaid" }} + {{ partial "mermaid_support.html" . }} + {{ end }} + + {{ if .Params.math }} + {{ partial "mathjax_support.html" . }} + {{ end }} {{ partial "post-info.html" . }} From c92d59921ff236f9416b2984b18503252173159d Mon Sep 17 00:00:00 2001 From: Junyi Hou Date: Sun, 17 Nov 2024 19:22:31 +0800 Subject: [PATCH 2/8] fix: customCSS error message --- layouts/partials/head.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 1126424..61e1cb6 100644 --- a/layouts/partials/head.html +++ b/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}} From 6b98e015c6833c18e77e94945bdf783fbacb8aa7 Mon Sep 17 00:00:00 2001 From: Junyi Hou Date: Sun, 17 Nov 2024 19:23:44 +0800 Subject: [PATCH 3/8] update .gitignore --- .gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index d298be1..0c376ea 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -public/ \ No newline at end of file +public/ +.DS_Store From d18fb480d396aadebda0a5278cf2c11ad479a580 Mon Sep 17 00:00:00 2001 From: Junyi Hou Date: Sun, 17 Nov 2024 19:44:18 +0800 Subject: [PATCH 4/8] fix: the readme and make the code block scrollable --- README.md | 2 +- assets/css/main.css | 4 ++++ exampleSiteMultilingual/hugo.toml | 4 ++-- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 4fa0307..fe91ef6 100644 --- a/README.md +++ b/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/ ``` diff --git a/assets/css/main.css b/assets/css/main.css index 419a06c..4d819d2 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -249,6 +249,10 @@ div.highlight { margin-bottom: 14px; } +div.highlight div { + overflow: scroll; +} + div.highlight pre { border: none; display: grid; diff --git a/exampleSiteMultilingual/hugo.toml b/exampleSiteMultilingual/hugo.toml index 205b592..58186d6 100644 --- a/exampleSiteMultilingual/hugo.toml +++ b/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] From 31d741c932363f7d9c3647756957c5e681e7b633 Mon Sep 17 00:00:00 2001 From: Junyi Hou Date: Sun, 17 Nov 2024 19:45:22 +0800 Subject: [PATCH 5/8] update the readme --- .../content/posts/demo-multiline-codes.md | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/exampleSiteMultilingual/content/posts/demo-multiline-codes.md b/exampleSiteMultilingual/content/posts/demo-multiline-codes.md index e3df562..f4a359f 100644 --- a/exampleSiteMultilingual/content/posts/demo-multiline-codes.md +++ b/exampleSiteMultilingual/content/posts/demo-multiline-codes.md @@ -10,7 +10,16 @@ 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; +} +``` @@ -45,7 +54,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,7 +111,7 @@ 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; From c434a66c44cd7d119a9e80915dcff28b33265344 Mon Sep 17 00:00:00 2001 From: Junyi Hou Date: Sun, 17 Nov 2024 20:10:41 +0800 Subject: [PATCH 6/8] fix: table too wide on small devices --- assets/css/main.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/assets/css/main.css b/assets/css/main.css index 4d819d2..75a91dc 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -155,6 +155,8 @@ thead { table { max-width: 100%; border-spacing: 0; + display: block; + overflow: scroll; } From 40ec45006ca7a25e9247d604f1ce779535adba05 Mon Sep 17 00:00:00 2001 From: Junyi Hou Date: Sun, 17 Nov 2024 20:20:34 +0800 Subject: [PATCH 7/8] feature: enhanced table --- assets/css/main.css | 22 +++++++++----- .../content/posts/demo-multiline-codes.md | 29 +++++++++++++++---- .../content/posts/markdown-syntax.md | 4 +-- 3 files changed, 40 insertions(+), 15 deletions(-) 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. From c9043c7fcba5cbdf61ee8b15e4ed635f3881b278 Mon Sep 17 00:00:00 2001 From: Junyi Hou Date: Mon, 18 Nov 2024 14:32:07 +0800 Subject: [PATCH 8/8] fix: netlify script --- netlify.toml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/netlify.toml b/netlify.toml index f5eba71..e72c944 100644 --- a/netlify.toml +++ b/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 = "/*"