diff --git a/assets/css/theme.scss b/assets/css/theme.scss index 8ed22f8..8d92649 100644 --- a/assets/css/theme.scss +++ b/assets/css/theme.scss @@ -4,6 +4,8 @@ --back: #fff; --text: #222; --code-back: #fff; + + // code highlighting } .dark { @@ -12,4 +14,6 @@ --text: silver; --grid: #555; --code-back: #222; + + // code highlighting } \ No newline at end of file diff --git a/exampleSite/content/markdown-syntax.md b/exampleSite/content/markdown-syntax.md index c16ab5d..466fd3c 100644 --- a/exampleSite/content/markdown-syntax.md +++ b/exampleSite/content/markdown-syntax.md @@ -67,7 +67,22 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou ## Code Blocks -#### Code block with backticks +#### Code block without code highlighting + +``` + + + + + Example HTML5 Document + + +

Test

+ + +``` + +#### Code block with HTML ```html @@ -82,20 +97,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou ``` -#### Code block indented with four spaces - - - - - - Example HTML5 Document - - -

Test

- - - -#### Code block with Golang +#### Code block with Go ```go {hl_lines=[3]} type Registry interface { diff --git a/exampleSite/content/markdown-syntax.zh-cn.md b/exampleSite/content/markdown-syntax.zh-cn.md index 8ca9d37..e790649 100644 --- a/exampleSite/content/markdown-syntax.zh-cn.md +++ b/exampleSite/content/markdown-syntax.zh-cn.md @@ -67,7 +67,22 @@ blockquote 元素表示从另一个来源引用的内容，可选地带有必须 ## 代码块 -#### 带反引号的代码块 +#### 不使用高亮的代码块 + +``` + + + + + Example HTML5 Document + + +

Test

+ + +``` + +#### HTML 的代码块 ```html @@ -82,20 +97,7 @@ blockquote 元素表示从另一个来源引用的内容，可选地带有必须 ``` -#### 缩进四个空格的代码块 - - - - - - Example HTML5 Document - - -

Test

- - - -#### Golang 的代码块 +#### Go 的代码块 ```go {hl_lines=[3]} type Registry interface { diff --git a/exampleSite/content/math-typesetting.md b/exampleSite/content/math-typesetting.md index 5b15fcb..c3d09bd 100644 --- a/exampleSite/content/math-typesetting.md +++ b/exampleSite/content/math-typesetting.md @@ -1,55 +1,43 @@ --- -author: Hugo Authors +author: Mivinci title: Math Typesetting date: 2021-07-18T10:52:59+08:00 -description: A brief guide to setup KaTeX. +description: A brief guide to write mathematical notation. math: true tags: - KaTex --- -Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries. +Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries like [KaTeX](https://katex.org) the one that Minima uses. Here's what you can do in the configuration file to enable it. - - -In this example we will be using [KaTeX](https://katex.org/) - -- 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: - -```bash -{{ if or .Params.math .Site.Params.math }} -{{ partial "math.html" . }} -{{ end }} +``` +math: + enable: false + provider: katex ``` -- 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 +## Examples -**Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html) +The following are some examples of mathematical notations with KaTeX that are pretty much like LaTeX's. -{{< math.inline >}} -{{ if or .Page.Params.math .Site.Params.math }} +### Block - +``` +\varphi = 1+\frac{1}{1+\frac{1}{1+\frac{1} {1+\cdots}}} +``` - - - -{{ end }} -{{}} +wiil be rendered as: -### Examples - -{{< math.inline >}} - -

-Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\) -

-{{}} - -Block math: $$ - \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } +\varphi = 1+\frac{1}{1+\frac{1}{1+\frac{1} {1+\cdots}}} $$ + +### Inline + +``` +Pythagorean theorem can be written as $a^2+b^2=c^2$ where *a*, *b* and *c* are the length of legs of a triangle. +``` + +will be rendered as: + +Pythagorean theorem can be written as $a^2+b^2=c^2$ where *a*, *b* and *c* are the length of legs of a triangle. diff --git a/exampleSite/content/mermaid-diagrams.md b/exampleSite/content/mermaid-diagrams.md index aa2ec17..242a8e2 100644 --- a/exampleSite/content/mermaid-diagrams.md +++ b/exampleSite/content/mermaid-diagrams.md @@ -2,7 +2,7 @@ author: Mermaid Team title: Mermaid Diagrams date: 2021-07-18T10:52:59+08:00 -description: A brief guide to Mermaid syntax. +description: A brief guide to write diagrams. diagram: true tags: - markdown @@ -26,6 +26,8 @@ C -->|One| D[Result 1] C -->|Two| E[Result 2] ``` +will be rendered as: + ```mermaid flowchart LR @@ -49,6 +51,8 @@ John->>Bob: How about you? Bob-->>John: Jolly good! ``` +will be rendered as: + ```mermaid sequenceDiagram Alice->>John: Hello John, how are you? @@ -74,6 +78,8 @@ gantt Parallel 4 : des6, after des4, 1d ``` +will be rendered as: + ```mermaid gantt section Section @@ -106,6 +112,8 @@ class Class10 { } ``` +will be rendered as: + ```mermaid classDiagram Class01 <|-- AveryLongClass : Cool @@ -137,6 +145,8 @@ Moving --> Crash Crash --> [*] ``` +will be rendered as: + ```mermaid stateDiagram-v2 [*] --> Still @@ -156,6 +166,8 @@ pie "Rats" : 15 ``` +will be rendered as: + ```mermaid pie "Dogs" : 386 @@ -178,6 +190,8 @@ pie Sit down: 3: Me ``` +will be rendered as: + ```mermaid journey title My working day @@ -227,6 +241,8 @@ Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") Rel(SystemC, customerA, "Sends e-mails to") ``` +will be rendered as: + ```mermaid C4Context title System Context diagram for Internet Banking System