Markdown基础(内含:锚点使用,使用HTML,新页面

Github样式显示参考:点我
之前说过用word写文章,这次说说Markdown写文章(推荐)
逆天推荐使用VSCode编写
图片 1

[TOC]

装这个插件写作更方便:
图片 2

Markdown
: 是一种电子邮件风格的标记语言,通常为程序员群体所使用。同时,Markdown支持嵌入html标签。

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

使用Markdown的好处

启用方式:

图片 3

  1. 兼顾了[什么人都能打开]和[样式],由于是纯文本,Markdown文稿也不会因为未来的软件升级而产生不同版本之间的兼容问题和样式预览不一致的问题。
  2. 让你专注于写作的文字而不是排版。
  3. Markdown转HTML非常方便,HTML是整个万维网(WEB)的标记语言,更重要的是,它也是目前主流电子书格式所用的标记语言,采用Markdown进行文章的编辑,对于日后的文件转换工作也大有裨益。
  4. Markdown的标记语法有极好的可读性。

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

# H1
## H2
### H3

兼容HTML

H1

  1. Markdown语法的目标是成为一种适用于网络的书写语言,Markdown不是想要取代HTML。
  2. Markdown的理念是,能让文档更容易读、写、改。HTML是一种发布的格式,Markdown是一种书写的格式,Markdown的格式语法只涵盖纯文本可以涵盖的范围。
  3. 不在Markdown涵盖范围之内的标签,都可以直接在文档里面用HTML撰写。不需要额外标注这是HTML或是Markdown,只要直接加标签即可。
  4. 在HTML区块标签间的Markdown格式语法将不会被处理。
  5. HTML的行内标签如`、可以在Markdown的段落、列表或是标题里随意使用。如果比较喜欢HTML的` 标签,可以直接使用这些标签,而不用Markdown提供的链接或是图像标签语法。

H2

Markdown的常用语法介绍:

H3

标题

Markdown标题标记支持两种形式,常用的#标记形式和=-标记形式(注意:=-标记形式,只支持第一级和第二级标题,后续标题不再支持)。

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

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

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

标题形式一

在需要设置为标题的文字前面加上#号并空格,Markdown的#标记形式支持一级标题、二级标题、三级标题、四级标题、五级标题、六级标题,总共六级,标题字号相应降低。

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

显示效果:<br />
# 一级标题<br />
## 二级标题<br />
### 三级标题<br />
#### 四级标题<br />
##### 五级标题<br />
###### 六级标题<br />

引用(> 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/>

标记形式二(只支持第一级和第二级标题)

标题文字下一行加上任意个=表示第一级标题,加上任意个-表示第二级标题。

# 一级标题
一级标题
=

## 二级标题
二级标题
-

显示效果:

# 一级标题
一级标题
=

## 二级标题
二级标题
-

由于用了[TOC]标记编辑器会把所有标题写到目录大纲中,在这里写的演示标题也会列进去,所以就不演示了。

注:# 和「一级标题」之间建议保留一个字符的空格,这是最标准的Markdown写法。

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)

图片 4

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

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

跳转指定位置

无序列表

列表格式也很常用,在Markdown中,你只需要在列表文字前面加上+-*并空格即可。

+ 文本1
+ 文本2
+ 文本3

显示效果:

  • 文本1
  • 文本2
  • 文本3
- 文本1
- 文本2
- 文本2

显示效果:

  • 文本1
  • 文本2
  • 文本2
* 文本1
* 文本2
* 文本3

显示效果:

  • 文本1
  • 文本2
  • 文本3

表格

|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. 7. 5.并与文字之间有一个空格即可。

1. 文本1
2. 文本1
3. 文本1

显示效果:

  1. 文本1
  2. 文本1
  3. 文本1
1. 文本1
1. 文本1
1. 文本1

显示效果:

  1. 文本1
  2. 文本1
  3. 文本1
1. 文本1
7. 文本1
5. 文本1

显示效果:

  1. 文本1
  2. 文本1
  3. 文本1

注:

  1. -1.和文本之间要保留一个字符的空格,这是最标准的Markdown写法。
  2. 有序列表,会使用第一行的数字作为开始项,如:7.在第一行,默认就以7作为序列的开始。

列表(无序- 有序 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
定义型列表

定义型列表
: 定义型列表由名词和解释组成,第一行写上定义,紧跟一行写上解释。解释的写法:后面紧跟一个缩进[Tab]。

Markdown
:   Markdown是轻量级文本标记语言,可以转换成Html、Pdf等格式。   // 左侧有一个可见的冒号和四个不可见的空格(`:` `Tab`)

文字代码块
:   如下方式是对代码块的定义      // 左侧有一个可见的冒号和四个不可见的空格(`:` `Tab`)

        文字代码块      // 左侧有八个不可见的空格,即两个`Tab`键。
        public static void main(String[] args){
            System.out.println("Hello World!!!");
        }

显示效果:

Markdown
: Markdown是轻量级文本标记语言,可以转换成Html、Pdf等格式。 // 左侧有一个可见的冒号和四个不可见的空格(: Tab

文字代码块
: 如下方式是对代码块的定义 // 左侧有一个可见的冒号和四个不可见的空格(: Tab

    文字代码块      // 左侧有八个不可见的空格,即两个`Tab`键。
    public static void main(String[] args){
        System.out.println("Hello World!!!");
    }

编码代码块

public static void main(String[] args){
    System.out.println("Hello World!!!");
}

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

博客园上传js文件,然后引用即可

$(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);
});
列表缩进

列表项目标记通常是放在最左边,但是其实也可以缩进,最多 3 个空格,项目标记后面则一定要接着至少一个空格或制表符(Tab)。

更多语法请参考

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

包含段落的列表

列表项目可以包含多个段落,每个项目下的段落都必须缩进 4 个空格或是 1 个制表符。

关于VSCode写作的扩展

超链接

快捷键

图片 5

普通超链接

在Markdown中,插入链接不需要用其他按钮,你只需要使用[显示文本](链接地址)或者[显示文本](链接地址 "鼠标悬浮文字")这样的语法即可。

Welcome to [Rambo科技无限空间](http://www.rambo123.com)
Welcome to [Rambo科技无限空间](http://www.rambo123.com "Rambo科技无限空间")

显示效果:

Welcome to Rambo科技无限空间 <br />
Welcome to Rambo科技无限空间

生成目录

按F1,然后输入 ctoc
图片 6

效果如下:
图片 7

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

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

自动超链接

Markdown支持以比较简短的自动链接形式来处理网址和电子邮件信箱,只要是用<>包起来, Markdown就会自动把它转成链接。一般网址的链接文字就和链接地址一样。

<http://www.rambo123.com>
<adress@rambo1203@sina.com>

显示效果:

http://www.rambo123.com <br />
rambo1203@sina.com

参考式超链接

参考式超链接一般用在学术论文上面,或者另一种情况,如果某一个链接在文章中多处使用,那么使用引用 的方式创建链接将非常好,它可以让你对链接进行统一的管理。

语法说明:

  1. 参考式链接分为两部分,文中的写法 [链接文字][链接标记],在文本的任意位置添加[链接标记]:链接地址 “链接标题”,链接地址与链接标题中间有一个空格。

  2. 如果链接文字本身可以做为链接标记,你也可以写成[链接文字][]
    [链接文字]:链接地址的形式,见示例的最后一行。

代码片段:

我经常去的几个网站[Google][1]、[Leanote][2]以及[自己的网站][3]
[Leanote 笔记][2]是一个不错的[网站][]。

[1]:http://www.google.com "Google"
[2]:http://www.leanote.com "Leanote"
[3]:http:/www.rambo123.com "Rambo科技无限空间"
[网站]:http://blog.leanote.com/freewalk

显示效果:

我经常去的几个网站GoogleLeanote以及自己的网站
Leanote 笔记是一个不错的网站

本文由金沙官网线上发布于操作系统,转载请注明出处:Markdown基础(内含:锚点使用,使用HTML,新页面

您可能还会对下面的文章感兴趣: