Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)
Github样式显示参考:点我
之前说过用word写文章,这次说说Markdown写文章(推荐)
逆天推荐使用VSCode编写
装这个插件写作更方便:
内含:锚点使用,使用HTML,新页面跳转,目录生成
启用方式:
H1H3(#的个数)[博客园只支持H13]
# 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
汇总系列: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{:target="_blank"}
汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai{:target="_blank"}
汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai
图片:(感叹号别忘记了)
![alt标题](url地址)
![博客园logo](https://www.cnblogs.com/images/logo_small.gif)
锚点:(不能实现的就用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:] | [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
- 有序列表2
- 有序列表3
- 3.1
- 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> </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);
});
更多语法请参考
https://daringfireball.net/projects/markdown/syntax
关于VSCode写作的扩展
快捷键
生成目录
按F1,然后输入 ctoc
效果如下:
按F1,输入 utoc 就会更新目录,更新过一次后,你以后Ctrl+S就会自动更新目录,很方便的
这个目录在vscode、github中是可以跳转的,你如果需要在博客里面生成对应的文章目录需要配合js实现
Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)的更多相关文章
- html中锚点的应用【本页面跳转】
设置锚点 <a name="top"></a> 同页跳转 <a href="#top">返回顶部</a> 不同页 ...
- MarkDown基础使用教程-by sixleaves
以下是个人浏览文档,结合自己平时使用所总结, 和引用国外关于如何使用markdown的教程.如有不足,还请海涵,期待于您的交流.我觉得使用markdown书写挺好的! 工具下载,可以去下载gitboo ...
- markdown 基础语法
markdown 基础 你好,我是markdown文档 介绍 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 说的简单一点,mar ...
- MarkDown基础语法大全
一.MarkDown是什么? Markdown是一种轻量级的「标记语言」,创始人为约翰·格鲁伯,用简洁的语法代替排版,目前被越来越多的知识工作者.写作爱好者.程序员或研究员广泛使用.其常用的标记符号不 ...
- .md(markdown)基础语法
markdown基础语法笔记,方便翻看. 1. 标题 标题有3中写法,可混写: (1)# ***,前面#,后面文字,注意,#与文字间有空格,1-6个#分别表示h1-h6,h1.h2下有横线 (2)== ...
- markdown基础使用技巧
markdown基础使用技巧 通过``创建代码形式,不同形式可以叠加(比如:斜体+加粗) 块级元素 通过return/Enter实现切换段落/创建段落 通过shift+return/enter 实现换 ...
- Markdown基础使用方法
Markdown基础使用方法 标题的几种用法 * 选中标题(Ctrl+1~Crtl+6),分别为标题1-6.* #+空格+内容 为一级标题##+空格+内容为二级标题:以此类推. 字体快捷键及使用方法 ...
- Markdown基础语法规则
你好,世界.粗体,斜体,测试,弟弟,H2O 论文题目 一级标题 二级标题 三级标题 1 2 3 点击此链接打开网址 公式 \(y = \sin x\) \[ y = \frac{1}{x} \] dd ...
- markdown生成的a标签如何在新页面打开
原始的超链接语法这样写:[超链接的名字](url) 在新窗口中打开:[超链接的名字](url?_blank) 在本窗口中打开:[超链接的名字](url?_self)默认是在本窗口中打开 但上面的说法貌 ...
随机推荐
- Jquery 选择器 特殊字符 转义字符
1.Jquery 选择器 id包含特殊字符,加双斜线 \\ 例 <input type="text" id="dbo_HouseInfo.HouseResour ...
- vue实现双向数据绑定之Object.defineProperty()篇
前言 vue.js中使用ES5的Object.defineProperty()实现数据的双向绑定 Object.defineProperty()原理 Object.defineProperty()可以 ...
- Vue+min-width实现最大两栏布局
<style> .fitting-Modal-details{ overflow: hidden; } .detailsContent{ float: left; min-width: 5 ...
- (C/C++)区别:数组与指针,指针与引用
1.数组跟指针的区别 数组要么在静态存储区被创建(如全局数组),要么在栈上被创建.数组名对应着(而不是指向)一块内存,其地址与容量在生命期内保持不变,只有数组的内容可以改变. 指针可以随时指向任意类型 ...
- Java多线程4:Thread中的静态方法
一.Thread类中的静态方法 Thread类中的静态方法是通过Thread.方法名来调用的,那么问题来了,这个Thread指的是哪个Thread,是所在位置对应的那个Thread嘛?通过下面的例子可 ...
- EmpireCMS的使用
1.下载安装empirecms 下载完成后解压将upload目录整体上传到服务器,并更名为empirecms_test 更改目录文件的权限: chmod -R 777 empirecms_test 配 ...
- Delphi 限制Edit输入 多个例子
procedure TForm1.Edit1KeyPress(Sender: TObject; var Key: Char); begin if not (key in [ '.',#8]) then ...
- DotNetty 实现 Modbus TCP 系列 (三) Codecs & Handler
本文已收录至:开源 DotNetty 实现的 Modbus TCP/IP 协议 DotNetty 作为一个半成品,我们不需要关注细节的实现,只需要关注自己的业务即可,所以最主要的就是处理 Codecs ...
- codeforces401C
Team CodeForces - 401C Now it's time of Olympiads. Vanya and Egor decided to make his own team to ta ...
- fastjson 操作
1.String 转 bean String addition = ...; CoffeeFormula formula = JSON.parseObject(addition, new TypeRe ...