Markdown 内联 HTML 和 CSS
在之前的两篇文章中，我们讲了常用的 Markdown 基础和一些常用的 Markdown 扩展功能。大部分时候，这些语法是够用的。但是有时，我们需要缩写的文章具有更好的视觉表现力，光靠 Markdown 本身是无能为力的，此时可以在 Markdown 中内置一些 HTML 和 CSS 样式来提升文章的表现能力.
正如官方所说, Markdown 只是 HTML 的一个子集：
Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags
内联 HTML
当我们需要在 Markdown 中插入 HTML 时，可以直接在 Markdown 中输入HTML，无需特殊说明。 以下摘自官方:
For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.
例如，在 Markdown 中使用 定义列表:
* 常见的车型
<dl>
<dt>小轿车</dt>
<dd>一种轻量的可载5个人的小型家用汽车 ... ...</dd>
<dt>大卡车</dt>
<dd>一种重型的运送货物的汽车 ... ...</dd>
</dl>
效果如下：
- 常见的车型
- 小轿车
- 一种轻量的可载5个人的小型家用汽车 ... ...
- 大卡车
- 一种重型的运送货物的汽车 ... ...
内嵌 HTML 有两点限制：
- 块元素的前后必须有空行
- 开始和结束标签不能用tab或空格缩紧
内联 CSS 样式
与内联 HTML 类似，可以直接在 Markdown 中嵌入 CSS 样式。大部分情况，内联的 CSS 应该和内联的 HTML 一起使用，这样不会被破坏原始 Markdown 的渲染。例如：
* 我们来测试以下内联样式吧
<style type="text/css" rel="stylesheet">
.example {
color: red;
font-size: 1.5em;
}
</style>
<p id="example">
世界的奇妙程度远远超越我们的想象，爱因斯坦的理论为我们解开了探索宇宙的新篇章。
<p/>
效果如下：
- 我们来测试以下内联样式吧
世界的奇妙程度远远超越我们的想象，爱因斯坦的理论为我们解开了探索宇宙的新篇章。
插入视频
使用 iframe 方式插入对应视频，以下以bilibili视频为例：
1
2
<iframe height="400" width="600" src="//player.bilibili.com/player.html?aid=10810947&cid=17837320&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
效果如下：
参考