update example content
This commit is contained in:
parent
37351acf91
commit
bab2a8c602
5 changed files with 80 additions and 68 deletions
|
@ -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
|
||||||
}
|
}
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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.
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue