Markdown内嵌HTML语法

时间:2022-12-31 13:45:33

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。Markdown内嵌HTML,本文总结了一些常用的HTML标记用于扩展Markdown语法。参考链接:Markdown 语法说明(简体中文版)

缩进与换行

  Markdown中可以用两个空格+回车进行换行,另外<br />也可以表示换行;在Markdown中,可以用HTML中的特殊字符&ensp;&emsp;来实现缩进的效果,其中&ensp;表示半角空格,&emsp;表示全角空格。
输入如下所示:

&emsp;&emsp;半角空格用`&ensp;`表示;<br />&ensp;&ensp;&ensp;&ensp;全角空格用`&emsp;`表示。

实现的效果如下所示:
  半角空格用&ensp;表示;
    全角空格用&emsp;表示。

字体、字号、颜色、背景

<font face="黑体">实现字体为黑体</font>
<small>比默认字体小一号</small>
这里显示的是浏览器默认字体大小
<font size=4>实现字体大小改变</font>
<big>比默认字体大一号</big>
<font color=red>实现字体颜色为红色</font>
<table><tr><td bgcolor=orange>实现背景填充为橙色</td></tr></table>
<font color=#FF69B4>颜色值用十六进制表示,实现字体颜色为“热情的粉红”</font>
<table><tr><td bgcolor=#D3D3D3>颜色值用十六进制表示,实现背景填充为“浅灰色”</td></tr></table>
<font face="黑体" size=4 color=red >实现字体效果:黑体、4号、红色</font>
<table><tr><td bgcolor=#D3D3D3><font size=4 color=#DC143C>默认字体,猩红色,4号,浅灰色填充</font></td></tr></table>

实现的效果如下所示:
实现字体为黑体
比默认字体小一号
这里显示的是浏览器默认字体大小
实现字体大小改变
比默认字体大一号
实现字体颜色为红色

实现背景填充为橙色

颜色值用十六进制表示,实现字体颜色为“热情的粉红”
颜色值用十六进制表示,实现背景填充为“浅灰色”

实现字体效果:黑体、4号、红色
默认字体,猩红色,4号,浅灰色填充

注记:字号size的值可取 1 ~ 7,浏览器默认字体大小为 3;
部分颜色列表可以参考 RGB颜色值与十六进制颜色码转换工具

实现上标、下标

可以用HTML中的<sup>xxx</sup>实现上标、<sub>xxx</sub>实现下标

H<sub>2</sub>O、注册商标<sup>&reg;</sup>、(x<sub>1</sub>+x<sub>2</sub>)<sup>2</sup> = x<sub>1</sub><sup>2</sup>+x<sub>2</sub><sup>2</sup>+2x<sub>1</sub>x<sub>2</sub>

实现的效果如下所示:

H2O、注册商标®、(x1+x2)2 = x12+x22+2x1x2

关于图片处理的技巧

Markdown格式生成的图片默认居左对齐,大小受图片实际大小限制
![](http://images2017.cnblogs.com/blog/1147566/201710/1147566-20171021214314318-1142270911.jpg)

Markdown内嵌HTML语法

可以用HTML语言的"width"、"height"来固定图片的大小
<img width=256 height=256 src="http://images2017.cnblogs.com/blog/1147566/201710/1147566-20171021214314318-1142270911.jpg" />

Markdown内嵌HTML语法

可以用"<div>"结合"align"控制图片居中对齐
<div align="center"><img src="http://images2017.cnblogs.com/blog/1147566/201710/1147566-20171021214314318-1142270911.jpg" /></div>
Markdown内嵌HTML语法
若要在图片下方加标注,可用如下方式实现
<center>
<img width=256 height=256 src="http://images2017.cnblogs.com/blog/1147566/201710/1147566-20171021214314318-1142270911.jpg" />
图 1 数字图像处理的标准图
</center>
Markdown内嵌HTML语法
图 1 数字图像处理的标准图

特殊字符

一些常用的特殊符号,比如 § 、→ 、® 等等,均可借助HTML语言很容易地实现,原文链接参考 在markdown中使用HTML中的特殊符号 ,这里放上一张截图

Markdown内嵌HTML语法
图片来源于 简书-vola_lei

展示数学公式

发现博客园的markdown对LaTeX公式的支持好像有bug,可以在 在线 LaTeX 公式编辑器 编辑公式后(如下图)
Markdown内嵌HTML语法

复制下方图片URL,或URL Encoded,或直接在生成的公式上面右键复制图片,粘贴过来即可
Markdown内嵌HTML语法

生成公式效果如下:
Markdown内嵌HTML语法

对于简单的行内公式,完全可以借用上文所说的HTML中的特殊字符实现。