Markdown2-Html 标签

简介

Markdown文件会根据CSS文件生成基于Html的预览，所以Markdown支持部分Html标签。

前文中已经使用了一些Html标签，如红色字体和图片圆角。

更改文字颜色和大小

<font>标签

可以使用

1

<font size="5px" color="red">红色，5px大小</font>

红色，5px 大小

CSS Style

使用<p style="">标签来为文字添加颜色、大小、背景等元素

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<p
  style="
    display: inline;
    color: red;
    background-color: #eee;
    font-size: 15px;
    border-radius: 5px;
    padding: 2px;
  "
>
  效果
</p>

CSS效果

Markdown默认效果

下面逐个解析：

1. display: inline控制行内效果（<p>标签默认占一整行），添加后可以连续添加文字。
2. color: red控制颜色为红色，也可以使用16进制或RGB颜色等方式表示。
3. background-color: #eee控制背景颜色为灰色（#eee同#eeeeee；#1af同#11aaff）。
4. font-size: 15px控制字体大小（与<font>标签大小可能有出入），单位还有cm、in、vh等。
5. border-radius: 5px控制圆角边框。
6. padding: 2px控制内边距。

<img>标签

<img>标签可以添加图片

1
2
3
4
5
6
7

<img src="/captain.png" alt="图片描述" style="zoom: 20%;border-radius: 10%" />
<img
  src="/captain.png"
  alt="图片描述"
  width="100px"
  style="border-radius: 10%"
/>

效果