Markdown扩展

Markdown扩展

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

:laughing:隐藏内容


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

- 隐藏内容

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

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

- 隐藏内容

</details>

:running:上下标

下标:H2O2
上标:30th

上面的效果实现代码为:

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

上面的效果实现代码是:

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

符号 说明 对应编码(使用时去掉空格) 英文读法
& 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:表格及背景色




123
123

上面的效果实现代码是:

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!”处。

评论

程振兴

程振兴 @czxa.top
截止今天,我已经在本博客上写了658.8k个字了!

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×