Summarize years of experience and write the most amazing markdown advanced usage

Time:2021-7-27

Click like and watch again, form a habit, wechat search【Advanced front end】Follow me.

this paperGitHub https://github.com/yygmindIt has been included. There are complete test sites and a series of articles for the interview of front-line large factories. Welcome star.

Recently, I saw the effect of highlighting the diff of markdown code during learning, which is very interesting. I suddenly found that there was such a fun usage. Then I thought about sorting out a wave of advanced usage of markdown. Here are some contents I sorted out. If I haven’t used markdown skills, come and try it.

Code diff

If you have done code review, you must be familiar with the following effects

//Array de duplication
const unique = (arr)=>{
-     return Array.from(new Set(arr))
+  return [...new Set(arr)]
}

The comparison effect of addition and deletion of this code is done through diff. The original code is as follows

​```diff
//Array de duplication
const unique = (arr)=>{
-     return Array.from(new Set(arr))
+  return [...new Set(arr)]
}
​```

In markdown,`Used to represent code blocks, followed by language types, such as JS, Java and diff

The above diff code will eventually be converted into the following paragraph in HTML (but the conversion effect will be different in different converters). Finally, the above effect will be achieved by modifying the style.

<pre>
    <code>
        "//&nbsp; Array de duplication“
        <br>
        "const unique = (arr)=>{"
        <br>
        <span class="deletion">"-  return Array.from(new Set(arr))"</span>
        <br>
        <span class="addition">"+  return [...new Set(arr)]"</span>
        <br>
        "}"
        <br>
    </code>
</pre>

##To do list

Many demo codes will implement a todolist. We use markdown to do one to achieve the following todo effect

  • [] to be completed
  • [x] Completed
  • [ ] hang in the air

The original writing is as follows

-Space [space] space to be completed

-Space [x] completed

-Space [space] space ~ ~ incomplete~~

Set width and height of picture

Summarize years of experience and write the most amazing markdown advanced usage

The method of inserting pictures is relatively simple. The original writing method of the above picture is as follows, as long as there is![]()That’s all

![ Picture description]( https://resource.muyiy.cn/image/20201209093632.png )

But at this time, the width and height of the picture are not limited. How to generate a picture with a given width and height, let’s see the effect first.

Summarize years of experience and write the most amazing markdown advanced usage

At this time we can useimgLabel, originally written as follows

![](https://resource.muyiy.cn/image/20201209093632.png)

//Writing 2, auto zoom
![](https://resource.muyiy.cn/image/20201209093632.png)

The principle is also simple because![]()When converted to HTML, it becomesimgTag, so we write it directly in markdownimgLabel and add width and height.

//Original markdown syntax
![ Picture description]( https://resource.muyiy.cn/image/20201209093632.png )

//Syntax after conversion to HTML
![](https://resource.muyiy.cn/image/20201209093632.png)

fold

I wrote an article beforeArray prototype method source code to achieve large decryptionThis ability is used in the article. Click “expand view specification” in the following example to expand more content.

<details>
< summary > expand to view the specification < / summary >
This is the expanded content 1
</details>

The original writing method is relatively simple, using <details> and<summary>label

<details>
< summary > expand to view the specification < / summary >
This is the expanded content 1
</details>

Anchor link

Anchor is a kind of web page making, also known as named anchor. A named anchor is like a quick locator. It is a hyperlink within a page.

The anchor link will jump to the corresponding anchor position after clicking. You can think of the link jump<a></a>label

Here we have two ways to achieve this effect

  • Markdown original writing[name] (#id)
  • HTML syntax< a href = "#id" > name</a>

Click me to jump to the directory tree

name

The original writing is the following

[click me to jump to the directory tree] (# directory tree)

< a href = "# tree" > name</a>

Directory tree

This is used directly in the article [TOC]Yes, it will be converted to the following format

<div class="table-of-contents">
    <ul>
        <li>< a href = "" > code diff</a></li>
        <li>< a href = "" > to do</a></li>
        ...
    </ul>
</div>

However, this also has compatibility problems. GitHub does not support it. You can use the GitHub markdown TOC library to automatically generate anchor tags. In fact, its principle is to automatically generate anchor tags, and then jump in the page.

Line feed

Finally, let’s introduce how to wrap a line. For example, the longest used markdown tool is typora. After wrapping, it is sent to GitHub and found that there is no egg. In fact, CSS is used at this time<br>Just label it.

The above line is the newline effect