Article directory
1 code diff
If you have done code review, you must be familiar with the following effect
// 数组去重
const unique = (arr)=>{
- return Array.from(new Set(arr))
+ return [...new Set(arr)]
}
The addition and deletion comparison effect of this code 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 indicate a code block, followed by language types, such as js, java, and 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 can be achieved by modifying the style.
<pre>
<code>
"// 数组去重"
<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>
2 to-do list
Many demo codes will implement a TodoList, we use Markdown to make one to achieve the following Todo effect
- to be completed
- completed
-
undone
Original writing:
- [ ] 待完成
- [x] 已完成
- [ ] ~~未完成~~
3 picture setting width and height
The original writing method is as follows, only![]()
However, the width and height of the picture are not limited, and a picture with a given width and height is generated:
Tags can be used img, original writing
<img src='https://img-blog.csdnimg.cn/989e88d754f5401b91d95b8b9d853de7.png' width=500px height=200px />
// 写法二，自动缩放
<img src='https://img-blog.csdnimg.cn/989e88d754f5401b91d95b8b9d853de7.png' width=40% />
Because ![]()after being converted into html, it becomes imga tag, so directly write the tag in Markdown imgand add the width and height.
bash
复制代码// 原始 markdown 语法
// 转化成 html 后语法
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13973f2a07bb45feb159aa2584997913~tplv-k3u1fbpfcp-zoom-1.image" alt="图片描述">
4 fold
Expand and view the specification, please pay attention to [public account [JavaEdge]] (https://mp.weixin.qq.com/s/PVGz50qE1S4xsEsmypVp-g)used <details>and <summary>tags
<details>
<summary>展开查看规范</summary>
这是展开后的内容1
</details>
5 Anchor Links
A type of hyperlink within a page.
The anchor link is to jump to the corresponding anchor position after clicking. When you think of link jump, you can think of <a></a>the label
Method to realize
① Markdown original writing[名称](#id)
Click me to jump to the directory tree
[点击我跳转到目录树](#目录树)
② HTML syntax<a href="#id">名称</a>
<a href="#目录树">名称</a>
6 directory tree
directly in the article [TOC]
will be automatically converted to:
<div class="table-of-contents">
<ul>
<li><a href="">代码diff</a></li>
...
</ul>
</div>
There is a compatibility problem, and Github does not support it. It can be automatically generated using the github-markdown-toc library. Its principle is to automatically generate anchor tags, and then you can jump within the page.
7 newline
After Typora changed the line and sent it to github, it was found to be useless. In fact, CSS <br>tags were used at this time.
<br>
The above line is the newline effect.