Loading... 1.标题 ==== **代码** ``` 注：# 后面保持空格 # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 ####### h7 // 错误代码 ######## h8 // 错误代码 ######### h9 // 错误代码 ########## h10 // 错误代码 ``` **演示** # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 ####### h7 ######## h8 ######### h9 ########## h10 2.分级标题 ====== **代码** 注：`=` `- `最少可以只写一个，兼容性一般 ``` 一级标题 ====================== 二级标题 --------------------- ``` **演示** 一级标题 ====================== 二级标题 --------------------- 3.TOC ===== 注：根据标题生成目录，兼容性一般 **代码** ``` [TOC] ``` 4.引用 ==== **代码1(单行式)** ``` > hello world! ``` **演示** > hello world! **代码2(多行式)** > hello world! hello world! hello world! 或者 > hello world! > hello world! > hello world! 演示 相同的结果 hello world! hello world! hello world! 代码3(多层嵌套) > aaaaaaaaa >> bbbbbbbbb >>> cccccccccc 演示 aaaaaaaaa bbbbbbbbb cccccccccc 5.行内标记 注：用 ` 标记代码块将变成一行 代码 标记之外`hello world`标记之外 演示 标记之外hello world标记之外 错误代码 注：不同平台错误略有差异 标记之外 ` < div> < div></div> < div></div> < div></div> < /div> `标记之外 演示 6.代码块 注：与上行距离一空行 代码1(```) 注：用```生成块 ``` <div> <div></div> <div></div> <div></div> </div> ``` 演示 <div> <div></div> <div></div> <div></div> </div> 代码2(Tab) 注： Tab缩进 我是文字…… <div> <div></div> <div></div> <div></div> </div> 演示 <div> <div></div> <div></div> <div></div> </div> 代码3(自定义语法) 注：根据不同的语言配置不同的代码着色 ```javascript var num = 0; for (var i = 0; i < 5; i++) { num+=i; } console.log(num); ``` 演示 var num = 0; for (var i = 0; i < 5; i++) { num+=i; } console.log(num); 7.插入链接 代码1(内链式) 注：{:target="_blank"}跳转方式兼容性一般 ，多数第三方平台不支持跳转 [百度1](http://www.baidu.com/" 百度一下"){:target="_blank"} 演示 百度1 代码2(引用式) [百度2][2]{:target="_blank"} [2]: http://www.baidu.com/ "百度二下" 演示 百度2 8.插入图片 代码1(内链式) [图片上传失败...(image-90880b-1542510791300)] 演示 代码2(引用式) ![name][01] [01]: ./01.png '描述' 演示 9.插入图片带有链接 代码 [[图片上传失败...(image-f83b77-1542510791300)]](http://www.baidu.com){:target="_blank"} // 内链式 [[图片上传失败...(image-4dc956-1542510791300)]][5]{:target="_blank"} // 引用式 [5]: http://www.baidu.com 演示 [ ][5] [5]: http://www.baidu.com 10.视频插入 注：Markdown 语法是不支持直接插入视频的 普遍的做法是 插入HTML的 iframe 框架，通过网站自带的分享功能获取，如果没有可以尝试第二种方法 第二是伪造播放界面，实质是插入视频图片，然后通过点击跳转到相关页面 代码1 注：多数第三方平台不支持插入<iframe>视频 youku <iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNzM0NTYxNg==' frameborder=0 'allowfullscreen'></iframe> 演示 代码2 [[图片上传失败...(image-49aefe-1542510791300)]](http://v.youku.com/v_show/id_XMjgzNzM0NTYxNg==.html?spm=a2htv.20009910.contentHolderUnit2.A&from=y1.3-tv-grid-1007-9910.86804.1-2#paction){:target="_blank"} 演示 11.序表 代码1(有序) 注：序列.后 保持空格 1. one 2. two 3. three 演示 1.one 2.two 3.three 代码2(无序) * one * two * three 演示 •one •two •three 代码3(序表嵌套) 1. one 1. one-1 2. two-2 2. two * two-1 * two-2 演示 1.one 1.one-1 2.two-2 2.two ◦two-1 ◦two-2 代码4(序表嵌套代码块) 注：换行+两个Tab * one var a = 10; // 与上行保持空行并 递进缩进 演示： •one var a = 10; 12.任务列表 注：兼容性一般 要隔开一行 代码 这是文字…… - [x] 选项一 - [ ] 选项二 - [ ] [选项3] 演示 13.表情 注：兼容一般 表情代码地址 14.表格 注： : 代表对齐方式 ,** : 与 | 之间不要有空格**，否则对齐会有些不兼容 代码1 | a | b | c | |:-------:|:------------- | ----------:| | 居中 | 左对齐 | 右对齐 | |=========|===============|============| 演示 a b c 居中 左对齐 右对齐 ========= =============== ============ 代码2(简约写法) a | b | c :-:|:- |-: 居中 | 左对齐 | 右对齐 ============|=================|============= 演示 a b c 居中 左对齐 右对齐 ============ ================= ============= 代码3(特殊表格) 注：一般对合并单元格，以及其他特殊格式表格，markdown 是无能为力的 所以常规的做法是使用HTML标签，但是这样的编写效率极低。 但是有了这款工具的话，所有问题都迎刃而解。 在线生成HTML代码 Tables Generator (国外的站) Tables Generator 演示 15.支持内嵌CSS样式 代码 <p style="color: #AD5D0F;font-size: 30px; font-family: '宋体';">内联样式</p> 演示 16.语义标记 描述 效果 代码 斜体 斜体 *斜体* 斜体 斜体 _斜体_ 加粗 加粗 **加粗** 加粗+斜体 加粗+斜体 ***加粗+斜体*** 加粗+斜体 加粗+斜体 **_加粗+斜体_** 删除线 删除线 ~~删除线~~ 17.语义标签 描述 效果 代码 斜体 <i>斜体</i> <i>斜体</i> 加粗 <b>加粗</b> <b>加粗</b> 强调 <em>强调</em> <em>强调</em> 上标 Za Z<sup>a</sup> 下标 Za Z<sub>a</sub> 键盘文本 <kbd>Ctrl</kbd> 换行 18.格式化文本 保持输入排版格式不变 注：对内含标签需要破坏结构才能显示 代码 <pre> hello world hi hello world </pre> 演示 <pre> hello world hi hello world </pre> 错误解决方法 注：标签内部添加空格 或者 直接使用```标记来处理 代码1(插入空格) <pre> < div> < div>< /div> < div>< /div> < div>< /div> < /div> </pre> 演示 <pre> < div> < div>< /div> < div>< /div> < div>< /div> < /div> </pre> 代码2( ``` 代码块标记) ``` <div> <div></div> <div></div> <div></div> </div> ``` 演示 <div> <div></div> <div></div> <div></div> </div> 19.公式 {#1} 注：1个$左对齐，2个居中 代码 $$ x \href{why-equal.html}{=} y^2 + 1 $$ $ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $ 演示 20.分隔符 注：最少三个 --- 或 ***或 * * * 代码 *** --- * * * 演示 21.脚注 代码 Markdown[^1] [^1]: Markdown是一种纯文本标记语言 // 在文章最后面显示脚注 演示 Markdown[1] 22.锚点 代码 注：只有标题支持锚点， 跳转目录方括号后 保持空格 [公式标题锚点](#1) ### [需要跳转的目录] {#1} // 方括号后保持空格 演示 公式标题锚点 23.定义型列表 注：解释型定义 代码 Markdown : 轻量级文本标记语言，可以转换成html，pdf等格式 // 开头一个`:` + `Tab` 或 四个空格 代码块定义 : 代码块定义…… var a = 10; // 保持空一行与 递进缩进 演示 24.自动邮箱链接 代码 <xxx@outlook.com> 演示 xxx@outlook.com 25.流程图 代码1 ```flow // 流程 st=>start: 开始|past:> http://www.baidu.com // 开始 e=>end: 结束 // 结束 c1=>condition: 条件1:>http://www.baidu.com[_parent] // 判断条件 c2=>condition: 条件2 // 判断条件 c3=>condition: 条件3 // 判断条件 io=>inputoutput: 输出 // 输出 //----------------以上为定义参数------------------------- //----------------以下为连接参数------------------------- // 开始->判断条件1为no->判断条件2为no->判断条件3为no->输出->结束 st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e c1(no)->e // 条件1不满足->结束 c2(no)->e // 条件2不满足->结束 c3(no)->e // 条件3不满足->结束 ``` 演示 代码详解 流程图分为两个部分： 定义参数 然后 连接参数 定义示例： tag=>type: content:>url // 形参格式 st=>start: 开始:>http://www.baidu.com[blank] //实参格式 注：** st=>start: 开始 的：后面保持空格** 形参 实参 含义 tag st 标签 (可以自定义) => => 赋值 type start 类型 (6种类型) content 开始 描述内容 (可以自定义) :>url http://www.baidu.com[blank] 链接与跳转方式 兼容性很差 6种类型 含义 start 启动 end 结束 operation 程序 subroutine 子程序 condition 条件 inputoutput 输出 连接示例： st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e 开始->判断条件1为no->判断条件2为no->判断条件3为no->输出->结束 形参 实参 含义 -> -> 连接 condition c1 条件 (布尔值,方向) (yes,right) 如果满足向右连接，4种方向：right ，left，up ，down 默认为：down 注：operation (程序); subroutine (子程序) ;condition (条件)，都可以在括号里加入连接方向。 operation(right) subroutine(left) condition(yes,right) // 只有条件 才能加布尔值 代码2 注：添加样式和url跳转 需要添加第三方的脚本 实际效果很差，使用起来麻烦，意义不大 ```flow // 流程 st=>start: 启动|past:>http://www.baidu.com[blank] // 开始 e=>end: 结束 // 结束 op1=>operation: 方案一 // 运算1 sub2=>subroutine: 方案二|approved:>http://www.baidu.com[_parent] // 运算2 sub3=>subroutine: 重新制定方案 // 运算2 cond1=>condition: 行不行？|request // 判断条件1 cond2=>condition: 行不行？ // 判断条件2 io=>inputoutput: 结果满意 // 输出 // 开始->方案1->判断条件-> st->op1->cond1 // 判断条件1为no->方案2->判断条件2为no->重新制定方案->方案1 cond1(no,right)->sub2->cond2(no,right)->sub3(right)->op1 cond1(yes)->io->e // 判断条件满足->输出->结束 cond2(yes)->io->e // 判断条件满足->输出->结束 ``` 演示 作者地址：flowchart.js 一般普遍支持的效果 26.时序图 代码1 ```sequence A->>B: 你好 Note left of A: 我在左边 // 注释方向，只有左右，没有上下 Note right of B: 我在右边 B-->A: 很高兴认识你 ``` 演示 代码详解 注：A->>B: 你好 后面可以不写文字，但是一定要在最后加上： Note left of A 代表注释在A的左边 符号 含义 - 实线 > 实心箭头 -- 虚线 >> 空心箭头 代码2 ```sequence 起床->吃饭: 稀饭油条 吃饭->上班: 不要迟到了 上班->午餐: 吃撑了 上班->下班: Note right of 下班: 下班了 下班->回家: Note right of 回家: 到家了 回家-->>起床: Note left of 起床: 新的一天 ``` 演示 27.生成侧边栏扩展 注：生成侧边栏一般是插入JS，再就是模板, 总体来说，很是麻烦，效果一般，不作详解。 作者仓库：i5ting_ztree_toc 精简版：作者博客HaleyPKU 总结：常用标记 标记 Markdown 语法 斜体 *italic* 粗体 **bold** 图片  链接 [Link Text](http://xxx.com) 内联代码 `code` 块级代码 ```code block``` 引用 > Here is a quote block 分隔符 ---- 或 ***** 标题 1 # Heading 1 标题 2 ## Heading 2 标题 3 ### Heading 3 标题 4 #### Heading 4 Markdown编写工具 Typora：https://typora.io 最后修改：2019 年 01 月 11 日 © 允许规范转载 打赏 赞赏作者 赞 0 如果觉得我的文章对你有用，请随意赞赏
5 条评论
测试邮件
测试鸭
测试鸭
秀儿是你吗
测试