Github样式显示参考:点我

之前说过用word写文章,这次说说Markdown写文章(推荐)

逆天推荐使用VSCode编写

装这个插件写作更方便:

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

启用方式:

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

  1. # H1
  2. ## H2
  3. ### H3

H1

H2

H3

斜体(一个*斜体),加粗(两个*粗体),删除线(两个~)

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

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

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

引用:

  1. >引用 | 块注释
  2. >从前有座山,山里有座庙
  3. >>里面再来个引用

引用 | 块注释

从前有座山,山里有座庙

里面再来个引用

单个代码块:

以`(反引号)开头

以`(反引号)结尾

Python and NetCore

代码块:

以```(反引号)开头

以```(~下面的符合)结尾

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

  1. print("以 ```python开头,```结尾")
  1. var infos_list = new List<object>() { "C#", "JavaScript" };
  1. var infos_list = new List<object>() { "C#", "JavaScript" };

分隔符:

  1. ---

换行:

  1. <br/>
  2. <br/>
  3. <br/>

转义字符

  1. \<br/>

<br/>

HTML代码

直接写HTML就可以解析:

  1. <div>
  2. <code>
  3. print("mmd")
  4. </code>
  5. </div>

print("mmd")

超链接、图片、锚点跳转

超链接:

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

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

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


  1. 新页面打开:[超链接文字](url){:target="_blank"} (有些编辑器不支持,Python Markdown可以使用)
  2. 不支持就用:<a href="xxx" target="_blank">xxx</a>
  3. 写法1
  4. 汇总系列:[链接](https://www.cnblogs.com/dunitian/p/4822808.html#ai){:target="_blank"}
  5. 写法2
  6. 汇总系列:<https://www.cnblogs.com/dunitian/p/4822808.html#ai>{:target="_blank"}
  7. 写法3
  8. 汇总系列:<a href="https://www.cnblogs.com/dunitian/p/4822808.html#ai" target="_blank">链接</a>

汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai{:target="_blank"}

汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai{:target="_blank"}

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


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

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

锚点:(不能实现的就用html实现即可)

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

跳转指定位置

表格

  1. |xxx|xxx|
  2. |---|---|
  3. |xxx|xxx|
xxx xxx
xxx xxx

eg:

  1. | 字母 | 发音 | 字母 | 发音 |
  2. | ---- | ------ | ---- | ----------- |
  3. | Aa | [ei] | Nn | [en] |
  4. | Bb | [bi:] | Oo | u] |
  5. | Cc | [si:] | Pp | [pi:] |
  6. | Dd | [di:] | Qq | [kju:] |
  7. | Ee | [i:] | Rr | [a:] |
  8. | Ff | [ef] | Ss | [es] |
  9. | Gg | [dʒi:] | Tt | [ti:] |
  10. | Hh | [eitʃ] | Uu | [iu:] |
  11. | Ii | [ai] | Vv | [vi:] |
  12. | Jj | [dʒei] | Ww | ['dʌblju:] |
  13. | Kk | [kei] | Xx | [eks] |
  14. | Ll | [el] | Yy | [wai] |
  15. | 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
  2. - 无序列表1.1
  3. - 无序列表1.2
  4. - 1.2.1
  5. - 无序列表2
  6. 1. 有序列表1
  7. 2. 有序列表2
  8. 3. 有序列表3
  9. 1. 3.1
  10. 2. 3.2
  11. 1. 3.2.1
  12. 2. 3.2.2
  13. - 无序列表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上没问题,博客园上有点小问题

  1. <details>
  2. <summary>案例标题</summary>
  3. ​```
  4. 隐藏的代码内容
  5. ​```
  6. </details>
案例1:求和
  1. def sum(a,b):
  2. return a+b
  3. ```
  4. </details>
  5. ---
  6. ## 目录生成就用js实现了,MarkDown的方式太累
  7. 博客园上传js文件,然后引用即可
  8. ```javascript
  9. $(function () {
  10. // 生成目录索引列表
  11. var mainContent = $('#cnblogs_post_body');
  12. var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
  13. if (mainContent.length < 1)
  14. return;
  15. if (h2_list.length > 0) {
  16. var content = '<a name="_labelTop"></a>';
  17. content += '<div id="navCategory">';
  18. content += '<p style="font-size:18px"><b>目录</b></p>';
  19. content += '<ul>';
  20. for (var i = 0; i < h2_list.length; i++) {
  21. var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
  22. $(h2_list[i]).before(go_to_top);
  23. var h3_list = $(h2_list[i]).nextAll("h3");
  24. var li3_content = '';
  25. for (var j = 0; j < h3_list.length; j++) {
  26. var tmp = $(h3_list[j]).prevAll('h2').first();
  27. if (!tmp.is(h2_list[i]))
  28. break;
  29. var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
  30. $(h3_list[j]).before(li3_anchor);
  31. li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
  32. }
  33. var li2_content = '';
  34. if (li3_content.length > 0)
  35. li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
  36. else
  37. li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
  38. content += li2_content;
  39. }
  40. content += '</ul>';
  41. content += '</div><p>&nbsp;</p>';
  42. content += '<p style="font-size:18px"><b>正文</b></p>';
  43. if ($('#cnblogs_post_body').length != 0) {
  44. $($('#cnblogs_post_body')[0]).prepend(content);
  45. }
  46. }
  47. 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>';
  48. $(mainContent[0]).prepend(allinfo);
  49. });

更多语法请参考

https://daringfireball.net/projects/markdown/syntax

关于VSCode写作的扩展

快捷键

生成目录

按F1,然后输入 ctoc

效果如下:

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

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

Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)的更多相关文章

  1. html中锚点的应用【本页面跳转】

    设置锚点 <a name="top"></a> 同页跳转 <a href="#top">返回顶部</a> 不同页 ...

  2. MarkDown基础使用教程-by sixleaves

    以下是个人浏览文档,结合自己平时使用所总结, 和引用国外关于如何使用markdown的教程.如有不足,还请海涵,期待于您的交流.我觉得使用markdown书写挺好的! 工具下载,可以去下载gitboo ...

  3. markdown 基础语法

    markdown 基础 你好,我是markdown文档 介绍 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 说的简单一点,mar ...

  4. MarkDown基础语法大全

    一.MarkDown是什么? Markdown是一种轻量级的「标记语言」,创始人为约翰·格鲁伯,用简洁的语法代替排版,目前被越来越多的知识工作者.写作爱好者.程序员或研究员广泛使用.其常用的标记符号不 ...

  5. .md(markdown)基础语法

    markdown基础语法笔记,方便翻看. 1. 标题 标题有3中写法,可混写: (1)# ***,前面#,后面文字,注意,#与文字间有空格,1-6个#分别表示h1-h6,h1.h2下有横线 (2)== ...

  6. markdown基础使用技巧

    markdown基础使用技巧 通过``创建代码形式,不同形式可以叠加(比如:斜体+加粗) 块级元素 通过return/Enter实现切换段落/创建段落 通过shift+return/enter 实现换 ...

  7. Markdown基础使用方法

    Markdown基础使用方法 标题的几种用法 * 选中标题(Ctrl+1~Crtl+6),分别为标题1-6.* #+空格+内容 为一级标题##+空格+内容为二级标题:以此类推. 字体快捷键及使用方法 ...

  8. Markdown基础语法规则

    你好,世界.粗体,斜体,测试,弟弟,H2O 论文题目 一级标题 二级标题 三级标题 1 2 3 点击此链接打开网址 公式 \(y = \sin x\) \[ y = \frac{1}{x} \] dd ...

  9. markdown生成的a标签如何在新页面打开

    原始的超链接语法这样写:[超链接的名字](url) 在新窗口中打开:[超链接的名字](url?_blank) 在本窗口中打开:[超链接的名字](url?_self)默认是在本窗口中打开 但上面的说法貌 ...

随机推荐

  1. angularjs4+ionic3集成搭建

    1:安装一下cnpm用淘宝镜像安装npm install -g cnpm --registry=https://registry.npm.taobao.org 2:使用 cnpm命令安装(全局安装 A ...

  2. uname -r查询版本不是安装的版本的问题

    uname -r 查出来的版本与/lib/modules下面的内核版本不匹配.啥原因? 第一步,先strace uname -r看看这个uname -r到底从哪里获取的版本. strace没有看出来 ...

  3. SQL Server2012中如何通过bak文件还原SQL Server2012数据库

    1 登陆完数据库后,不要新建数据库,直接点击“数据库”然后右击"还原数据库". 2 在"源"选项中选择"设备". 3 选择相应的bak文件并 ...

  4. 生成统计数据并导出Excel

    需求:看如下表格的统计需求 生产调度中心部门需要从IT技术部门得到这些统计数据 步骤: (1)获取所有的子公司列表 (2)遍历所有的子公司,获取每个子公司的库存信息 (3)遍历所有的库存信息,并对库存 ...

  5. RestTemplate proxy 设置方式

    RestTemplate restTemplate = new RestTemplate(new SimpleClientHttpRequestFactory() {{ setProxy(new ja ...

  6. css伪元素之before和after

    css里面的伪元素主要是用来给选择器设置特殊效果.根据常用性,记录before和after. “:before”伪元素用来在元素的内容前面添加新的元素.比如标题前面会有一个小方块,就可以通过‘ :be ...

  7. Linux下4个查找命令which、whereis、locate、find的总结

    (1)which   [-a]    cmdname1 cmdname2 ...... 作用:locate a command,从环境变量PATH中,定位/返回与指定名字相匹配的可执行文件所在的路径 ...

  8. henrylee2cn简单的rpc服务

    server 端package controllers import ( "github.com/henrylee2cn/teleport" "model/system& ...

  9. BZOJ3223文艺平衡树——非旋转treap

    此为平衡树系列第二道:文艺平衡树您需要写一种数据结构,来维护一个有序数列,其中需要提供以下操作: 翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 4 1 ...

  10. 轮询、长轮询、websock

    引入 Web端即时通讯技术:即时通讯技术简单的说就是实现这样一种功能:服务器端可以即时地将数据的更新或变化反应到客户端,例如消息即时推送等功能都是通过这种技术实现的.但是在Web中,由于浏览器的限制, ...