Markdown基础（内含：锚点使用，使用HTML，新页面跳转，目录生成）

Github样式显示参考：点我
之前说过用word写文章，这次说说Markdown写文章（推荐）
逆天推荐使用VSCode编写

装这个插件写作更方便：

内含：锚点使用，使用HTML，新页面跳转，目录生成

启用方式：

H1_{H3(#的个数)[博客园只支持H1}3]

# H1
## H2
### H3

H1

H2

H3

斜体(一个斜体)，加粗(两个粗体)，删除线（两个~）

**加粗内容** 其他内容 *斜体内容* ~~删除内容~~

加粗内容 其他内容 斜体内容 ~~删除内容~~

引用(> or >>)、代码块(```开头结尾)、分隔符(---)、换行(空一行或者 br标签 )、转义( \ )

引用：

>引用 | 块注释
>从前有座山，山里有座庙
>>里面再来个引用

引用 | 块注释
从前有座山，山里有座庙

里面再来个引用

单个代码块：
以`（反引号）开头
以`（反引号）结尾

Python and NetCore

代码块：
以```(反引号)开头
以```(～下面的符合)结尾

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

print("以 ```python开头，```结尾")

var infos_list = new List<object>() { "C#", "JavaScript" };

var infos_list = new List<object>() { "C#", "JavaScript" };

分隔符：

---

换行：

<br/>
<br/>
<br/>

转义字符

\<br/>

<br/>

HTML代码

直接写HTML就可以解析：

<div>
    <code>
        print("mmd")
    </code>
</div>


        print("mmd")

超链接、图片、锚点跳转

超链接：

页面内打开：[超链接文字](url)
写法1：
汇总系列：[链接](https://www.cnblogs.com/dunitian/p/4822808.html#ai)

写法2：
汇总系列：<https://www.cnblogs.com/dunitian/p/4822808.html#ai>

汇总系列：https://www.cnblogs.com/dunitian/p/4822808.html#ai

新页面打开：[超链接文字](url){:target="_blank"} （有些编辑器不支持，Python Markdown可以使用）
不支持就用：<a href="xxx" target="_blank">xxx</a>

写法1：
汇总系列：[链接](https://www.cnblogs.com/dunitian/p/4822808.html#ai){:target="_blank"}

写法2：
汇总系列：<https://www.cnblogs.com/dunitian/p/4822808.html#ai>{:target="_blank"}

写法3：
汇总系列：<a href="https://www.cnblogs.com/dunitian/p/4822808.html#ai" target="_blank">链接</a>

汇总系列：https://www.cnblogs.com/dunitian/p/4822808.html#ai

图片：(感叹号别忘记了)

![alt标题](url地址)
![博客园logo](https://www.cnblogs.com/images/logo_small.gif)

博客园logo

锚点：（不能实现的就用html实现即可）

我在正文开头定义了一个：<a name="divtop"></a>
我们跳转过去：[跳转指定位置](#divtop)

跳转指定位置

表格

|xxx|xxx|
|---|---|
|xxx|xxx|

xxx	xxx
xxx	xxx

eg:

| 字母 | 发音   | 字母 | 发音        |
| ---- | ------ | ---- | ----------- |
| Aa   | [ei]   | Nn   | [en]        |
| Bb   | [bi:]  | Oo   | [əu]        |
| Cc   | [si:]  | Pp   | [pi:]       |
| Dd   | [di:]  | Qq   | [kju:]      |
| Ee   | [i:]   | Rr   | [a:]        |
| Ff   | [ef]   | Ss   | [es]        |
| Gg   | [dʒi:] | Tt   | [ti:]       |
| Hh   | [eitʃ] | Uu   | [iu:]       |
| Ii   | [ai]   | Vv   | [vi:]       |
| Jj   | [dʒei] | Ww   | ['dʌblju:]  |
| Kk   | [kei]  | Xx   | [eks]       |
| Ll   | [el]   | Yy   | [wai]       |
| Mm   | [em]   | Zz   | [zi:]/[zed] |

字母	发音	字母	发音
Aa	[ei]	Nn	[en]
Bb	[bi:]	Oo	[əu]
Cc	[si:]	Pp	[pi:]
Dd	[di:]	Qq	[kju:]
Ee	[i:]	Rr	[a:]
Ff	[ef]	Ss	[es]
Gg	[dʒi:]	Tt	[ti:]
Hh	[eitʃ]	Uu	[iu:]
Ii	[ai]	Vv	[vi:]
Jj	[dʒei]	Ww	['dʌblju:]
Kk	[kei]	Xx	[eks]
Ll	[el]	Yy	[wai]
Mm	[em]	Zz	[zi:]/[zed]

列表(无序- 有序 1.2.3. 注意空格)

- 无序列表1
    - 无序列表1.1
    - 无序列表1.2
        - 1.2.1
- 无序列表2
    1. 有序列表1
    2. 有序列表2
    3. 有序列表3
        1. 3.1
        2. 3.2
            1. 3.2.1
            2. 3.2.2
- 无序列表3

无序列表1
- 无序列表1.1
- 无序列表1.2
  - 1.2.1
无序列表2
1. 有序列表1
2. 有序列表2
3. 有序列表3
  1. 3.1
  2. 3.2
    - 3.2.1
    - 3.2.2
无序列表3

隐藏代码（推荐）

这个在Github上没问题，博客园上有点小问题

<details>
<summary>案例标题</summary>

```
隐藏的代码内容
```

</details>

案例1：求和

def sum(a,b):
    return a+b
```

</details>

---

## 目录生成就用js实现了，MarkDown的方式太累

博客园上传js文件，然后引用即可
```javascript
$(function () {
    // 生成目录索引列表
    var mainContent = $('#cnblogs_post_body');
    var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if (mainContent.length < 1)
        return;

    if (h2_list.length > 0) {
        var content = '<a name="_labelTop"></a>';
        content += '<div id="navCategory">';
        content += '<p style="font-size:18px"><b>目录</b></p>';
        content += '<ul>';
        for (var i = 0; i < h2_list.length; i++) {
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
            $(h2_list[i]).before(go_to_top);

            var h3_list = $(h2_list[i]).nextAll("h3");
            var li3_content = '';
            for (var j = 0; j < h3_list.length; j++) {
                var tmp = $(h3_list[j]).prevAll('h2').first();
                if (!tmp.is(h2_list[i]))
                    break;
                var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                $(h3_list[j]).before(li3_anchor);
                li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
            }

            var li2_content = '';
            if (li3_content.length > 0)
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
            else
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
            content += li2_content;
        }
        content += '</ul>';
        content += '</div><p>&nbsp;</p>';
        content += '<p style="font-size:18px"><b>正文</b></p>';
        if ($('#cnblogs_post_body').length != 0) {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }
    var allinfo = '<p><strong>汇总系列：<a href="https://www.cnblogs.com/dotnetcrazy/p/9160514.html" target="_blank">https://www.cnblogs.com/dotnetcrazy/p/9160514.html</a></strong></p>';
    $(mainContent[0]).prepend(allinfo);
});

关于VSCode写作的扩展

快捷键

生成目录

按F1，然后输入 ctoc

效果如下：

按F1，输入 utoc 就会更新目录，更新过一次后，你以后Ctrl+S就会自动更新目录，很方便的

这个目录在vscode、github中是可以跳转的，你如果需要在博客里面生成对应的文章目录需要配合js实现

posted @ 2018-06-14 10:56 鲲逸鹏阅读(26437) 评论(13) 编辑收藏举报

刷新页面返回顶部

逸鹏说道

一入道门深似海，万丈红尘拂袖去

Markdown基础（内含：锚点使用，使用HTML，新页面跳转，目录生成）

启用方式：

H1_{H3(#的个数)[博客园只支持H1}3]

H1

H2

H3

斜体(一个斜体)，加粗(两个粗体)，删除线（两个~）

引用(> or >>)、代码块(```开头结尾)、分隔符(---)、换行(空一行或者 br标签 )、转义( \ )

HTML代码

超链接、图片、锚点跳转

表格

列表(无序- 有序 1.2.3. 注意空格)

隐藏代码（推荐）

更多语法请参考

关于VSCode写作的扩展

快捷键

生成目录

公告

逸鹏说道

一入道门深似海，万丈红尘拂袖去

Markdown基础（内含：锚点使用，使用HTML，新页面跳转，目录生成）

启用方式：

H1H3(#的个数)[博客园只支持H13]

H1

H2

H3

斜体(一个*斜体)，加粗(两个*粗体)，删除线（两个~）

引用(> or >>)、代码块(```开头结尾)、分隔符(---)、换行(空一行 或者 br标签 )、转义( \ )

HTML代码

超链接、图片、锚点跳转

表格

列表(无序- 有序 1.2.3. 注意空格)

隐藏代码（推荐）

更多语法请参考

关于VSCode写作的扩展

快捷键

生成目录

公告

H1_{H3(#的个数)[博客园只支持H1}3]

斜体(一个斜体)，加粗(两个粗体)，删除线（两个~）

引用(> or >>)、代码块(```开头结尾)、分隔符(---)、换行(空一行或者 br标签 )、转义( \ )