Markdown 语法 拓展篇

本文最后更新于：5 个月前

在我们使用时会发现，只使用 Markdown 无法满足一些常用需求，比如文字颜色、位置、图片大小等。这时我们可以依托 Markdown 可与 HTML 混编的特性，直接在 Markdown 中使用 HTML，但是 HTML 内容丰富，对于普通用户而言只需使用其中一小部分内容，因此我在这里记录了一些常用的 HTML 语句来满足需求。

颜色

  • 效果:

    #123ABC 颜色

  • Markdown

    HTML
    1
    <span style="color: #123ABC;"> #123ABC 颜色 </span>

大小

  • 效果:

    0.85em 文字大小

  • Markdown

    HTML
    1
    <span style="font-size:0.85em;"> 0.85em 文字大小 </span>

位置

  • 效果:

    居中

  • Markdown

    HTML
    1
    <div align="center">居中</div>

    位置可选值：left | center | right。

折叠

  • 效果:

    点击查看效果
    左对齐居中对齐右对齐
    A1B1C1
    A2B2链接

  • Markdown

    Markdown
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <details>
      <summary>点击查看效果</summary>

    | 左对齐 | 居中对齐 |                              右对齐 |
    | :----- | :------: | ----------------------------------: |
    | _A1_   |   `B1`   |                              ~~C1~~ |
    | A2     |  **B2**  | [链接](https://KiyanYang.github.io) |

    </details>

    summary 填写显示名称。

  • 注意

    在内部使用 Markdown 语句时要在前后留有空行，否则可能会当作普通文本处理，而且某些渲染器可能不支持在 html 内写 Markdown 文本，不支持时可以直接使用 html。

图片

  • 效果:

    图片-1

    图片-2

    图片-3

  • Markdown

    HTML
    1
    2
    3
    4
    5
    <img src="/@img/common/flower_200x300.webp" alt="图片-1" width = "100" height = "100"></img>

    <img src="/@img/common/flower_200x300.webp" alt="图片-2" width = "100"></img>

    <img src="/@img/common/flower_200x300.webp" alt="图片-3" width = 20% height = 20%></img>

    width 和 height 可全写、或只写 1 个、或全部不写，其值可为数字或百分比。

    备注：图片居中显示是博客的效果，一般情况下是靠左显示，不过可以在其外面包裹位置，来调整图片的水平位置。

表格

由于博客的主题样式，表格的边框、背景等元素可能与你使用下列代码时的效果不同。

普通表格

  • 效果:

    111213
    212223
    313233

  • Markdown

    HTML
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <table>
      <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
      </tr>
      <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
      </tr>
    </table>

纵向合并单元格

  • 效果:

    111213
    212223
    3233

  • Markdown

    HTML
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <table>
      <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
      </tr>
      <tr>
        <th rowspan="2">21</th>
        <td>22</td>
        <td>23</td>
      </tr>
      <tr>
        <td>32</td>
        <td>33</td>
      </tr>
    </table>

横向合并单元格

  • 效果:

    111213
    2123
    313233

  • Markdown

    HTML
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <table>
      <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
      </tr>
      <tr>
        <th colspan="2">21</th>
        <td>23</td>
      </tr>
      <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
      </tr>
    </table>
学习之路 语法
#教程 #语法 #Markdown
Markdown 语法 拓展篇
https://kiyanyang.github.io/posts/89b5ce09/
作者
杨可
发布于
2021年8月10日
许可协议