0
点赞
收藏
分享

微信扫一扫

拿来即用的 Mark Down Demo

苦茶如歌 2022-04-14 阅读 73

Mark Down User Demo

目录树

文章目录

使用VSCode 编写 markdown必备插件

字体、字号、颜色

我是黑体字

我是微软雅黑

我是华文彩云

黑体

gray

null

文字样式

斜体的文本

斜体的文本

粗体文本

粗体文本

加粗斜体

加粗斜体

红色字体

删除线文本

下划线文本

背景高亮

脚注

脚注 | 脚注1 1 脚注22

转义符

markdown 的转义符为 \

特殊字符

列表

  • 无序列表
  • 无序列表
    • 无序列表1
      • 无序列表2
        • 无序列表3

有序列表 .后面 需要加空格

  1. 有序列表1

  2. 有序列表2

定义型列表表
1.(左侧有一个可见的冒号和四个不可见的空格)
2.(左侧有一个可见的冒号和四个不可见的空格)

区块/多级引用

代码块

System.out.println("这是一个Java代码块");
print("这是一个Python代码快")
// 数组去重(diff 显示 ,CodeReview 中经常使用)
const unique = (arr)=>{
-     return Array.from(new Set(arr))
+  return [...new Set(arr)]
}

`` 方式包裹代码
C语言里的函数 scanf() 怎么使用?

缩进 4 个空格或是 1 个制表符

#include <stdio.h>
int main(void)
{
  printf("Hello world\n");
}

链接

跳转百度

图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-duZVGAVZ-1649945605729)(/image/wahaha.jpg)]

表格

表头1表头2
表头1内容表头2内容
表头1内容2表头2内容2
表头3表头4
表头3内容表头4内容
表头3内容2表头4内容2

html标签

换行

第一行
第二行

对齐方式

左对齐

右对齐

居中

align 方式:
left 把图像对齐到左边
right 把图像对齐到右边
middle 把图像与中央对齐
top 把图像与顶部对齐
bottom 把图像与底部对齐
居中

电脑按键

使用 Ctrl+Alt+Del 重启电脑

折叠

展开查看规范 这是展开后的内容1

锚点链接

名称

名称

html方式编码支持

例子:
值班人员星期一星期二星期三
李强张明王平

任务列表

  • 待完成
  • 已完成
  • 未完成

公式

Markdown公式总结

katex最新教程

行级公式
f ( x ) = ∫ 2 + ∞ d x x ⋅ x 2 − 3 x + 2 3 f(x)=\int_{2}^{+\infty} \frac{dx}{x\cdot \sqrt[3]{x^2-3x+2}} f(x)=2+x3x23x+2 dx

块级公式

f(x)=\int_{2}^{+\infty} \frac{dx}{x\cdot \sqrt[3]{x^2-3x+2}}

代码注释

缩进

【1】  或  //全角
【2】  或  //半角
【3】  或  //半角之半角

参考式

我经常去的几个网站baidu、Leanote。

自动链接

<http://www.baidu.com/>

<address@baidu.com>

流程图

mermaid 简单使用

mermaid样式大全

分隔线






点击我跳转到目录树

mark down demo 下载链接

<https://download.csdn.net/download/weixin_41645817/85137140>

markDown源代码

# <center>Mark Down User Demo</center>

### 目录树[TOC]

### 使用VSCode 编写 markdown必备插件

> VSCode 编写markdown 基础插件 MarkDown All in One
> VSCode 编写markdown 友好显示,格式转换 MarkDown Preview Enhanced(MPE)
> VSCode 编写markdown流程图 需插件支持 Markdown Preview Mermaid Support

### 字体、字号、颜色

<font face="黑体">我是黑体字</font>

<font face="微软雅黑">我是微软雅黑</font>

<font face="STCAIYUN">我是华文彩云</font>

<font color=#0099ff size=12 face="黑体">黑体</font>

<font color=gray size=5>gray</font>

<font color=#00ffff size=3>null</font>


### 文字样式

_斜体的文本_

*斜体的文本*

__粗体文本__

**粗体文本**

___加粗斜体___

***加粗斜体***

<font color=red> 红色字体 </font>

~~删除线文本~~

<u>下划线文本 </u>

==背景高亮==

脚注

脚注 | 脚注1 [^1] 脚注2[^2]

[^1]:这是一个脚注,解释上面的内容1
[^2]:这是一个脚注,解释上面的内容2

### 转义符  
markdown 的转义符为 \

### 特殊字符
>	空格符	&nbsp;
<	小于号	&lt;
\>	大于号	&gt;
&	和号	&amp;
¥	人民币	&yen;
©	版权	&copy;
®	注册商标	&reg;
°C	摄氏度	&deg;C
±	正负号	&plusmn;
×	乘号	&times;
÷	除号	&divide;
²	平方(上标²)	&sup2;
³	立方(上标³)	&sup3;

### 列表

+ 无序列表

- 无序列表
  * 无序列表1
    * 无序列表2
      * 无序列表3

有序列表 .后面 需要加空格
1. 有序列表1

2. 有序列表2

定义型列表表
:   1.(左侧有一个可见的冒号和四个不可见的空格)
:   2.(左侧有一个可见的冒号和四个不可见的空格)

### 区块/多级引用

>区块一
>> 区块二
>>> 区块三

> 请问 Markdwon 怎么用? - 小白
>> 自己看教程! - 愤青
>>> 教程在哪? - 小白
>>>> 教程在哪? - 小白


### 链接
[跳转百度](https://www.baidu.com)

### 图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hZdmuURC-1649945605731)(/image/wahaha.jpg)]
>图片限制宽高
<img src='https://img-blog.csdnimg.cn/20210111091358838.png' width=300px height=200px />

>图片缩放
<img src='https://img-blog.csdnimg.cn/20210111091358838.png' width=40%/>

### 表格
> \:- 左对齐, :-: 中心对齐,-: 右对齐

| 表头1      | 表头2      |
| :--------- | :--------- |
| 表头1内容  | 表头2内容  |
| 表头1内容2 | 表头2内容2 |

| 表头3      | 表头4      |
| ---------- | ---------- |
| 表头3内容  | 表头4内容  |
| 表头3内容2 | 表头4内容2 |

### html标签

#### 换行
第一行<br>第二行
#### 对齐方式
<p align="left">左对齐</p>
<p align="right">右对齐</p>
<p align="center">居中</p>
  align 方式:<br> left	把图像对齐到左边<br>right	把图像对齐到右边<br>middle	把图像与中央对齐<br>top	把图像与顶部对齐<br>bottom	把图像与底部对齐<br>
<center>居中</center>

#### 电脑按键
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

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

#### 锚点链接

[名称](#id)

<a href="#id">名称</a>

#### html方式编码支持
<div class="footer">
© 2004 Foo Corporation
</div>
例子:
<center>

<table>
<tr>
<th rowspan="2">值班人员</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<td>李强</td>
<td>张明</td>
<td>王平</td>
</tr>
</table>
</center>

### 任务列表

- [ ] 待完成
- [x] 已完成
- [ ] ~~未完成~~

### 公式
#### <a href= "https://blog.csdn.net/weixin_42782150/article/details/104878759?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164994222716782246433555%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164994222716782246433555&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-2-104878759.142^v8^pc_search_result_cache,157^v4^control&utm_term=markdown+%E6%80%BB%E7%BB%93&spm=1018.2226.3001.4187">Markdown公式总结</a>
#### <a href="https://blog.csdn.net/qq_43808700/article/details/107345011?utm_source=app">katex最新教程</a>


行级公式
$$ f(x)=\int_{2}^{+\infty} \frac{dx}{x\cdot \sqrt[3]{x^2-3x+2}} $$

块级公式
```math
f(x)=\int_{2}^{+\infty} \frac{dx}{x\cdot \sqrt[3]{x^2-3x+2}}
```

```

### 代码注释
> 快捷键 ctrl + /
(注释在显示时是看不见的哦)
<!-- 这是一段注释的文字 -->
> hark 注释: hack方法就是利用markdown的解析原理来实现注释的。
> 
[//]: # (哈哈我是最强注释,不会在浏览器中显示。)
[^_^]: # (哈哈我是最萌注释,不会在浏览器中显示。)

### 缩进
【1】 &emsp;或&#8195; //全角
【2】 &ensp;或&#8194; //半角
【3】 &nbsp;或&#160;  //半角之半角

### 参考式

我经常去的几个网站[baidu][1]、[Leanote][2]。

[1]:http://www.baidu.com 
[2]:http://www.leanote.com

### 自动链接

&lt;http://www.baidu.com/&gt; 

&lt;[address@baidu.com](http://www.baidu.com/)&gt;

### 代码块
```java
System.out.println("这是一个Java代码块");
```

```Python
print("这是一个Python代码快")
```

```diff
// 数组去重(diff 显示 ,CodeReview 中经常使用)
const unique = (arr)=>{
-     return Array.from(new Set(arr))
+  return [...new Set(arr)]
}
```
`` 方式包裹代码
C语言里的函数 `scanf()` 怎么使用?

缩进 4 个空格或是 1 个制表符

    #include &lt;stdio.h&gt;
    int main(void)
    {
      printf(&#34;Hello world\n&#34;);
    }


### 流程图 


```mermaid
sequenceDiagram
    participant 企业
    participant 下游
    企业->>移动: 调度
    loop 心跳检测
        移动->>移动: SDK
    end
    Note right of 移动: 详见文档 <br/>资料
    移动-->>企业: 接单
    移动->>下游: 推送
    下游-->>移动: 流程结束
```

```mermaid

flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```
#### mermaid 简单使用
#### mermaid样式大全
### 分隔线

* * *

***

*****

- - -

-----------
[点击我跳转到目录树](#目录树)
```
 #### <a href= "https://www.csdn.net/tags/NtTaYg2sNzgxOTUtYmxvZwO0O0OO0O0O.html">mermaid 简单使用</a>
 #### <a href="https://blog.csdn.net/qq_42818403/article/details/122599306?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_antiscanv2&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_antiscanv2&utm_relevant_index=1">mermaid样式大全</a>
 ### 分隔线

 * * *

 ***

 *****

 - - -

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

  1. 这是一个脚注,解释上面的内容1 ↩︎

  2. 这是一个脚注,解释上面的内容2 ↩︎

举报

相关推荐

0 条评论