【MarkDown】使用Html样式和折叠语法

MarkDown很方便,但基本语法有些不足:好比没法使用折叠语法,没法让文字有不一样的颜色。html

这些功能能够实现,不过须要使用Html语法进行扩展。这篇文章主要是整理一下这些技巧,方便更好的使用。git

1、折叠语法:<details>标签

1.一、代码:

<details>
  <summary>点击时的区域标题:点击查看详细内容</summary>
  <p> - 测试 测试测试</p>
  <pre><code>  title,value,callBack能够缺省  </code>  </pre>
</details>

summary:折叠语法展现的摘要github

details:折叠语法标签ruby

pre:以原有格式显示元素内的文字是已经格式化的文本。markdown

blockcode:表示程序的代码块。测试

code:指定代码范例。字体

1.二、实际效果:


点击时的区域标题:点击查看详细内容

- 测试 测试测试spa


  title,value,callBack能够缺省

2、其余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或者font标签,同时用style属性控制样式。code

2.2 实际效果:


This is redhtm

ㄏㄢˋ
Ctrl+F9

Bigger


字体及字体颜色和大小
字体颜色


居左文本

居中文本

居右文本

3、参考来源:

  1. markdown嵌入折叠标签 | 東引甌越 https://www.sunyazhou.com/2017/10/25/20171025markdown-skill/
  2. 让你的md文档可折叠化展现 · Issue #155 · iuap-design/blog https://github.com/iuap-design/blog/issues/155 (比上一个好点的感受)
  3. HTML Support in Typora https://support.typora.io/HTML/#html-entities (其余的HTML语法和使用)
  4. 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)/
相关文章
相关标签/搜索