Markdown

1. Markdown

MarkdownAaron SwartzJohn Gruber共同设计,是一种轻量级标记语言,它以纯文本形式(易读、易写、易更改)编写文档,并最终以HTML格式发布。 Markdown也可以理解为将以MARKDOWN语法编写的语言转换成HTML内容的工具。

1-1 基础元素

1
2
3
4
5
6
7
|     效果      |    Markdown     |      HTML tag       |
| :-----------: | :-------------: | :-----------------: |
|    *斜体*     |    `*斜体*`     |     `<em></em>`     |
|   **加粗**    |   `**加粗**`    | `<strong></strong>` |
|    `代码`     |    ``代码``     |   `<code></code>`   |
|  ~~删除线~~   |  `~~删除线~~`   |    `<del></del`     |
| <u>下划线</u> | `<u>下划线</u>` |      `<u></u>`      |
效果MarkdownHTML tag
斜体*斜体*<em></em>
加粗**加粗**<strong></strong>
代码代码<code></code>
删除线~~删除线~~<del></del
下划线<u>下划线</u><u></u>

1-2 标题

1
2
3
4
5
6
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

1-3 分割线

三个或三个以上的 ***或 --- 或 ___

1-4 脚注

1
2
 欢迎 [^1]。
 [^1]: 点击箭头可返回(这一句要放置在文末)

欢迎 1

1-5 列表

1
2
3
<!-- 有序列表 -->
1. 需要空格
2. 第二个
  1. 需要空格

  2. 第二个

1
2
3
<!-- 无序列表 -->
- 也要空格
- 你好!
  • 也要空格

  • 你好!

1
2
3
<!-- 任务列表 -->
- [ ] 还没完成(中间有空格)
- [x] 完成了
  • 还没完成(中间有空格)

  • 完成了

1-6 引用

1
2
> 需要空格
> >继续引用

需要空格

继续引用

1-7 表格

1
2
3
| 左对齐 | 居中  | 右对齐 |
| ------ | :---: | -----: |
| Hello  | World |   你好 |
左对齐居中右对齐
HelloWorld你好

1-8 链接

方法一:

1
[这是这篇博文的原链接](https://blog.freeya.cyou/posts/markdown)

这是这篇博文的原链接

方法二:

1
2
3
4
5
[朝风开枪1][1]
[朝风开枪2][2]

[1]:https://blog.freeya.cyou
[2]:https://blog.freeya.cyou

朝风开枪1

朝风开枪2

1-9 图片

1
![](图片地址)

http://5b0988e595225.cdn.sohucs.com/images/20170808/6c404f644033432aab409418a4a8a273.jpeg

1
<img src="图片地址">

1-10 代码

1
2
 `代码内容` 
<!-- 代码块是用```包住代码 -->

1-11反斜杠\

相当于反转义作用。使符号成为普通符号。

1
2
\# 我只想要一个井号
\* 我只想要一个星号

# 我只想要一个井号

* 我只想要一个星号

2. 借助HTML

我们可以借助 HTML 来丰富编辑格式。

2-1 文字颜色&大小

颜色可查询HTML颜色名称十六进制的颜色编码

1
2
3
<font size=5px>这是5px的字号</font>
<font color=#33FFFF>这是蓝色的字</font>
<font size=5px color=#33FFFF>这是蓝色的字</font>

这是5px的字号

这是蓝色的字

这是蓝色的字

2-2 文字上标&下标

1
2
这是上标<sup>2</sup>
这是下标<sub>1</sub>

这是上标2

这是下标1

2-3 换行&空格

1
2
3
4
5
<br><!-- 换行 -->
&nbsp;  <!-- 一个字符的半角的空格 -->
&ensp;  <!-- 一个字符的半角的空格(1/2个中文宽度) -->
&emsp;  <!-- 两个字符的全角的空格(1个中文宽度) -->
&thinsp;  <!-- 小于一个字符的空格 -->

2-4 新标签页打开

1
<a href="blog.freeya.cyou" target="_blank">朝风开枪</a>

朝风开枪

2-5 高亮文本

1
<mark>高亮文本</mark>

高亮文本

2-6 位置

1
2
3
<center>居中</center>
<p style="text-align:left">居左</p>
<p style="text-align:right">居右</p>
居中

居左

居右

2-7 图片设置高宽

1
<img src="图片地址"  width="300" height="300">

2-8 文本提示

1
<abbr title="显示内容">将鼠标移上来看看</abbr>

将鼠标移上来看看

2-9 注音

1
<ruby>你好<rt>Ni Hao</rt><ruby>

你好Ni Hao

2-10 折叠

1
2
3
4
<details>
<summary>点击展开文本</summary>
<p>Hello World!</p>
</details>
点击展开文本

Hello World!

2-11 禁止文字复制和选中

<!-- 在文章中加入以下这段代码 -->

1
<body oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onselect='document.selection.empty()' oncopy='document.selection.empty()' onbeforecopy='return false' onmouseup='document.selection.empty()'>

2-12 嵌入音视频

视频方法一:嵌入视频网站给的HTML代码。

B站等默认生成的代码窗口太小,需要调整,那么嵌入代码

1
2
3
<iframe id="sp" src="视频网站提供的代码地址&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe> 

<script type="text/javascript">   document.getElementById("sp").style.height=document.getElementById("sp").scrollWidth*0.76+"px"; </script>

Youtube等生成的代码已经预先设置了播放窗口尺寸,没有特殊需求的话我们不需要手动调整。

视频方法二:添加视频直链地址。

1
<video src="视频地址(地址结尾为.mp4等视频格式)" controls></video>

音频方法一:嵌入音频网站给的HTML代码。

音频方法二:添加音频直链地址。

1
<audio src="音频地址(地址结尾为.mp3等音频格式)" controls></audio>

扩展Shortcodes

admonition

admonition比较常用,有12个样式,

注意
type=note
摘要
type=abstract
信息
type=info
技巧
type=tip
成功
type=success
问题
type=question
警告
type=warning
失败
type=failure
危险
type=danger
Bug
type=Bug
示例
type=example
引用
type=quote


  1. 点击箭头可返回(这一句要放置在文末) ↩︎ ↩︎