❝

Markdown is a markup language that can be written using a plain text editor to format plain text content with simple markup syntax.

— From Baidu Baike

❞

Additional markdown tips are documented below, markdown Basic Syntax Directions: The Markdown editor’s Guide to common syntax usage

1. The form

Markdown form using | to separate different cell, use – to separate header and other lines.

1.1 Syntax Format:

| | | header header|  ---- | ---- |
| | | cell cell| | | cell cellCopy the code
header header
The cell The cell
The cell The cell

1.2 Alignment

  • -: aligns content and title to the right.
  • – Aligns content and title bar to the left.
  • :-: Aligns the content and title bar in the center.

Examples are as follows:

| left-aligned | | center aligned right || : -- -- -- -- - | - : | : - : || | | | cell cell cell| | | | cell cell cellCopy the code
The left Align right Align center
The cell The cell The cell
The cell The cell The cell

1.3 Cell merging

Markdown does not currently support cell merging, so you can only merge tables in a roundabout way:

“Method one:“

  1. Copy the table from Word or Excel
  2. Open the link: no-cruft Excel to HTML TableConverter
  3. Paste the copied text and press Convert to get the HTML code for the table
  4. Paste the HTML code into the Markdown editor

“Method 2 (embed HTML code) :“

  1. You can start by generating HTML code for unmerged cells using Markdown syntax
  2. Modify to add the RowSPAN or ColSPAN attribute to merge cells
  3. Paste the changed HTML code into the Markdown file

2. The word

2.1 Text indentation

The Markdown language is not responsible for the indentation, so we have to write it by hand, add space escapes, and summarize the front HTML space escapes

`Math.abs(x)`
    Returns the absolute value of a number. Insert the code slice hereCopy the code

The result is two characters successfully indented

Math.abs(x)


Returns the absolute value of a number.

2.2 Text Alignment (center, left, right)

For standard Markdown text, center alignment is not supported. However, Markdown supports HTML, so we can write in HTML syntax. “Center:”

<center>Centered on the trip</center>
// or
<p align="center">Align center</p>
Copy the code

Effect:

Centered on the trip

Align center

“Left:“

<p align="left">The left</p>
Copy the code

The left

“Right alignment:“

<p align="right">Align right</p>
Copy the code

Align right

2.3 Font and color of text

2.3.1 Font replacement

We also need to follow the standard syntax format

<font face="Black">I'm in bold</font>
<font face=Microsoft Yahei>I'm Microsoft Yahei</font>
<font face="STCAIYUN">I am the Chinese color cloud</font>
Copy the code

Effect:

I’m in bold


I’m Microsoft Yahei


I am the Chinese color cloud
2.3.2 Size replacement

The size property is called size, which specifies the size of the text. The value ranges from 1 to 7. The browser default is 3.

<font face="Black" size=2>I'm number two in bold</font>
<font face="Black" size=3>I'm size three in bold</font>
<font face="Black" size=7>I'm size seven in bold</font>
Copy the code
I’m number two in bold


I’m size three in bold


I’m size seven in bold
2.3.3 Color Replacement

In HTML, the color property is called color, so it can be represented as follows

<font color=red size=72>red</font>
Copy the code

Effect:

red

2.4 Underline text

Use HTML tag: 

Love cleaves the darkness like a ray of light,<hr/>
Is not true or false can not judge, as strong.<hr/>
Copy the code

Effect:

Love cleaves the darkness like a ray of light,

  1. useuThe label
<u>Underlined text</u>
Copy the code

Effect: underlined text

3. The color

3.1 the background color

<table>
  <tbody>
  <tr>
    <th>The color of</th>
    <th>Hex color value</th>
 <th>color</th>  </tr>  <tr>  <td><font color="AliceBlue">AliceBlue</font></td>  <td><font color="AliceBlue">F0F8FF</font></td>  <td bgcolor="AliceBlue">rgb(240, 248, 255)</td>  </tr>  <tr>  <td><font color="AntiqueWhite">AntiqueWhite</font></td>  <td><font color="AntiqueWhite">#FAEBD7</font></td>  <td bgcolor="AntiqueWhite">rgb(250, 235, 215)</td>  </tr>  <tr>  <td><font color="Lavender">Lavender</font></td>  <td><font color="Lavender">#E6E6FA</font></td>  <td bgcolor="Lavender">rgb(230, 230, 250)</td>  </tr>  <tr>  <td><font color="LavenderBlush">LavenderBlush</font></td>  <td><font color="LavenderBlush">#FFF0F5</font></td>  <td bgcolor="LavenderBlush">rgb(255, 240, 245)</td>  </tr>  <tr>  <td><font color=" LightPink"> LightPink</font></td>  <td><font color=" LightPink">#FFB6C1</font></td>  <td bgcolor=" LightPink">rgb(255, 182, 193)</td>  </tr>  <tr>  <td><font color="LightSalmon">LightSalmon</font></td>  <td><font color="LightSalmon">#FFA07A</font></td>  <td bgcolor="LightSalmon">rgb(255, 160, 122)</td>  </tr>  <tr>  <td><font color="MintCream">MintCream</font></td>  <td><font color="MintCream">#F5FFFA</font></td>  <td bgcolor="MintCream">rgb(245, 255, 250)</td>  </tr>  <tr>  <td><font color="MistyRose">MistyRose</font></td>  <td><font color="MistyRose">#FFE4E1</font></td>  <td bgcolor="MistyRose">rgb(255, 228, 225)</td>  </tr>  <tr>  <td><font color="Moccasin">Moccasin</font></td>  <td><font color="Moccasin">#FFE4B5</font></td>  <td bgcolor="Moccasin">rgb(255, 228, 181)</td>  </tr>  <tr>  <td><font color="MintCream">MintCream</font></td>  <td><font color="MintCream">#F5FFFA</font></td>  <td bgcolor="MintCream">rgb(245, 255, 250)</td>  </tr>  <tr>  <td><font color="PaleVioletRed">PaleVioletRed</font></td>  <td><font color="PaleVioletRed">#D87093</font></td>  <td bgcolor="PaleVioletRed">rgb(216, 112, 147)</td>  </tr> </table> Copy the code

Effect:

The color of Hex color value color
AliceBlue F0F8FF rgb(240, 248, 255)
AntiqueWhite #FAEBD7 rgb(250, 235, 215)
Lavender #E6E6FA rgb(230, 230, 250)
LavenderBlush #FFF0F5 rgb(255, 240, 245)
LightPink #FFB6C1 rgb(255, 182, 193)
LightSalmon #FFA07A rgb(255, 160, 122)
MintCream #F5FFFA rgb(245, 255, 250)
MistyRose #FFE4E1 rgb(255, 228, 225)
Moccasin #FFE4B5 rgb(255, 228, 181)
MintCream #F5FFFA rgb(245, 255, 250)
PaleVioletRed #D87093 rgb(216, 112, 147)

Picture 4.

4.1 Setting the image size

Markdown by default images are adaptive sized and full of widths, similar tomax-width: 100%. When inserting images, you must have encountered the problem that the image is too big to look at, or we need to show only half of the image. There are two ways to set the image size in Markdown[](url)This format is used to upload pictures<img>Label replacement.

  1. Set the zoom
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307552342&di=f5567b6e4490ee2ac89555ceaefeaf67&i mgtype=0&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201401%2F16%2F231735cfp4046206r4i705.jpg"  style="zoom: 33%;" />
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307552342&di=f5567b6e4490ee2ac89555ceaefeaf67&i mgtype=0&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201401%2F16%2F231735cfp4046206r4i705.jpg"  style="zoom: 25%;" />
Copy the code


  1. Set width in style
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307552342&di=f5567b6e4490ee2ac89555ceaefeaf67&i mgtype=0&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201401%2F16%2F231735cfp4046206r4i705.jpg" width="200px" />
Copy the code

Or CSS styles like this

<img src="https: / /timgsa.baidu.com/timg?image&quality= 80 &size=b9999_10000&sec= 1595307552342 &di=f5567b6e4490ee2ac89555ceaefeaf67&imgtype= 0 &src=http% 3A% 2F% 2Ffile.mumayi.com% 2Fforum% 2F201401% 2F16% 2F231735cfp4046206r4i705.jpg" style="width:200px" />
Copy the code

4.2 Multiple images displayed side by side

In Markdown, there are currently two main ways of centralizing images like this:

  1. ! [](url1)! [](url1)! [](url1)...Multiple picture links add and write, no newline, no space.

This approach doesn’t seem to work every time. However, it can take effect in CSDN as follows:

<center>
! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/21/17371fdd6dac7a73~tplv-t2oaga2asx-image.image )! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/21/17371fdd6dac7a73~tplv-t2oaga2asx-image.image )</center>
Copy the code

  1. Using HTML tags<figure>
<center>
<figure>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307533075&di=6f4081a42a6dd1ef3ada1eef2f86f2fb&i mgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg" width="30%"/>
.<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595307533075&di=6f4081a42a6dd1ef3ada1eef2f86f2fb&i mgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg" width="30%"/>
</figure> </center> Copy the code







  1. When writing a blog in Nuggets, the code block and the text above must be blank for this to work:
  2. When you use<center>When the label is centered on a single image, open the label and the image code should not be blank line, the normal display will be centered (nuggets), otherwise it will be left
  3. If you don’t succeed in using this method, it is likely that the image is too large, so you need to add the image parameters to the image link to set the appropriate size. Like I added in the picture abovewidth="30%"Otherwise, only one image can be displayed in a row.

This article is formatted using MDNICE

If you find this article useful, please give me a thumbs up at 🍀