markdown syntax

teedoc
markdown
syntax

This article is a document written using Markdown, using the page effect generated by teedoc, see here

Markdown basic file content format

You need to confirm in site_config.json that there is a markdown parsing plugin enabled, such as teedoc-plugin-markdown-parser.

Create a folder or file in the directory corresponding to config.json, such as Seeker/zh/syntax/syntax_markdown.md (README.md will eventually generate index.html), and then write the content:

Markdown header

Add a header

---
title: markdown syntax
tags: teedoc, markdown, syntax
keywords: teedoc, markdown, syntax
desc: teedoc's markdown syntax introduction and examples
id: zh_readme
class: zh_readme
# comment start with # flag
---

Use these keys to set article information:

title: the title of the article
keywords: Keywords, multiple keywords are separated by English commas,, will be added to the header of html, which is convenient for search engines to crawl, and will not be displayed on the page
desc: page description, which will be added to the header of html for easy crawling by search engines
tags: article tags, will be displayed on the page
id: page id, will be added to the html tag, such as <html id="zh_readme">...</html>, it can be left unset, it will overwrite config.json Settings in
class: page class, multiple separated by English comma,, you can not set it, it will overwrite the setting in config.json. For example, you can set the css style of a specific page by setting this value. Supported classes see theme plugins' doc
layout: The layout template used by the page. By default, this key value is not needed. The configuration in the theme plugin will be used. You need to customize the layout of this page. You can set this parameter. The path is relative to the site_config layout_root_dirpath,layout_root_dirdefaults tolayout, so to uselayout/special_layout.htmlonly need to fill inspecial_layout.html`. See layout document for layout template syntax

For the more, to add comment in metadata, just add string start with # charactor

Markdown file content

The content is written using the Markdown grammar, because the title will be converted into the <h1> tag, so the content is recommended to start with the secondary title, so that a page has only one <h1> tag, which is convenient for search engines to crawl ,such as

---
title: teedoc
keywords: teedoc, markdown, jupyter notebook, html, document generation, alternative gitbook, website generation, static website
desc: teedoc, convert markdown or jupyter notbook into html static webpage
id: zh_readme
class: zh_readme
---


## Title One

content. . .

## Title Two

content. . .

The first-level title (#) is best not to be used, because the above title will automatically generate a first-level title (<h1> tag), and a page should have only one first-level title, which is convenient for search engines to crawl Included

keywords is the keywords of the generated html page, which will not be displayed on the page, and is mainly provided to search engines
desc is the description of the generated html page, it will not be displayed on the page, it is mainly provided to search engines
tags are the tags for the article, which will be displayed on the page

Secondary heading

Three-level heading

Four-level heading

Four-level heading 2

Four-level heading 3

Five-level heading

Sixth level heading

Up to 6 headings

Link

Introduction to teedoc

List

List item:

Buns
Mantou
Tea eggs

aaaaaaa
- Secondary list
- Secondary list
- Secondary list
bbbbbb

code

This is an inline code print("hello"), or emphasizes teedoc

print("hello")

print("world")

#include "stdio.h"

int main()
{
    printf("hello world");
}

Comment (quote block)

Below is a comment

Here is a comment (<blockquote></blockquote>)
This is the second line of the comment
# Here is the code snippet in the comment
print("hello")
Notes

Comment nesting
Comment nesting

Use markdown grammar in blockquotes

The quarterly results look great!
Revenue was off the chart.
Profits were higher than ever.

Everything is going according to plan.
printf("hello");

caveat

Below is a warning message

This is a warning message (<blockquote class="spoiler"></blockquote>)

Picture

To display this picture, you need to set the key value of route in site_config.json

Video

<video src="https://****.com/***.mp4" controls="controls" preload="auto">your brower not support play video</video>

There is no video here, so it is blank, just put in the correct video and it can be played

iframe embedded in webpage

Quote mark

I am proud of what I can do. [^Dianfanren]

This will be annotated at the end of the article

Underline

I am~~Tenjin~~ Assault worker

Form

Header 1	Header 2
`Cell 1`	Cell 2 link
Cell 3	Cell 4

task list

Task 1
Mission 2
Mission 3
Mission 4

标题链接(页内跳转)

e.g.
goto Markdown header, just need

[Markdown header](#Markdown-header)

Use minus sign - to replace space

HTML

<div class="hello">
hello  <img src="../../assets/images/logo.png"/>
</div>

注意这里没有空行, 效果如下

hello

math

Supports tex and Latex syntax, and MathML tag

Two ways of writing,

One is inline inline, wrap the equation with $ symbol, for example
```
The mass-energy equation $E=mc^2$ is familiar to everyone, right?
```
Effect:
Mass-energy equation $E=mc^2$ everyone is familiar with
Another type, block equation, wrap the equation with $$, such as
```
$$
E=mc^2
$$
```
Effect:
$$ E=mc^2 $$

Other examples:
common:

When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
$$

When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $$

Division method:

$$
\require{enclose}
\begin{array}{r}
                13 \\[-3pt]
4 \enclose{longdiv}{52} \\[-3pt]
     \underline{4}\phantom{2} \\[-3pt]
                12 \\[-3pt]
     \underline{12}\\0
\end{array}\\
$$

$$ \require{enclose} \begin{array}{r} 13 \\[-3pt] 4 \enclose{longdiv}{52} \\[-3pt] \underline{4}\phantom{2} \\[-3pt] 12 \\[-3pt] \underline{12}\\0 \end{array}\\ $$

Framed:

$$
\bbox[#cde, 3px,border:1px solid blue]{y=x^2-1}
$$

$$ \bbox[#cde, 3px,border:1px solid blue]{y=x^2-1} $$

mermaid support

Use mermaid syntax to draw diagrams, more details and usage please see official website


```mermaid
sequenceDiagram
  Alice->>John: Hello John, how are you?
  loop Healthcheck
      John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!
```

Or use html directly:

<div class="mermaid">
sequenceDiagram
  Alice->>John: Hello John, how are you?
  loop Healthcheck
      John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!
</div>

After rendering, the result will be:

sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

Write content(Syntax)

Jupyter syntax

Roslab