markdown基本语法.md

一、基本用法

1.目录

1.1 TOC

在段落中填写 [TOC] 以显示全文内容的目录结构。

效果参见上方的目录。不过github上并不支持,只在一些主流的社区和博客支持。

1.2 doctoc 和i5ting_toc

使用node模块doctoc和i5ting_toc。
doctoc 可以在markdown文件开头生成目录。也可以使用i5ting_toc把markdown编译成带有toc目录的html文件。

用法:
全局安装i5ting_toc

npm install -g i5ting_toc

在要转换的md文件根目录下,使用以下命令:

i5ting_toc -f <文件名>.md -o

-f参数,如果没有填写,默认使用README.md

运行成功之后则在当前目录下生成一个preview文件夹,里面就是转换后的HTML文件。  

其他常见的命令参数如下:

-h, –help             output usage information   
-V, –version          output the version number   
-f, –file [filename]  default is README.md    
-o, –open             open in browser   
-v, –verbose          打印详细日志  

2.标题

两种形式:

2.1使用=-标记一级和二级标题。

一级标题
=========
二级标题
---------

效果:

一级标题

二级标题

2.2使用#,可表示1-6级标题。

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

效果:

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

注意,只有六级

3.段落

3.1普通段落

段落是由一个或多个连续的文本行组成,段落的前后要有空行,空行是指没有文字内容。普通段落不该用空格或制表符来缩进。

若想在段内强制换行的方式是使用 两个以上 空格加上回车(引用中换行省略回车)。效果相当于在行尾添加<br>标签。

效果:

在逃去如飞的日子里,在千门万户的世界里的我能做些什么呢?只有徘徊罢了,只有匆匆罢了;在八千多日的匆匆里,除徘徊外,又剩些什么呢?过去的日子如轻烟,被微风吹散了,如薄雾,被初阳蒸融了;我留着些什么痕迹呢?我何曾留着像游丝样的痕迹呢?我赤裸裸来到这世界,转眼间也将赤裸裸的回去罢?但不能平的,为什么偏要白白走这一遭啊?

3.2 代码区块

前后要有空行

并且缩进 4个空格 或是 1个制表符 就可以了。

效果相当于把文字放进<pre>标签内:

我不去想,是否能够成功。既然选择了远方,便只顾风雨兼程。我不去想能否赢得爱情,既然钟情于玫瑰,就勇敢的吐露真诚。我不去想身后会不会袭来寒风冷雨,既然目标是地平线,留给世界的只能是背影。我不去想,未来是平坦还是泥泞,只要热爱生命,一切,都在意料之中。

4.代码

4.1 单行代码

单行代码使用一对反引号`function`将代码包起来即可。效果同写在<code>标签内。

4.2 多行代码

如同上面提到的,我们可以将代码放进 代码区块 内。不过显然我们有更好的选择:

对代码块的 使用三个反引号[ ``` ] +[ 语言名称]开始,比如java,javascript等标记该部分代码的类型,并且用[```]结束。

```javascript

var quickSort = function(arr) {
  if (arr.length <= 1) { return arr; }
  var pivotIndex = Math.floor(arr.length / 2);
  var pivot = arr.splice(pivotIndex, 1)[0];
  var left = [];
  var right = [];
  for (var i = 0; i < arr.length; i++){
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
  return quickSort(left).concat([pivot], quickSort(right));
};
```
在页面展现的时候就可以高亮显示关键字了:

    var quickSort = function(arr) {
      if (arr.length <= 1) { return arr; }
      var pivotIndex = Math.floor(arr.length / 2);
      var pivot = arr.splice(pivotIndex, 1)[0];
      var left = [];
      var right = [];
      for (var i = 0; i < arr.length; i++){
        if (arr[i] < pivot) {
          left.push(arr[i]);
        } else {
          right.push(arr[i]);
        }
      }
      return quickSort(left).concat([pivot],quickSort(right));
    };

markdown支持代码高亮的语言类型很多,基本上主流的编程语言都在其支持范围。所以你可以放心的使用。

5.区块引用及嵌套

Markdown 标记区块引用是使用类似 email 中用 > 的引用方式。
在段落的每行或者只在第一行使用符号>,还可使用多个嵌套引用,无数量限制,如:

> 第一层
>> 第二层
>>> 第三层

效果:

第一层

第二层

第三层

6.强调

在强调内容两侧分别加上*或者_,如:

*斜体*,_斜体_
**粗体**,__粗体__
***斜体加粗*** ,___斜体加粗___
~~删除~~

效果:

斜体斜体
粗体粗体
斜体加粗斜体加粗
删除

7.锚点和页内跳转

如果使用markdown写的文档内容很多,我们使用页内跳转。虽然我们已经借助第三方模块根据标题定位。但锚点让我们更加灵活,有了它,我们就可以更加自由的实现页内跳转了。

首先,我们自定义一个锚点。例如:

<div id=“anchor1”>

接着有两种方式实现定位到上面的锚点:

7.1markdown的方法:

[名称](#id)

注意,id必填,名称选填。

7.2html的方法:

<a href=”#id”>名称

方法一的效果:
anchor1

方法二的效果:
anchor1

8.外部链接

链接可以由两种形式生成:行内式参考式
行内式

[百度](https://baidu.com “百度”)。

[ ]中为链接名。( )中是链接的的地址。" "中的是链接的标题,当鼠标移到链接上时显示的内容。

效果:

百度

注意 如果想要在新页面中打开的话,最好用a标签代替。这样兼容性比较好。

百度

参考式

[链接一][1]
[链接二][2]

[1]:https://baidu.com “百度”
[2]:https://taobao.com “淘宝”

效果:

链接一
链接二

9.图片

添加图片的形式和链接相似,只需在链接的基础上前方加一个
![Aaron Swartz](https://github.com/younghz/Markdown/raw/master/resource/Aaron_Swartz.jpg\ “Aaron Swartz”)
当图片加载失败时会显示[ ]中的内容。( )中是图片资源的的地址。" "中的是图片的标题,当鼠标移到图片上时显示的内容。

如果想更改图片的大小和位置:

  1. 嵌入HTML的方式:
<img src="./xxx.png" width = "300" height = "200" alt="图片名称" align=center />

如果需要居中的话只要在外面包围div标签即可。

<div  align="center">    
  ...
</div>

下面两种方法的兼容性不好

  1. 直接在图片后面加上对应的CSS样式即可。
    ![img](url){:class=“responsive”}
    ![img](url){:height=“50%” width=“50%”}
    ![img](url){:height=“100px” width=“100px”}

  2. 使用支持图片大小更改操作的 Mou 编辑器

10.列表

10.1无序列表

使用·+、或-标记无序列表,如:

-(+*) 第一项
-(+*) 第二项
- (+*)第三项

注意:标记后面最少有一个_空格_或_制表符_。若不在引用区块中,必须和前方段落之间存在空行。

示例:
+ 第一项
+ 第二项
+ 第三项

效果:

  • 第一项
  • 第二项
  • 第三项

10.2有序列表

有序列表的标记方式是“数字+.”,如:

1.  第一项
2.  第二项
3.  第三项

"."跟内容之间要有空格。

有空格的效果:

  1. 第一项
  2. 第二项
  3. 第三项

没空格的效果:

1.第一项
2.第二项
3.第三项

11.自动链接

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

<http://example.com/>

效果:

http://example.com/

12.注脚

  1. 加注:在需要添加注脚的文字后加上脚注名字[^注脚名字]。
  2. 添加脚注:然后在文本的任意位置“[^注脚名字]: + 内容 ”。
    (注前必须有对应的脚注名字。不论你将注脚写在哪里,它始终会被自动归类到文章的最后。)

自题小像
灵台无计逃神矢,风雨如磐暗故园。
寄意寒星[^1]荃不察,我以我血荐轩辕。

[^1]:寒星:宋玉《九辩》:“愿寄言夫流星兮,”荃不察:屈原《离骚》:“荃不察余之衷情兮。”

效果见此处和w文末:

自题小像
灵台无计逃神矢,风雨如磐暗故园。
寄意寒星1荃不察,我以我血荐轩辕。

13.反斜杠

转义符 。可以使有特殊作用的markdown符号转化为普通符号在文档中显示出来。

14.空格和缩进

在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加。
HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格&nbsp;是常规空格的宽度,可运行于所有主流浏览器。其他几种空格在不同浏览器中宽度各异。

比较:(为了便于观察加了中括号)
[ ]&emsp;
[ ]&ensp;
[ ]&nbsp;
[ ]&thinsp;
[‌]&zwnj;
[‍]&zwj;

&nbsp;“不换行空格”,全称No-Break Space。这是我们使用最多的空格,也就是按下space键产生的空格。
缩进:1/2字符,1/4中文字符。

&ensp;“半角空格”,全称是En Space,en是字体排印学的计量单位,为em宽度的一半。
缩进:1字符,1/2中文字符。

&emsp;“全角空格”,全称是Em Space,em是字体排印学的计量单位。
缩进:2字符,1中文字符。

&thinsp;“窄空格”,全称是Thin Space。占据的宽度是em之六分之一宽。

&zwnj;“零宽不连字”,全称是Zero Width Non Joiner,简称“ZWNJ”,是一个不打印字符,放在电子文本的两个字符之间,抑制本来会发生的连字,而是以这两个字符原本的字形来绘制。

&zwj;“零宽连字”,全称是Zero Width Joiner,简称“ZWJ”,是一个不打印字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,使得这两个本不会发生连字的字符产生了连字效果。

注意,空格和&nbsp;可以叠加使用:
&nbsp; 之前和之后加一个空格也会显示空格。

15.分割线

分割线最常使用就是 三个或以上 *-_


___
***
显示效果是一样的:


16.表格

\|表头\|表头\|表头\|  
\|-----\|:----:|----:|  
|内容|内容|内容|  
内容|内容|内容  

效果如下:

表头 表头 表头
内容 内容 内容
内容 内容 内容

第一行定义表头。

第二行分割表头和定义格式。

  • -有一个就行,为了对齐,多加了,无作用。
  • 文字默认居左。
  • -两边加:表示文字居中。
  • -右边加:表示文字居右。
  • 外层两边的 | 可省略。

以下行填写表格中的内容。

17.公式

见这篇文章:https://blog.csdn.net/testcs_dn/article/details/44229085

二、或许你会感兴趣

markdown是什么

    之所以把markdown写在后面,是因为既然你有兴趣了解它。肯定是对它有所了解。官方的介绍到处可以搜得到。但我仍然想整理一下,以至于不让这篇文章显得没那么单薄。
    markdown是一种纯文本格式的标记语言。它可以和HTML完美融合,也可以将它转化为HTML,因此也有人它是HTML的远方亲戚。
    markdown的应用相当普遍,如果你想写博客,那么学会用markdown将会是你最好的第一步。虽然有很多主流博客网站都有着自己不错的markdown编辑器,能够帮助我们不用记住它的语法也能编辑出好看的markdown文本,但如果你想随心所欲的自己编写能够兼容各个博客网站甚至自己的博客网站的markdown。那么你就不应该错过markdown的学习。

Aaron Swartz

    提到markdown就不得不提它的创造者Aaron Swartz。这里面的故事足够传奇和精彩。相信你一定有兴趣去了解。

  1. 寒星:宋玉《九辩》:“愿寄言夫流星兮,”荃不察:屈原《离骚》:“荃不察余之衷情兮。” ↩︎

猜你喜欢

转载自blog.csdn.net/qq_39852145/article/details/82964209