Summary of years of experience and write the most amazing advanced usage of Markdown

Like it and then look at it, develop a habit, and follow me by searching on WeChat [ Advanced Front End ].

This article has been included on GitHub https://github.com/yygmind , a complete test site and a series of articles for interviews with major manufacturers, welcome to Star.

When I was studying recently, I saw the diff highlighting effect of the Markdown code. I felt quite interesting. Suddenly I found that there is still such a fun usage, and then I thought about organizing a wave of advanced usages of Markdown. Here are some of the content I compiled. If you haven't used these techniques of Markdown, come and try.

Code diff

If you have done Code Review, you must be familiar with the following effects

// 数组去重
const unique = (arr)=>{
-     return Array.from(new Set(arr))
+  return [...new Set(arr)]
}

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

```diff
// 数组去重
const unique = (arr)=>{
-     return Array.from(new Set(arr))
+  return [...new Set(arr)]
}
```

In Markdown, ``` is used to represent code blocks, followed by language types, such as js, java, diff, etc.

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

<pre>
    <code>
        "//&nbsp;数组去重"
        <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

Many Demo codes will implement a TodoList, we use Markdown to make one to achieve the following Todo effect

To be completed
completed
~~undone~~

The original writing is as follows

-空格[空格]空格待完成

-空格[x]空格已完成

-空格[空格]空格~~未完成~~

Picture setting width and height

image description

Insert Picture mode is relatively simple, this picture above the original wording as long as there is ![]()on the line

![图片描述](https://img-blog.csdnimg.cn/20210111091358838.png)

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

At this time we can use the imglabel, the original wording as follows

<img src='https://img-blog.csdnimg.cn/20210111091358838.png' width=300px height=200px />

// 写法二，自动缩放
<img src='https://img-blog.csdnimg.cn/20210111091358838.png' width=40%/>

Principle is very simple, because ![]()it will become later converted into html imgtags, so we write in Markdown directly in imgthe tag and add width another job.

// 原始 markdown 语法
![图片描述](https://img-blog.csdnimg.cn/20210111091358838.png)

// 转化成 html 后语法
<img src="https://img-blog.csdnimg.cn/20210111091358838.png" alt="图片描述">

fold

I wrote an article on Array prototype method source code to achieve big decryption , which used this ability. Click "Expand View Specification" in the example below to expand more content.

Expand view specifications

This is the expanded content 1

Original wording is simple, uses <details>and <summary>labels

<details>
<summary>展开查看规范</summary>
这是展开后的内容1
</details>

Anchor link

Anchor is a kind of webpage production, also called named anchor. A named anchor is like a quick locator, it is a kind of hyperlink within a page.

Anchor link that when clicked, will jump to the corresponding anchor position, think of links to jump able to think of <a></a>labels

Here we have 2 ways to achieve this effect

Original Markdown [名称](#id)
HTML syntax <a href="#id">名称</a>

Click me to jump to the directory tree

name

The original writing is as follows

[点击我跳转到目录树](#目录树)

<a href="#目录树">名称</a>

Directory tree

This direct use in the article [TOC]can be, it will be converted into the format below

<div class="table-of-contents">
    <ul>
        <li><a href="">代码diff</a></li>
        <li><a href="">待办事项</a></li>
        ...
    </ul>
</div>

However, this also has compatibility issues. Github does not support it. You can use the github-markdown-toc library to automatically generate it. In fact, its principle is to automatically generate anchor tags, and then you can jump within the page.

Wrap

Finally, how to introduce the next newline, Markdown tool such as longest using Typora, after wrapping github sent to find and use no eggs, in fact, this time using CSS <br>tag on it.

The above line is the wrapping effect

Article continually updated, you can search for micro-channel " senior front-end Advanced " the first time to read, respond to interview [the information] [] [] CV-tier manufacturers have my interview data preparation, the paper GitHub https://github.com/yygmind has Included, first-line interview complete test sites and series of articles, welcome to Star.

You can ask me any questions