欢迎加入 TidyFriday !
现在加入即可享受 8 折优惠! See: https://czxa.top/posts/34814/
Markdown 的语法非常简单,但是自然也功能有限,不过可以通过 Html 语法进行扩展。这篇文章会收集一些非常棒的 HTML 语法来扩展 Markdown。有些在网页上是不支持的,但是在 MPE 上都是支持的。
上面的隐藏效果实现代码为:1
2
3
4
5
6<details>
<summary><strong>点击左边👈的三角形就可以看到隐藏内容</strong></summary>
- 隐藏内容
</details>
下标:H2O2
上标:30th
上面的效果实现代码为:1
2下标:H<sub>2</sub>O<sub>2</sub>
上标:30<sup>th</sup>
Content [^1]
[^1]: Hi! This is a footnote
上面的效果实现代码为:1
2Content [^1]
[^1]: Hi! This is a footnote
[HTML]: Hyper Text Markup Language
[W3C]: World Wide Web Consortium
The HTML specification is maintained by the W3C.
上面的效果实现代码是:
1 | *[HTML]: Hyper Text Markup Language |
==marked==
上面的效果实现代码是:
1 | ==marked== |
例如:
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
上面的效果实现的方法是:
WARNING
WARNING
WARNING
上面的效果实现代码是:
1 | <span style="color:red;">WARNING</span> |
Rcall
上面的效果实现代码是:
1 | `Rcall` |
上面的效果实现代码是:
1 | <img src="https://czxb.github.io/mr/DSC00905.JPG" align="left" width="50%" height="50%"> |
上面的效果实现代码是:
1 | - [ ] UnDo iterm |
这些内容会被划掉
上面的效果实现代码是:
1 | ~~这些内容会被划掉~~ |
下表来自在 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 |
这是正常字号;
这是加大字号;
这是缩小字号。
上面的效果实现代码是:
1 | 这是正常字号; |
这句话下面会有下划线!
上面的效果实现代码是:
1 | <u>这句话下面会有下划线!</u> |
这里会
断行!
上面的效果实现代码是:
1 | 这里会<br>断行! |
《富春山居图》由黄公望始画于至正七年(1347),于至正十年完成
上面的效果实现代码是:
1 | <cite>《富春山居图》由黄公望始画于至正七年(1347),于至正十年完成</cite> |
毛泽东说过:帝国主义都是纸老虎 …
上面的效果实现代码是:
1 | <q>毛泽东说过:帝国主义都是纸老虎 ...</q> |
这是块引用。
上面的效果实现代码是:
1 | <blockquote> |
上面的效果实现代码是:
1 | <font size="3" color="red">红色3号字!</font> |
1 | 2 | 3 |
1 | 2 | 3 |
上面的效果实现代码是:
1 | <table> |
上面的效果实现代码是:
1 | <select> |
按钮的样式可以通过修改 css 改变。
上面的效果实现代码是:
1 | <button type="button">Click Me!</button> |
1 | - 减号后是原来的字符。 |
代码:1
2
3
4\`\`\`diff
- 减号后是原来的字符。
+ 加号后是改后的字符。
\`\`\`
设置方法:
建立一个跳转的链接,标记方式为 说明文字:
说明文字(你点击一下看效果?)
标记要跳转到什么位置即可,标记方式为 跳转到这
目标点代码:<span id = "jump">跳转到这</span>
HTML 中的 标签最重要的属性是 href ,它指示的链接目标,既可以是外部站点,也可以是页内锚点。页内锚点可以实现类似书签跳转的功能,最典型的就是点击 TOC 中的目录书签跳转到指定章节阅读。
构建页内锚点的语法,类似参考式链接:
<a href="#auchor_id">bookmark_text</a>
)<p>
为例):auchor_text
(<p id="auchor_id">auchor_text</p>
)The end!
,然后通过Goto the End!指定书签“Goto the End!”跳转到文末“The End!”处。Update your browser to view this website correctly. Update my browser now