2018-09-02

12 分钟读完 (大约 1726 个字) 0次访问

Markdown扩展

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

:laughing:隐藏内容

点击左边👈的三角形就可以看到隐藏内容

- 隐藏内容

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

<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.

上面的效果实现代码是：

*[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	emoji	emoji
:smile:	:car:	:heartbeat:
:yum:	:phone:	:email:
:calling:	:calendar:	:newspaper:
:office:	:rocket:	:cn:
:secret:	:chart_with_downwards_trend:	:star:
:blue_book:	:chart_with_upwards_trend:	:fire:
:100:	:basketball:	:book:

这个网页提供了一份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

上面的效果实现代码是：

`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中的特殊符号：

符号	说明	对应编码(使用时去掉空格)	英文读法
&	AND 符号	& amp;	ampersand
<	小于	& lt;	little
·>	大于	& gt;	great
	不断行的空白格	& nbsp;	number space
	半方大的空白	& ensp;
	全方大的空白	& emsp;
¿	倒问号	& iquest;	inverted question
?	问号	& quest;	question
«	左书名号	& laquo;	left angle quote
»	右书名号	& raquo;	right angle quote
“	引号	& quot;	quote
‘	左单引号	& lsquo;	left single quote
’	右单引号	& rsquo:	right single quote
“	左双引号	& ldquo:	left double quote
”	右双引号	& rdquo:	right double quote
¶	段落符号	& para;	paragraph
§	章节符	& sect;	section
×	乘号	& times;	times
÷	除号	& divide;	divide
±	加减号	& plusmn;	plus minus
ƒ	function	& fnof;
√	根号	& radic;	radic
∞	无穷大	& infin;	infinite
°	度	& deg;	degree
≠	不等号	& ne;	ne
≡	恒等于	& equiv;	equivalent
≤	小于等于	& le;	less than or equal to
≥	大于等于	& ge;	great than or equal to
⊥	垂直符号	& perp;	perpendicular
←	左箭头	& larr;	left arrow
→	右箭头	& rarr;	right arrow
↑	上箭头	& uarr;	up arrow
↓	下箭头	& darr;	down arrow
↔	水平箭头	& harr;	horizontal arrow
↕	竖直箭头	& varr;	vertical arrow
⇐	双线左箭头	& lArr;	left arrow
⇒	双线右箭头	& rArr;	right arrow
⇑	双线上箭头	& uArr;	up arrow
⇓	双线上箭头	& dArr;	down arrow
⇔	双线水平双箭头	& hArr;	horizontal arrow
⇕	双线竖直箭头	& vArr;	vertical arrow
♠	黑桃	& spades; spades
♥	红桃	& hearts;	hearts
♣	梅花	& clubs;	club
♦	方块	& diams;	diamonds
©	版权	& copy;	copy right
®	注册商标	& reg;	registration
™	商标	& trade;	trade
¥	人民币	& yen;
€	欧元	& euro;	euro
¢	美分	& cent;	cent
£	英磅	& pound;	pound
⊕		& oplus;
½	二分之一	& frac12;	fraction
¼	四分之一	& frac14;	fraction
‰	千分符号	& permil;	per mille
∴	所以	& there4;	there fore
π	圆周率	& pi;
¹	商标1	& sup1;	super 1
α	alpha	& alpha;	alpha
β	beta	& beta;	beta
γ	gamma	& gamma;	gamma
δ	delta	& delta;	delta
θ	theta	& theta;	theta
λ	lambda	& lambda;	lambda
σ	sigma	& sigma;	sigma
τ	tau	& tau;	tau

: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:设置字号、字体、颜色

红色3号字！
蓝色2号字！
绿色3号宋体字！

上面的效果实现代码是：

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
1	2	3

上面的效果实现代码是：

<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:下拉列表框

上面的效果实现代码是：

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

:door:按钮

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

上面的效果实现代码是：

<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	- 减号后是原来的字符。 + 加号后是改后的字符。

代码：

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

文内锚点

使用 bookmark 标记

设置方法：

建立一个跳转的链接，标记方式为说明文字：
说明文字（你点击一下看效果？）
标记要跳转到什么位置即可，标记方式为跳转到这
目标点代码：跳转到这

借助 HTML 标记

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

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

先定义锚点id：bookmark_text（<a href="#auchor_id">bookmark_text</a>）
再定义一个id为auchor_id的对象（这里以为例）：
auchor_text
（auchor_text）
例如，在文末定义了id为end的 EOF（End Of File）：
The end！
，然后通过Goto the End!指定书签“Goto the End!”跳转到文末“The End!”处。