update example content
This commit is contained in:
Mivinci
parent
37351acf91
commit
bab2a8c602
5 changed files with 80 additions and 68 deletions
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
|
||||
|
||||
```
|
||||
<!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
|
||||
<!doctype html>
|
||||
|
|
@ -82,20 +97,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
|
|||
</html>
|
||||
```
|
||||
|
||||
#### Code block indented with four spaces
|
||||
|
||||
<!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
|
||||
#### Code block with Go
|
||||
|
||||
```go {hl_lines=[3]}
|
||||
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
|
||||
<!doctype html>
|
||||
|
|
@ -82,20 +97,7 @@ blockquote 元素表示从另一个来源引用的内容，可选地带有必须
|
|||
</html>
|
||||
```
|
||||
|
||||
#### 缩进四个空格的代码块
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
#### Golang 的代码块
|
||||
#### Go 的代码块
|
||||
|
||||
```go {hl_lines=[3]}
|
||||
type Registry interface {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
<!--more-->
|
||||
|
||||
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
|
||||
|
||||
<!-- 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">
|
||||
<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 >}}
|
||||
wiil be rendered as:
|
||||
|
||||
### 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
|
||||
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
|
||||
|
|
|
|||
Loading…
Reference in a new issue