markdown的基本使用
![](/post/markdown%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/featured_hub9ee31969f44a6711206a2baf9f065b4_241861_720x0_resize_q75_lanczos.jpg)
创始人 John Gruber 的 Markdown 语法说明
标题
标题是每篇文章必备而且最常用的格式。 在Markdown中,如果想将一段文字定义为标题,只需要在这段文字前面加上#,再在 # 后加一个空格即可。还可增加二、三、四、五、六级标题,总共六级,只需要增加 # ,增加一个 # ,标题字号相应降低一级。如图:
# H1
## H2
### H3
#### H4
##### H5
效果如下:
H1
H2
H3
H4
H5
列表
列表格式也很常用,它可以让你的文稿变得井井有条。无序列表,在Markdown中,你只需要在文字前面加上 - 就可以了;如果你希望是有序列表,在文字前面加上 1. 2. 3. 即可。
- 第一行
- 第二行
- 第三行
1. 第一行
2. 第二行
3. 第三行
- 第一行
- 第二行
- 第三行
- 第一行
- 第二行
- 第三行
注:-、1.和文字之间要保留一个字符的空格。
引用
如果你需要在文稿中引用一段别处的句子,那么就要用到「引用」格式。 在引用文字前加上 > 并与文字保留一个字符的空格,即可。
引用:
>Across the Great Wall we can reach every corner in the world.
Across the Great Wall we can reach every corner in the world.
粗体和斜体
Markdown 的粗体和斜体也非常简单: 用两个 * 包含一段文本就是粗体的语法; 用一个 * 包含一段文本就是斜体的语法。
** 粗体 **
* 斜体 *
链接与图片
链接:在 Markdown 中,插入链接
[显示文本] (链接地址)
图片:在 Markdown 中,插入图片只需要使用
![显示文本] (图片链接地址)即可。
注:插入图片的语法和链接的语法很像,只是前面多了一个 !
音频和视频
插入音频
<audio id="audio" controls="" preload="none">
<source id="mp3" src="http://music.163.com/song/media/outer/url?id=469249441.mp3">
</audio>
效果:
使用 iframe
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=469249441&auto=1&height=66"></iframe>
效果:
插入视频
一般在视频网站的分享,会提供嵌入代码,直接复制粘贴即可,以B站视频为例
<iframe src="//player.bilibili.com/player.html?aid=69754511&bvid=BV1ZE411D7od&cid=120910162&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
效果:
但是会发现视频并不能自适应界面,所以需要在ifame上添加样式
style="
width: 100%;
height: 56.25vw; /* 16:9 页面 100*9/16 = 56.25 */"
/* 添加后的标签*/
<iframe src="//player.bilibili.com/player.html?aid=69754511&bvid=BV1ZE411D7od&cid=120910162&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"style="width: 100%; height: 56.25vw; "> </iframe>
效果:
分割线
分割线的语法只需要另起一行,连续输入三个星号 *** 即可分割两段文字内容。 如图:
下面有条分割线
***
下面有条分割线
表格
当你需要在Markdown文稿中键入表格
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
效果
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
待办和清单
待办事项和清单在日常工作、生活中经常被使用。 在Markdown中,你只需要在待办的事项文本或者清单文本前加上- [ ]、- [x]即可。 - [ ] 表示未完成,- [x] 表示已完成。 注:键入字符与字符之间都要保留一个字符的空格。
- [x] 已完成
- [ ] 未完成
- 已完成
- 未完成
流程图
参见:http://knsv.github.io/mermaid/#flowcharts-basic-syntax
甘特图
参见:http://knsv.github.io/mermaid/#styling39
在线书写公式
参见: https://latex.codecogs.com/eqneditor/editor.php
或
https://zzugbb.github.io/formula-edit/
代码折叠
<style>
.testButton { color:black;font-size:12px;padding-top:10px;padding-bottom:10px;padding-left:25px;padding-right:25px;border-width:;border-color:white;border-style:;border-radius:10px;background-color:#f3f3f3;}.testButton:hover{color:white;background-color:#0684bd;border-color:#87daff;}
</style>
<button class="testButton" onclick="document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none'">点击显\隐代码</button>
<div id="child1" style="display:none">
此处放代码
</div>