How to use Markdown -Visual Studio Code

Zero. markdown software

a. This article uses VsCode as the markdown software. Click Vscode to enter the website to install the latest version of visualStudioCode.
b. After the installation is complete, open VsCode and install the following plug-ins on the extension bar:

  1. Markdown All in One
  2. Markdown Preview Enhanced
  3. Markdown Image
    The steps are as follows:5dc179c4de1049ac833a3c4afd1750c1.png396650031d624b11bc1405ebc06a213a.png
    c. Since the Markdown Preview Enhanced plug-in needs to install the Chrome browser in advance when outputting other file formats, the Chrome browser should be installed at the same time. After the installation is completed, the markdown usage environment has been set up, and then you can use VsCode to edit markdown.
    d. Open VsCode, create a new workspace in the left column, and create a new file with the suffix .md. Double-click the file to edit, and you can open the preview area to view the effect in real time.
    13F61df0cbf748AB2DE35A891.png g src = “// i2.wp.com/img-hlog. csdnimg.cn/188eb9867c884144bd75e365ced86109.png” alt=”188eb9867c884144bd75e365ced86109.png”>

1. Word processing

  1. # represents the title, and its number represents the title levelcf575f9a0bd341c381989c78cd2a9dbe.png
  2. *Text* represents italics, effect: Text
  3. **Text** represents bold, effect: Text
  4. ***Text*** represents bold italic, the effect is: Text
  5. ~~Text~~ represents strikethrough, effect: Text
  6. Text^superscript text^ represents superscript, the effect is: text superscript text
  7. Text~subscript text~represents subscript, effect: text subscript text
  8. Text means underline, the effect is: Text
  9. & amp;emsp; & amp;emsp; means adding a tab position, the effect is as follows: d5c4d309f4134433a7c46e46cef838f2 .png
  10. If you need to add a blank line, you can directly add the Enter key to blank a line. However, if you need to add multiple blank lines, you need to add & amp;emsp; & amp;emsp; at each blank line. The effect is as follows: 7089d07569954414914a3a4c450045e8.png
  11. If you need to add characters with special meaning in markdown, just add \ before the symbol, for example, \*, you can add the symbol: *

2. List

  1. ordered list
 1. List 1
    2. List 2
    3. List 3
    4. List 4
    5. List 5
  1. unordered list
 - Listing 1
      - List 2
    - List 3
            - List 4
        - List 5

92ce87a737354a04b0240d577f5fe684.png

3. Add pictures or gifs

Install the Markdown Image plug-in in the vscode extension. When you need to add an image, just copy the image and paste it in the corresponding line. The following code will be automatically completed, indicating that the addition is successful.
![Picture name (can be changed by yourself)](Picture path file name)

2e91e356e88249239e987326afb6caa5.png

4. Insert link

  1. Display website link directly:

    Effect:
    Visual Studio Code – Code Editing. Redefined
  2. Use text instead of links:
    [Vscode](https://code.visualstudio.com)
    Effect:
    vscode

5. Code blocks may be marked with gray boxes

  1. Type the TAB key or enter 4 spaces at the beginning of the paragraph to add a code block;
  2. Add ``` before a paragraph and ``` after a paragraph to identify the middle paragraph as a code block;
  3. When you need code highlighting, add the language name after ```, such as ```python, to highlight the code block;
    Example: be437e6693d747b7bd37d57a6d886e69.png
  4. If it is in the text, you can type: ` print `, the effect is as follows:
    Here is the text. Insert print here to know how it is used.

6. Insert dividing lines

Enter *** and press Enter to add a separator line. The effect is as follows:

18a132724f6a468d9d5c0521a11255f0.png

7. Insert table

Example:

| Date (left-aligned) | Task (right-aligned) | Completion (center-aligned) |
| :-----| ----: | :----: |
| 2023-11-04 | Learn VScode | 50% |
| 2023-11-05 | Learning VScode | 100% |

Among them, | :-----| ----: | :----: | This line is used to describe the table format, which are left-aligned, right-aligned, and center-aligned. The effect is as follows :

Date (aligned left) Task (aligned right) Completion (aligned center)
2023-11-04 Learn VScode 50%
2023-11-05 Learn VScode 100%

8. Insert mathematical formulas

Only some examples are given. For more details, please refer to
Tutorial: Using Markdown to take “digital” study notes in VS Code – Zhihu

Tutorial on formula editing in markdown – Jianshu

  1. Fraction:
    $ y = \frac{x}{y} $
    Effect: 017623639c2445c3ac1dffb1ae4b8c2c.png
  2. Superscript and subscript:
    $x^5 + y^{5} = 1$ $x_1 + y_{a} = 1$
    Effect:
    c876644a69fc4f05be6573d1c02e7660.png
  3. Matrix/determinant:
$\begin{pmatrix}
1 & amp; 1 & amp; \cdots & amp; 1 \
1 & amp; 1 & amp; \cdots & amp; 1 \
\vdots & amp; \vdots & amp; \ddots & amp; \vdots \
1 & amp; 1 & amp; \cdots & amp; 1 \
\end{pmatrix}$

d329edd286404c3bab4c6681d361ed08.png

$\begin{bmatrix}
1 & amp; 1 & amp; \cdots & amp; 1 \
1 & amp; 1 & amp; \cdots & amp; 1 \
\vdots & amp; \vdots & amp; \ddots & amp; \vdots \
1 & amp; 1 & amp; \cdots & amp; 1 \
\end{bmatrix} $

66a9c7df3df740418c6507b03bd0ed92.png

$
\begin{vmatrix}
1 & amp; 1 & amp; \cdots & amp; 1 \
1 & amp; 1 & amp; \cdots & amp; 1 \
\vdots & amp; \vdots & amp; \ddots & amp; \vdots \
1 & amp; 1 & amp; \cdots & amp; 1 \
\end{vmatrix}
$

833a5ed0c43e462f9937c9d66c2eddee.png

9. Output pdf/html files

After editing the .md file, it can be output to file types such as pdf/html. Right-click in the preview area and select Chrome (Puppeteer) or select the file type corresponding to the html output.

cdea69bd520f47e2a874fb4d87daa25a.png

By Onedaystoyou 2023-11-05
Please forgive me if there are any deviations.