markdown syntax

1. md Teaching#

This is a teaching document in md format, mainly used for practicing md file and writing articles in a hurry. If there are any deficiencies and errors, please point them out. Thank you for your understanding and support.

1.1 md Table of Contents#

TOC will automatically generate a table of contents for the current document. The table of contents is generated based on the titles of the current document. The table of contents will appear wherever the TOC is written.

Some websites do not support TOC function.

1.2 md Text Formatting#

In markdown documents, you can add bold, italics, strikethrough, underline to text. Of course, these effects can also be combined. For example, it is more suitable to use italics for English, for example: This is a test markdown text. When we find that the content we have written is misleading or obviously wrong, we can use strikethrough to delete the text, for example: ~~The sun rises from the east~~. In addition to using bold text to emphasize, you can also use a horizontal line to draw a line through the sentence, for example: Using this method can achieve the purpose of drawing a horizontal line.

1.3 md Horizontal Line#

In md files, a horizontal line is created using three asterisks or three dashes. You can see the specific effect between my titles.

1.4 Lists#

Ordered List
An ordered list is created using numbers and dots. This is easy to understand because our daily task list is similar in format. For example, there are several steps to put an elephant into a refrigerator:

Open the refrigerator door.
Put the elephant into the refrigerator.
Close the refrigerator door.

Unordered List
An unordered list is very simple, just use a plus or minus sign or an asterisk. It's the same example as before.
- Open the refrigerator door.
- Put the elephant into the refrigerator.
- Close the refrigerator door.
To-do List
A to-do list is mainly used to indicate whether something is done or not. For example, the following content:
- [] Create a blog website.
- [] Review calculus and mathematical logic.
- Be lazy.
Nested List
I don't think this part needs much explanation. It's really simple. Just use a tab at the beginning of the next line.

1.5 Quotation#

Level 1 Quotation
The quotation uses a greater than sign. For example, my sentence below:

With a cold face, I face the criticism of thousands of people, and I am willing to be a child cow.

Multi-level Quotation
The number of levels of quotation corresponds to the number of > signs. You can try it yourself.

1.6 Code Block#

There are two ways to use code, inline code and multi-line code. Here are some specific examples:

Inline Code
The first lesson in C language is Hello,World.
Multi-line Code

	int a,b,c;
	scanf("%d",&a,&b);
	c=a+b;
	printf("%d",c);

Note: If you want to indent and format the multi-line code, there must be a blank line before it, and each line must have a tab.

1.7 Table#

The writing method of the table is also relatively easy. Use vertical lines to separate different cells and use horizontal lines to separate the header and other rows. Let me write an example based on the classification of genetic diseases.

Common Genetic Diseases	Examples
Monogenic Genetic Diseases	Albinism, Congenital Deafness
Polygenic Genetic Diseases	Diabetes, Hypertension
Chromosomal Diseases	Down Syndrome
Somatic Cell Genetic Diseases	Malignant Tumor
Mitochondrial Genetic Diseases	Leber Hereditary Optic Neuropathy

1.8 Hyperlink#

Representation Method
The representation method of a hyperlink is as follows:
Hyperlink Text, so what you see in the end is actually only the text, but the text is actually linked to a URL. For example: [My Blog](https://kkkk33t.github.io/)
Direct Display of Links
Use <> to enclose the link address. For example <https://www.baidu.com/>
Using Anchors
Use anchors. First, define the anchor, and then refer to the anchor. I will provide a more detailed introduction to the use of anchors in the next update.

1.9 Images#

There are four ways to insert images:

Insert local images
Insert web images
Store images in Markdown files
Use HTML <img> tag

The basic format for inserting images is ![Description](Path). You can choose the method that suits you.

1.9.1 Insert Local Images#

![Description of the image](Local image path) For example: ![niubi](23-06-01/wallhaven-m3ppwy.jpg)
Note: The path here can be relative or local.

1.9.2 Insert Web Images#

![](URL of the image)
This method is widely recognized as the best way, but the key is the choice of image hosting. I will provide a more detailed introduction to image hosting in the next update.

1.9.3 Store Images in Markdown Files#

Storing images in Markdown files in base64 encoding format will increase the file size, but the advantage of this method is that the image can be embedded directly in the document without the need to reference the image file separately. Here are the specific steps:
Convert the image to be stored in the Markdown file to base64 encoding format. This can be done using online tools, for example:
https://www.base64-image.de/
Add the following syntax to the Markdown file:
![Description](data:image/png;base64,base64 encoding content) where Description is the description of the image and base64 encoding content is the base64 encoding string obtained in the first step.
If there are multiple images to be stored in the Markdown file, you can declare the base64 string of each image separately, for example:
[Image 1]: data:image/png;base64,base64 encoding content 1 [Image 2]: data:image/png;base64,base64 encoding content 2
Insert images in the body content:
![Description 1][Image 1] ![Description 2][Image 2]
This method is not very convenient and has a very low frequency of use, so it is not recommended.

1.9.4 Use HTML `<img>` Tag#

I personally think this is a very good way because it is convenient to control the size of the image. I am still studying how to adjust the size of the above methods, so please see my future updates for specific information.
Example:

<img src="https://cdn.jsdelivr.net/gh/kkkk33t/cdntc/*img/*wallhaven-m3ppwy.jpg" width=100/>

1.9.5 Supplement: Changing the Image Size Using the `<img>` Tag, Supporting Width, Height, Alignment, and Other Properties.#

<img src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png"  width="600" />

Note: The numerical values after the attributes can also be written as percentages, such as width="60%".
For images with specified dimensions, both width="600" and height="600" need to be specified.
For images with a determined width and a proportional height, only width="600" needs to be specified.
For images with a determined height and a proportional width, only height="600" needs to be specified.

1.9.5.1 Adjusting Alignment Method 1#

You can modify the alignment of the image by adding the align="center" attribute inside the <img> tag.

<img src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png"  align = "right"  width="600" />

Note: This method can also achieve the effect of placing text on the left and the image on the right, or placing text on the right and the image on the left.
Center alignment: align="middle". However, it does not work properly in CSDN.
Left alignment: align="left".
Right alignment: align="right".

1.9.5.2 Adjusting Alignment Method 2 (Recommended)#

You can also modify the alignment of the image by wrapping the <img> tag in  . . .  tags.

<p align = "center">    
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
</p>

This method can also achieve the effect of arranging multiple images side by side. Just add multiple <img> tags inside the  . . .  tags. The number of images per row will be automatically adjusted based on the size of the images and the size of the browser window.

<p align = "center">    
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
</p>

Note: This method is effective for both single and multiple images. When inserting images using HTML, align= can be omitted, but it cannot be omitted when aligning the image to the right.

1.9.5.3 Achieving the Effect of Text on the Left and Image on the Right, or Text on the Right and Image on the Left.#

You can achieve this effect by wrapping the <img> tag in  . . .  tags and adding the align="left" attribute inside the <img> tag.

(1) Text on the Left and Image on the Right
Note: The text that needs to be mixed with the left and right needs to be placed inside the  . . .  tags and below the <img> tag. The normal top-to-bottom layout style is used for text outside the  . . .  tags.
Left text, right image: align="left"
Left image, right text: align="right"

<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png"  width="400"  align="left" />
The text is on the right and the image is on the left. The text is on the right and the image is on the left. The text is on the right and the image is on the left. The text is on the right and the image is on the left. The text is on the right and the image is on the left. The text is on the right and the image is on the left. The text is on the right and the image is on the left. The text is on the right and the image is on the left. The text is on the right and the image is on the left. The text is on the right and the image is on the left. The text is on the right and the image is on the left. The text is on the right and the image is on the left. The text is on the right and the image is on the left. The text is on the right and the image is on the left. The text is on the right and the image is on the left. The text is on the right and the image is on the left. The text is on the right and the image is on the left.
</p>

(2) Text on the Right and Image on the Left

<p>    
<img  src="https://t.mwm.moe/fj"  width="400"  align="right"  />
The text is on the left and the image is on the right. The text is on the left and the image is on the right. The text is on the left and the image is on the right. The text is on the left and the image is on the right. The text is on the left and the image is on the right.
</p>

1.9.5.4 Adding Captions to Images#

Figure 1. Lena

2.0 Superscript and Subscript#

Superscript is denoted by ^{and subscript is denoted by _{. For example:}}

Subscript: X<sub>2</sub>
Superscript: Y<sup>2</sup>
Subscript Text: X<sub>Subscript Text</sub>
Superscript Text: Y<sup>Superscript Text</sup>

The effect is as follows:
Subscript: X₂

Superscript: Y²

Subscript Text: X_{Subscript Text}

Superscript Text: Y^{Superscript Text}

2.1 Abbreviations#

Abbreviations are denoted by the HTML tag, as shown below:

<abbr title="Hyper Text Markup Language">HTML</abbr> is a markup language.
The effect is as follows:

HTML is a markup language.

2.2 Footnotes#

Using footnotes is a two-step process: defining footnotes and using footnotes.
The syntax for defining footnotes is as follows:

[^Footnote Name]: Footnote Content
The square brackets contain a caret ^, followed immediately by the footnote name. After the square brackets is a colon :, followed by the footnote content. Footnote definitions are usually displayed at the end of the document, and multiple footnote definitions cannot be written on the same line. To use a footnote, simply add [^Footnote Name] after the text that needs annotation, as follows:

Footnote Example[^note]
Footnote Example 2[^note2]
[^note]: This is an example of a footnote.
[^note2]: This is an example of a footnote 2.

The effect is:
Footnote Example¹

Footnote Example 2²

2.3 Markmap Mind Map#

Markmap is a mind map tool that supports Markdown syntax. With Markmap, you can use Markdown syntax to generate mind maps. Markmap is open source, free, and easy to use. You can convert your written Markdown document into a mind map here.
In Markmap, the following Markdown symbols are supported:

Heading symbols #
Unordered list symbols -
Separator symbols ---
Hyperlink symbols and <>
Text formatting, such as bold, italics, strikethrough
Code blocks, including inline code blocks and multi-line code blocks
Markmap supports:
Heading symbols
- Level 1 heading
- Level 2 heading
- Level 3 heading
Unordered list
- List 1
- List 2
Separator
- Part 1 ---
- Part 2

- Part 3
- Part 4

Hyperlink

- <https://www.google.com>
- [Google](https://www.google.com)

Text formatting
- Italics
- Bold
- ~~Strikethrough~~

Code block
- Inline code block -

Multi-line code block 1
Multi-line code block 2
Multi-line code block 3

The effect is as follows:

This is an example of a footnote. ↩
This is an example of a footnote 2. ↩