YByte — markdown syntax demo

See https://pandoc.org/MANUAL.html#pandocs-markdown

Math

单行公式

如果, 那么方程存在两个解

多行公式

渲染出多行

显式增加行 \\

$$
f(x) = \int_{-\infty}^\infty
    \hat{f}(\xi)\,e^{2 \pi i \xi x}
    \,d\xi \\
$$

fitch proof¹

Demo1

Demo2

Demo3

equation align

proof tree

不支持 code block math display

```math
x = {-b \pm \sqrt{b^2-4ac} \over 2a}
```

效果:

x = {-b \pm \sqrt{b^2-4ac} \over 2a}

KaTeX支持的符号: https://katex.org/docs/supported.html

Footnotes, Citation

Here is a simple footnote[^2].

A footnote can also have multiple lines[^3].

[^2]: My reference.
[^3]: To add line breaks within a footnote, prefix new lines with 2 spaces.
    This is a second line.

Here is a simple footnote².

A footnote can also have multiple lines³.

https://pandoc.org/MANUAL.html#citation-syntax

Code block

```haskell
data Document = Document
  { docExt :: Maybe String,
    docTitle :: Text,
    docAuthor :: Maybe Text,
    docTags :: Maybe [Text],
    docDate :: Maybe Text,
    docContent :: Maybe Text,
    docPath :: Maybe Text,
    docAttrs :: Maybe Value
  }
  deriving (Show, Generic)
  deriving (FromJSON, ToJSON) via PrefixedSnake "doc" Document

```

data Document = Document
  { docExt :: Maybe String,
    docTitle :: Text,
    docAuthor :: Maybe Text,
    docTags :: Maybe [Text],
    docDate :: Maybe Text,
    docContent :: Maybe Text,
    docPath :: Maybe Text,
    docAttrs :: Maybe Value
  }
  deriving (Show, Generic)
  deriving (FromJSON, ToJSON) via PrefixedSnake "doc" Document

fenced code attribute

~~~~ {#mycode .haskell .numberLines startFrom="100"}
qsort []     = []
qsort (x:xs) = qsort (filter (< x) xs) ++ [x] ++
               qsort (filter (>= x) xs)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

qsort []     = []
qsort (x:xs) = qsort (filter (< x) xs) ++ [x] ++
               qsort (filter (>= x) xs)

Mermaid diagrams

用 ```mermaid 围栏代码块声明，构建时由 beautiful-mermaid 在 quickjs 中同步渲染为内联 SVG。

流程图：

```mermaid
graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Action]
  B -->|No| D[End]
```

时序图：

```mermaid
sequenceDiagram
  participant Browser
  participant hbrush
  participant quickjs
  Browser->>hbrush: request /posts/foo
  hbrush->>quickjs: eval mermaid bundle (lazy, once)
  quickjs-->>hbrush: ready
  hbrush->>quickjs: renderMermaidSVG(src)
  quickjs-->>hbrush: <svg>...</svg>
  hbrush-->>Browser: HTML with inline SVG
```

类图：

```mermaid
classDiagram
  class Document {
    +Text docTitle
    +Maybe[Text] docDate
    +Text docContent
    +read(FilePath) Document
  }
  class Renderer {
    <<interface>>
    +render(Document) Html
  }
  Renderer <|.. MarkdownRenderer
  Renderer <|.. AsciidocRenderer
```

语法错误会降级为红色占位 SVG，不中断构建：

```mermaid
this is not a valid diagram!@#$
```

Table

|                              | Sites                               | &nbsp;                              |
| ---------------------------- | ----------------------------------- | ----------------------------------- |
| [Github](https://github.com) | [Koka](https://koka-lang.github.io) | [Haskell](https://www.haskell.org/) |

	Sites
Github	Koka	Haskell

Pandoc Grid Tables

: Sample grid table.

+---------------+---------------+--------------------+
| Fruit         | Price         | Advantages         |
+===============+===============+====================+
| Bananas       | $1.34         | - built-in wrapper |
|               |               | - bright color     |
+---------------+---------------+--------------------+
| Oranges       | $2.10         | - cures scurvy     |
|               |               | - tasty            |
+---------------+---------------+--------------------+

Fruit	Price	Advantages
Bananas	$1.34	built-in wrapper bright color
Oranges	$2.10	cures scurvy tasty

Cells can span multiple columns or rows:

+---------------------+----------+
| Property            | Earth    |
+=============+=======+==========+
|             | min   | -89.2 °C |
| Temperature +-------+----------+
| 1961-1990   | mean  | 14 °C    |
|             +-------+----------+
|             | max   | 56.7 °C  |
+-------------+-------+----------+

Property		Earth
Temperature1961-1990	min	-89.2 °C
	mean	14 °C
	max	56.7 °C

A table header may contain more than one row:

+---------------------+-----------------------+
| Location            | Temperature 1961-1990 |
|                     | in degree Celsius     |
|                     +-------+-------+-------+
|                     | min   | mean  | max   |
+=====================+=======+=======+=======+
| Antarctica          | -89.2 | N/A   | 19.8  |
+---------------------+-------+-------+-------+
| Earth               | -89.2 | 14    | 56.7  |
+---------------------+-------+-------+-------+

Location	Temperature 1961-1990in degree Celsius
Location	min	mean	max
Antarctica	-89.2	N/A	19.8
Earth	-89.2	14	56.7

Quoting text

> Text that is a quote

Text that is a quote

Definitions

Term 1

:   Definition 1


`Term 2 with *inline markup*`

:   Definition 2

        { some code, part of Definition 2 }

    Third paragraph of definition 2.

Term 1

Definition 1

Term 2 with *inline markup*

Definition 2

{ some code, part of Definition 2 }

Third paragraph of definition 2.

https://pandoc.org/MANUAL.html#definition-lists

Numbered Example Lists

(@)  My first example will be numbered.
(@)  My second example will be numbered.
(@good)  This is a good example.

As (@good) illustrates, ...

My first example will be numbered.
My second example will be numbered.
This is a good example.

As (3) illustrates, …

Task list items

- [ ] foo
- [x] bar

- [x] foo
  - [ ] bar
  - [x] baz
- [ ] bim

foo
- bar
- baz
bim

Divs and Spans

::::: {#special .sidebar}
Here is a paragraph.

And another.
:::::

Fenced divs can be nested. Opening fences are distinguished because they must have attributes:

::: Warning ::::::
This is a warning.

::: Danger
This is a warning within a warning.
:::
::::::::::::::::::

This is a warning.

This is a warning within a warning.

Admonitions

github style

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

Note

Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

Tip

Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

Important

Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

Warning

Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

Caution

Negative potential consequences of an action.

嵌套示例：

> [!NOTE]
> 这是外层的说明。有时候在一条提示里需要进一步强调一个特殊情形。
>
> > [!WARNING]
> > 嵌套在里面的警告，会独立渲染成自己的色带与图标。

Note

这是外层的说明。有时候在一条提示里需要进一步强调一个特殊情形。

Warning

嵌套在里面的警告，会独立渲染成自己的色带与图标。

自定义小标题（在正文首段用加粗充当标题）：

> [!NOTE]
> **关于浮点精度**
>
> 双精度浮点保证约 15.9 位十进制有效数字，这对大多数科学计算够用，但累加大量小数时需要留意抵消效应。

Note

关于浮点精度

双精度浮点保证约 15.9 位十进制有效数字，这对大多数科学计算够用，但累加大量小数时需要留意抵消效应。

pandoc style (fenced div)

GitHub 的 > [!NOTE] 写法不支持在 admonition 里放复杂结构（列表、代码块、多段），需要时可以用 Pandoc 的 fenced div 语法。

::: note
第一段内容。

- 支持列表
- 多段正文

```haskell
putStrLn "甚至可以嵌入代码块"
```
:::

Note

第一段内容。

支持列表
多段正文

putStrLn "甚至可以嵌入代码块"

::: warning
裸名写法，效果一样。
:::

Warning

裸名写法，效果一样。

Links

这是一个访问 [Google][Google] 的链接， 你也可以在 [GitHub][GitHub] 上找到开源项目。

[Google]: https://www.google.com  "Google 搜索"
[GitHub]: https://github.com  "GitHub 代码托管"

这是一个访问 Google 的链接，你也可以在 GitHub 上找到开源项目。

https://www.logicmatters.net/latex-for-logicians/nd/↩︎
My reference.↩︎
To add line breaks within a footnote, prefix new lines with 2 spaces.This is a second line.↩︎

Math

fitch proof1

equation align

proof tree

Footnotes, Citation

Code block

Mermaid diagrams

Table

Pandoc Grid Tables

Quoting text

Definitions

Numbered Example Lists

Task list items

Divs and Spans

Admonitions

github style

pandoc style (fenced div)

Links

Comments

fitch proof¹