Markdown 扩展

Markdown 的语法非常简单，但是自然也功能有限，不过可以通过 Html 语法进行扩展。这篇文章会收集一些非常棒的 HTML 语法来扩展 Markdown。有些在网页上是不支持的，但是在 MPE 上都是支持的。

:laughing:隐藏内容

上面的隐藏效果实现代码为：

1
2
3
4
5
6

<details>
<summary><strong>点击左边👈的三角形就可以看到隐藏内容</strong></summary>

- 隐藏内容

</details>

:running:上下标

下标：H₂O₂
上标：30^th

上面的效果实现代码为：

1
2

下标：H<sub>2</sub>O<sub>2</sub>
上标：30<sup>th</sup>

:notes:脚注

Content [^1]
[^1]: Hi! This is a footnote

上面的效果实现代码为：

1
2

Content [^1]
[^1]: Hi! This is a footnote

:blue_book:缩略

[HTML]: Hyper Text Markup Language [W3C]: World Wide Web Consortium
The HTML specification is maintained by the W3C.

上面的效果实现代码是：

1
2
3
4

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium
The HTML specification is maintained by the W3C.
<!-- ** -->

:bookmark_tabs:标记

==marked==

上面的效果实现代码是：

1

==marked==

:eyes:emoji 表情

例如：

这个网页提供了一份 emoji-cheat-sheet：Emoji cheat sheet

:closed_book:代码行数

上面的效果实现的方法是：

:lipstick:彩色字体

WARNING
WARNING
WARNING

上面的效果实现代码是：

1
2
3

<span style="color:red;">WARNING</span>
<span style="color:green;">WARNING</span>
<span style="color:pink;">WARNING</span>

:cherries:文字背景块

Rcall

上面的效果实现代码是：

1

`Rcall`

:tangerine:控制图片的大小和位置

上面的效果实现代码是：

1

<img src="https://czxb.github.io/mr/DSC00905.JPG" align="left" width="50%" height="50%">

:stars:ToDo List

• UnDo iterm
• Done iterm

上面的效果实现代码是：

1
2

- [ ] UnDo iterm
- [x] Done iterm

:hear_no_evil:删除线

这些内容会被划掉

上面的效果实现代码是：

1

~~这些内容会被划掉~~

:four_leaf_clover:HTML 中的特殊符号

下表来自在 markdown 中使用 HTML 中的特殊符号：

:cactus:改变字号

这是正常字号；

这是加大字号；
这是缩小字号。

上面的效果实现代码是：

1
2
3

这是正常字号；
<big>这是加大字号；</big>
<small>这是缩小字号。</small>

:last_quarter_moon_with_face:下划线

这句话下面会有下划线！

上面的效果实现代码是：

1

<u>这句话下面会有下划线！</u>

:partly_sunny:换行符

这里会
断行！

上面的效果实现代码是：

1

这里会<br>断行！

:gift_heart:引用

《富春山居图》由黄公望始画于至正七年(1347)，于至正十年完成

上面的效果实现代码是：

1

<cite>《富春山居图》由黄公望始画于至正七年(1347)，于至正十年完成</cite>

• 短引用：
  毛泽东说过：帝国主义都是纸老虎 …

上面的效果实现代码是：

1

<q>毛泽东说过：帝国主义都是纸老虎 ...</q>

• 块引用：

  
  这是块引用。
  

上面的效果实现代码是：

1
2
3

<blockquote>
这是块引用。
</blockquote>

:balloon:设置字号、字体、颜色

上面的效果实现代码是：

1
2
3

<font size="3" color="red">红色3号字！</font>
<font size="2" color="blue">蓝色2号字！</font>
<font face="STSong" color="green"  size="3">绿色3号宋体字！</font>

:watch:表格及背景色

上面的效果实现代码是：

1
2
3
4

<table>
    <tr><td bgcolor="red">1</td><td bgcolor="yellow">2</td><td bgcolor="blue">3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
</table>

:bathtub:下拉列表框

上面的效果实现代码是：

1
2
3
4
5
6

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  <option>选项4</option>
</select>

:door:按钮

按钮的样式可以通过修改 css 改变。

上面的效果实现代码是：

1
2
3
4
5
6

<button type="button">Click Me!</button>
<div><a href="#" class="btn"><font color="black">Primary Button</font></a></div>
<div><a href="#" class="btn btn-success"><font color="black">Success Button</font></a></div>
<div><a href="#" class="btn btn-warning"><font color="black">Warning Button</font></a></div>
<div><a href="#" class="btn btn-danger"><font color="black">Danger Button</font></a></div>
<div><a href="#" class="btn btn-info"><font color="black">Info Button</font></a></div>

🔥删除与新增

1
2

- 减号后是原来的字符。
+ 加号后是改后的字符。

代码：

1
2
3
4

\`\`\`diff
- 减号后是原来的字符。
+ 加号后是改后的字符。
\`\`\`

文内锚点

使用 bookmark 标记

设置方法：

• 建立一个跳转的链接，标记方式为 说明文字：

• 说明文字（你点击一下看效果？）

• 标记要跳转到什么位置即可，标记方式为 跳转到这

• 目标点代码：<span id = "jump">跳转到这</span>

借助 HTML 标记

HTML 中的 标签最重要的属性是 href ，它指示的链接目标，既可以是外部站点，也可以是页内锚点。页内锚点可以实现类似书签跳转的功能，最典型的就是点击 TOC 中的目录书签跳转到指定章节阅读。

构建页内锚点的语法，类似参考式链接：

1. 先定义锚点 id：bookmark_text（<a href="#auchor_id">bookmark_text</a>）
2. 再定义一个 id 为 auchor_id 的对象（这里以<p>为例）：

   auchor_text

   （<p id="auchor_id">auchor_text</p>）
   例如，在文末定义了 id 为 end 的 EOF（End Of File）：

   The end！

   ，然后通过Goto the End!指定书签“Goto the End!”跳转到文末“The End!”处。