Markdown (CSDN) MD editor (2) - text style (change font, font size, font color, bold, italic, highlight, strikethrough)

Contents
1. Existing text styles of Markdown.
2. HTML fonttags - change font, font color, font size.
3. HTML marklabel - mark text
4. HTML stronglabel - bold text
5. HTML emlabel - italic text
6. HTML dellabel - delete text
7. HTML, biglabel small- increase, decrease font size
8. HTML font, mark, strong, em, del, big, smallmixed use

Markdown is a lightweight markup language with concise typography syntax, allowing people to pay more attention to the content itself rather than typography. It writes documents in an easy-to-read and easy-to-write plain text format, which can be mixed with HTML, and can export HTML, PDF, and its own .md format files. Because of its conciseness, efficiency, readability, and ease of writing, Markdown is widely used, such as Github, Wikipedia, Jianshu, etc.

Markdown syntax is too concise, so there is no syntax for changing text font, font size, and font color. But it supports mixing with HTML, using HTML syntax to change font, font size, font color, etc. Let's explain some in detail.

1. Markdown's existing text styles.

Markdown syntax	display effect
italic text	italic text
_Italic text_	italic text
* bold text *	bold text
__Bold Text__	bold text
==marked text==	markup text
~~delete text~~	~~delete text~~
`pink text`	`粉色文本`

It can be seen from the table that Markdown only supports five text styles : italic, bold, marked, deleted, and pink. The following introduces the HTML font tag, so that the written Markdown format text supports font modification, font size modification, and font color modification.

2. HTML `font`tags - change font, font color, font size.

Before talking about this label, first look at the following Markdown format text and display effect

2.1, Markdown format text

<font face="仿宋">这是宋体</font>
<font face="楷体">这是楷体</font>
<font face="courier New">This is courier New</font>

<font face="仿宋" color=red>这是红色宋体</font>
<font face="楷体" color="blue">这是蓝色楷体</font>
<font face="courier New" color=	#20B2AA>This is LightSeaGreen courier New</font>

这是默认字体
<font face="仿宋" color=red size=4>这是红色4号宋体</font>
<font face="楷体" color="blue" size=5>这是蓝色5号楷体</font>
<font face="courier New" color=	#20B2AA size=6>This is LightSeaGreen courier New size 6</font>

2.2. Display effect

This is Song type
This is italic type
This is courier New

This is Red Song
This is Blue Italic
This is LightSeaGreen courier New

This is the default font
This is Red 4th Song
This is Blue 5th Italic
This is LightSeaGreen courier New size 6

2.3. `font`Label explanation

From 2.1 and Markdown format text , you can see fontthe basic application and format of the label. fontThe label mainly has three attributes: face, color, and size, which are used to set the font, color, and size of the text respectively . These three attributes can be used individually. If you are not sure about the use, you can copy the text content in 2.1 and Markdown format to the markdown editor, and then modify it yourself.

Notice:
The selected font should be supported by the markdown editor. If the font is too rare, it may not be displayed and the default font will be displayed. The font
color can be expressed in English, or it can be indicated by adding rgb value after #, and the color and rgb value can be referred to Color code comparison table
Font size is only 1 to 7, a total of 7 font sizes can be selected

3. HTML `mark`tags - tagged text

Markdown itself also has a syntax for marking text, and here is another way of writing embedded html for readers to use for comparison.

3.1, Markdown format text

这是正常文本
==这是 markdown 的标记文本==
<mark>这是 HTML 的标记文本</mark>

3.2. Display effect

this is normal text
This is markdown markup text
This is the markup text embedded in HTML

4. HTML `strong`tags - bold text

Markdown itself also has the syntax of bold text, and here is another way of writing embedded html for readers to use for comparison.

4.1, Markdown format text

这是正常文本
**这是 markdown 的加粗文本**
<strong>这是 内嵌HTML 的加粗文本</strong>

4.2. Display effect

This is normal text
This is bold text in markdown
This is bold text in embedded HTML

5. HTML `em`tags - italic text

Markdown itself also has the syntax of italic text, and here is another way of writing embedded html for readers to use for comparison.

5.1, Markdown formatted text

这是正常文本
**这是 markdown 的斜体文本**
<strong>这是 内嵌HTML 的斜体文本</strong>

5.2. Display effect

This is normal text
This is italic text in markdown
This is italic text in embedded HTML

6. HTML `del`tags - delete text

Markdown itself also has a syntax for deleting text, and here is another way of writing embedded html for readers to use for comparison.

6.1, Markdown format text

这是正常文本
~~这是 markdown 的删除文本~~
<del>这是 内嵌HTML 的删除文本</del>

6.2. Display effect

This is normal text
~~This is markdown's deleted text~~
~~This is the deleted text of the embedded HTML~~

7. HTML `big`, `small`label - increase, decrease font size

The previous 2. HTML fonttags introduced how to change the font size, and here is another way of writing for readers to use for comparison. Use biga label with a font size one size larger than the default, use smalla label to make the font size one size smaller than the default

7.1, Markdown format text

<small>这是比默认字号小一号的文本</small>
这是默认字号文本
<big>这是比默认字号大一号的文本</big>

7.2. Display effect

This is text one size smaller than default
This is text at default size
This is text one size larger than default

8. Mixed use of HTML `font`, `mark`, `strong`, `em`, `del`, `big`,`small`

The tags introduced above can also be used in combination. The main method of use is fontto add other tags in front of the tags. You can practice and see by yourself in combination with the following text.

8.1, Markdown format text

这是默认字体
<font face="courier New" color=#1E90FF>这是道奇蓝色courier New字体</font>
<mark><font face="courier New" color=#1E90FF>这是高亮的道奇蓝色courier New字体</font></mark>
<mark><strong><font face="courier New" color=#1E90FF>这是高亮加粗的道奇蓝色courier New字体</font><strong></mark>
<mark><strong><big><font face="courier New" color=#1E90FF>这是高亮加粗大一号的道奇蓝色courier New字体<big></font><strong></mark>
<mark><strong><big><em><font face="courier New" color=#1E90FF>这是高亮加粗大一号斜体的道奇蓝色courier New字体<big></font><strong></mark>

8.2. Display effect

This is the default font
This is the Dodge blue courier New font
This is a highlighted Dodge blue courier New font
This is the Dodge blue courier New font highlighted and bold
This is a Dodge blue courier New font that is highlighted and bold
This is the Dodge blue courier New font in bold, bold and italic

insert image description here