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%"
/>

效果