update example content

This commit is contained in:
Mivinci 2022-11-10 15:09:45 +08:00
parent 37351acf91
commit bab2a8c602
5 changed files with 80 additions and 68 deletions

View file

@ -4,6 +4,8 @@
--back: #fff; --back: #fff;
--text: #222; --text: #222;
--code-back: #fff; --code-back: #fff;
// code highlighting
} }
.dark { .dark {
@ -12,4 +14,6 @@
--text: silver; --text: silver;
--grid: #555; --grid: #555;
--code-back: #222; --code-back: #222;
// code highlighting
} }

View file

@ -67,7 +67,22 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
## Code Blocks ## Code Blocks
#### Code block with backticks #### Code block without code highlighting
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
#### Code block with HTML
```html ```html
<!doctype html> <!doctype html>
@ -82,20 +97,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
</html> </html>
``` ```
#### Code block indented with four spaces #### Code block with Go
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
#### Code block with Golang
```go {hl_lines=[3]} ```go {hl_lines=[3]}
type Registry interface { type Registry interface {

View file

@ -67,7 +67,22 @@ blockquote 元素表示从另一个来源引用的内容,可选地带有必须
## 代码块 ## 代码块
#### 带反引号的代码块 #### 不使用高亮的代码块
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
#### HTML 的代码块
```html ```html
<!doctype html> <!doctype html>
@ -82,20 +97,7 @@ blockquote 元素表示从另一个来源引用的内容,可选地带有必须
</html> </html>
``` ```
#### 缩进四个空格的代码块 #### Go 的代码块
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
#### Golang 的代码块
```go {hl_lines=[3]} ```go {hl_lines=[3]}
type Registry interface { type Registry interface {

View file

@ -1,55 +1,43 @@
--- ---
author: Hugo Authors author: Mivinci
title: Math Typesetting title: Math Typesetting
date: 2021-07-18T10:52:59+08:00 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 math: true
tags: tags:
- KaTex - 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.
<!--more--> ```
math:
In this example we will be using [KaTeX](https://katex.org/) enable: false
provider: katex
- 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 }}
``` ```
- To enable KaTex globally set the parameter `math` to `true` in a project's configuration ## Examples
- 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) The following are some examples of mathematical notations with KaTeX that are pretty much like LaTeX's.
{{< math.inline >}} ### Block
{{ if or .Page.Params.math .Site.Params.math }}
<!-- KaTeX --> ```
\varphi = 1+\frac{1}{1+\frac{1}{1+\frac{1} {1+\cdots}}}
```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous"> wiil be rendered as:
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
{{ end }}
{{</ math.inline >}}
### Examples
{{< math.inline >}}
<p>
Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)
</p>
{{</ math.inline >}}
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.

View file

@ -2,7 +2,7 @@
author: Mermaid Team author: Mermaid Team
title: Mermaid Diagrams title: Mermaid Diagrams
date: 2021-07-18T10:52:59+08:00 date: 2021-07-18T10:52:59+08:00
description: A brief guide to Mermaid syntax. description: A brief guide to write diagrams.
diagram: true diagram: true
tags: tags:
- markdown - markdown
@ -26,6 +26,8 @@ C -->|One| D[Result 1]
C -->|Two| E[Result 2] C -->|Two| E[Result 2]
``` ```
will be rendered as:
```mermaid ```mermaid
flowchart LR flowchart LR
@ -49,6 +51,8 @@ John->>Bob: How about you?
Bob-->>John: Jolly good! Bob-->>John: Jolly good!
``` ```
will be rendered as:
```mermaid ```mermaid
sequenceDiagram sequenceDiagram
Alice->>John: Hello John, how are you? Alice->>John: Hello John, how are you?
@ -74,6 +78,8 @@ gantt
Parallel 4 : des6, after des4, 1d Parallel 4 : des6, after des4, 1d
``` ```
will be rendered as:
```mermaid ```mermaid
gantt gantt
section Section section Section
@ -106,6 +112,8 @@ class Class10 {
} }
``` ```
will be rendered as:
```mermaid ```mermaid
classDiagram classDiagram
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
@ -137,6 +145,8 @@ Moving --> Crash
Crash --> [*] Crash --> [*]
``` ```
will be rendered as:
```mermaid ```mermaid
stateDiagram-v2 stateDiagram-v2
[*] --> Still [*] --> Still
@ -156,6 +166,8 @@ pie
"Rats" : 15 "Rats" : 15
``` ```
will be rendered as:
```mermaid ```mermaid
pie pie
"Dogs" : 386 "Dogs" : 386
@ -178,6 +190,8 @@ pie
Sit down: 3: Me Sit down: 3: Me
``` ```
will be rendered as:
```mermaid ```mermaid
journey journey
title My working day title My working day
@ -227,6 +241,8 @@ Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to") Rel(SystemC, customerA, "Sends e-mails to")
``` ```
will be rendered as:
```mermaid ```mermaid
C4Context C4Context
title System Context diagram for Internet Banking System title System Context diagram for Internet Banking System