【MarkDown】使用Html樣式和折疊語法
阿新 • • 發佈:2018-09-03
屬性 row 實現 tmp 折疊 sign summary col 區域 一、折疊語法:
二、其他HTML語法:
三、參考來源:
MarkDown很方便,但基本語法有些不足:比如無法使用折疊語法,無法讓文字有不同的顏色。
這些功能可以實現,不過需要使用Html語法進行擴展。這篇文章主要是整理一下這些技巧,方便更好的使用。
一、折疊語法:<details>
標簽
1.1、代碼:
<details>
<summary>點擊時的區域標題:點擊查看詳細內容</summary>
<p> - 測試 測試測試</p>
<pre><code> title,value,callBack可以缺省 </code> </pre>
</details>
<details>
<summary>點擊時的區域標題:點擊查看詳細內容</summary>
<p> - 測試 測試測試</p>
<pre><code> title,value,callBack可以缺省 </code> </pre>
</details>
summary
:折疊語法展示的摘要
details
:折疊語法標簽
pre
:以原有格式顯示元素內的文字是已經格式化的文本。
blockcode
:表示程序的代碼塊。
code
:指定代碼範例。
1.2、實際效果:
點擊時的區域標題:點擊查看詳細內容
- 測試 測試測試
title,value,callBack可以缺省
二、其他HTML語法:
2.1 源碼:
<span style=‘color:red‘>This is red</span> //字體顏色
<ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby> // 特殊字
<kbd>Ctrl</kbd>+<kbd>F9</kbd> // 按鍵標識
<span style="font-size:2rem; background:yellow;">**Bigger**</span> //字體大小和背景
<font face="微軟雅黑" color="red" size="6">字體及字體顏色和大小</font>
<font color="#0000ff">字體顏色</font>
<p align="left">居左文本</p>
<p align="center">居中文本</p>
<p align="right">居右文本</p>
<span style=‘color:red‘>This is red</span> //字體顏色
<ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby> // 特殊字
<kbd>Ctrl</kbd>+<kbd>F9</kbd> // 按鍵標識
<span style="font-size:2rem; background:yellow;">**Bigger**</span> //字體大小和背景
<font face="微軟雅黑" color="red" size="6">字體及字體顏色和大小</font>
<font color="#0000ff">字體顏色</font>
<p align="left">居左文本</p>
<p align="center">居中文本</p>
<p align="right">居右文本</p>
使用span
或者font
標簽,同時用style
屬性控制樣式。
2.2 實際效果:
This is red
漢
Ctrl+F9
Bigger
字體及字體顏色和大小
字體顏色
居左文本
居中文本
居右文本
三、參考來源:
- markdown嵌入折疊標簽 | 東引甌越 https://www.sunyazhou.com/2017/10/25/20171025markdown-skill/
- 讓你的md文檔可折疊化展示 · Issue #155 · iuap-design/blog https://github.com/iuap-design/blog/issues/155 (比上一個好點的感覺)
- HTML Support in Typora https://support.typora.io/HTML/#html-entities (其他的HTML語法和使用)
- Markdown的常用語法(個人總結) | ConnorLin‘s Blog http://connorlin.github.io/2016/05/06/Markdown%E7%9A%84%E5%B8%B8%E7%94%A8%E8%AF%AD%E6%B3%95(%E4%B8%AA%E4%BA%BA%E6%80%BB%E7%BB%93)/
- markdown嵌入折疊標簽 | 東引甌越 https://www.sunyazhou.com/2017/10/25/20171025markdown-skill/
- 讓你的md文檔可折疊化展示 · Issue #155 · iuap-design/blog https://github.com/iuap-design/blog/issues/155 (比上一個好點的感覺)
- HTML Support in Typora https://support.typora.io/HTML/#html-entities (其他的HTML語法和使用)
- Markdown的常用語法(個人總結) | ConnorLin‘s Blog http://connorlin.github.io/2016/05/06/Markdown%E7%9A%84%E5%B8%B8%E7%94%A8%E8%AF%AD%E6%B3%95(%E4%B8%AA%E4%BA%BA%E6%80%BB%E7%BB%93)/
【MarkDown】使用Html樣式和折疊語法