Markdown格式备注

发表于 2018-09-04 更新于 2019-07-24 分类于 Markdown 阅读次数：

好的文档不仅要内容精湛，更要格式优雅。

基本格式就不介绍了，主要备忘一些特殊格式。对，肯定不全面，慢慢完善嘛。。。

表格设置

<style>
    table
        width: 100%; /*表格宽度*/
        max-width: 65em; /*表格最大宽度，避免表格过宽*/
        border: 1px solid #dedede; /*表格外边框设置*/
        margin: 15px auto; /*外边距*/
        border-collapse: collapse; /*使用单一线条的边框*/
        empty-cells: show; /*单元格无内容依旧绘制边框*/
        tr:
            hover {background: #efefef;}
        td:
            height: 35px; /*统一每一行的默认高度*/
            border: 1px solid #dedede; /*内部边框样式*/
            padding: 0 10px; /*内边距*/
        th:
            white-space: nowrap; /*表头内容强制在一行显示*/
            font-weight: bold; /*加粗*/
            text-align: center !important; /*内容居中，加上 !important 避免被 Markdown 样式覆盖*/
            background: rgba(158,188,226,0.2); /*背景色*/
            nth-of-type(1){width: 5%; white-space: nowrap;}
            nth-of-type(2){width: 15%;}
            nth-of-type(3){width: 70%;}
            nth-of-type(4){width: 10%;}
    tbody
        tr:
            nth-child(2n){background: rgba(158,188,226,0.12);}
</style>

网址导航了表格样式

<style>
table th {
    font-weight: bold; /*加粗*/
    font-szie:  xx-large;
    text-align: center !important; /*内容居中，加上 !important 避免被 Markdown 样式覆盖*/
    background: #E0E0E0; /*背景色 rgba(158,188,226,0.2)*/
    white-space: nowrap; /*表头内容强制在一行显示*/
    height: 35px;
    border: 0px;
}
table tbody tr:nth-child(2n) {
    background: rgba(158,188,226,0.12);
}
table tr:hover {
    background: #efefef;
}
</style>

note 标签

官方

使用方式
{% note class_name %} Content (md partial supported) {% endnote %}
其中，class_name 可以是以下列表中的一个值：

default
primary
success
info
warning
danger

第三方

<p id="div-border-top-green">
内容
</p>

<p id="div-border-left-red">
内容
[shell tag](/tags/shell)标签
</p>

default
<div class="note default"><p>default</p></div>

primary
<div class="note primary"><p>primary</p></div>

success
<div class="note success"><p>success</p></div>

info
<div class="note info"><p>info</p></div>

warning
<div class="note warning"><p>warning</p></div>

danger
<div class="note danger"><p>danger</p></div>

danger no-icon
<div class="note danger no-icon"><p>danger no-icon</p></div>

可以收缩的内容

可以收缩的内容源码

## 标题1.1
<details>
<summary>查看详情</summary>
### 标题1.1.1
* [链接1](https://www.baidu.com)
### 标题1.1.2
* [链接1](https://www.baidu.com)
### 标题1.1.3
* [链接1](https://www.baidu.com)
</details>


## 标题1.2
<details>
<summary>查看详情</summary>
### 标题1.2.1
* [链接1](https://www.baidu.com)
### 标题1.2.1
* [链接1](https://www.baidu.com)
* [链接2](https://www.baidu.com)
* [链接3](https://www.baidu.com)
</details>


## 标题1.3
<details>
<summary>查看详情</summary>
### 标题1.3.1
* [链接1](https://www.baidu.com)
### 标题1.3.2
* [链接1](https://www.baidu.com)
* [链接2](https://www.baidu.com)
</details>