美文网首页我爱编程
简书 Markdown 语法详解

简书 Markdown 语法详解

作者: xiaofu666 | 来源:发表于2018-06-06 15:43 被阅读681次

    本文转载自白老师课堂的简书《 Markdown 语法详解》

    关于简书 Markdown

    Markdown 语法的目标: 成为一种适用于网络的书写语言。
    本文的目的:使读者轻松了解简书对 Markdown 语法的支持,了解其优点和不足。能够在选择时正确取舍,使用时得心应手。


    一、区块标记

    区块标记:是指内容独占一块,需前后换行,不和其他标记共处一行的标记。

    1. 段落

    段落:即是一段连续的文字,可包含*、空格、换行、tab等字符。两个段落之间使用空行分隔。

    示例代码

    第一自然段
    
    第二自然段
    
    

    效果

    第一自然段

    第二自然段

    注意:换行不是分段的标识,空行才是

    2. 标题

    标题:代表了文章中主题的层次,比如:文章标题使用一级标题,回目名称使用二级标题,小节使用三级标题,依次类推。主题的层次代表了文章的大纲。

    语法:Markdown 中使用连续的 n(1-6) 个 # 分别表示第 n 级标题。
    示例代码

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

    效果

    一级标题

    二级标题

    三级标题

    四级标题

    五级标题
    六级标题

    注:# 和后续内容之间应放置一个空格

    3. 列表

    列表:就是一组相关信息的集合。简书中的列表分为 有序列表无序列表

    1) 有序列表

    语法:使用 数字 + . 作为项目符号,项目符号和正式列表项目之间有一个空格。

    示例代码

    1\. 打开冰箱门
    2\. 把大象放进冰箱
    3\. 关上冰箱门
    
    

    效果

    1. 打开冰箱门
    2. 把大象放进冰箱
    3. 关上冰箱门

    2) 无序列表

    语法:使用 * 作为项目符号,项目符号和正式列表项目之间有一个空格。

    示例代码

    * 吃饭
    * 睡觉
    * 打豆豆
    
    

    效果

    • 吃饭
    • 睡觉
    • 打豆豆

    注意事项

    • *无序列表的项目符号可使用 ,+,- 效果是相同的。
    • 列表与后续内容之间需要一个空行隔开,即:列表是一个段落
    • 列表允许多层次嵌套
    • 可以在项目中包含段落,只需将段落前添加一个 tab 或 4 个空格

    4. 分割线

    语法:使用 3 个连续的 * 即可得到一个分割线

    示例代码

    ***
    
    

    效果


    5. 引用

    语法:在行头加上 > 即可。

    这里是一段引用

    注意事项:

    • 大于号 和 文字必须有一个空格
    • 可以在每行之前加 > ,也可以在段落之前加 1 个 >
    • 引用内部可以使用其他 Markdown 标记

    引用内部可以添加新的引用,只需再加一个大于号


    二、行内标记

    行内标记和其他标记共处一行。

    1. 强调文字

    1) 斜体

    语法:使用前后各 1 个 *(或_) 包含的文字是 斜体 文字
    示例代码

    *斜体*, _斜体_
    
    

    效果

    斜体, 斜体

    2) 粗体

    语法:使用前后各 2 个 *(或_) 包含的文字是 粗体 文字
    示例代码

    **粗体**,__粗体__
    
    

    效果

    粗体粗体

    3) 删除文字

    语法:使用前后各 2 个 ~ 包含的文字是删除文字
    示例代码

    ~~删除~~
    
    

    效果

    删除

    4) 粗斜体

    语法:(或_)中嵌套 (或) 或 在_(或)中嵌套**(或__)即可得到 粗斜体

    示例代码

    _**粗斜体**_, *__粗斜体__*
    **_粗斜体_**, __*粗斜体*__
    
    

    效果

    粗斜体粗斜体
    粗斜体粗斜体

    2. 图片与链接

    1) 图片:行内图片、引用图片

    1> 行内图片
    图片和图片地址写在一起。
    语法: ![图片标题](图片url)
    示例代码

    ![微信支付](https://img.haomeiwen.com/i12555132/30c4e96ea7dd4ed6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    

    效果

    微信支付

    注意事项

    在简书中,图片可以直接拖到编辑区,会自动上传图片并生成图片地址。本功能是简书提供的一大便利,值得表扬!

    2> 引用图片
    图片和图片地址分开书写。
    语法:
    ![图片标题][图片id]
    [图片id]:图片url

    示例代码:

    ![微信支付][snoopy]
    [snoopy]: https://img.haomeiwen.com/i12555132/30c4e96ea7dd4ed6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
    
    

    效果

    ![微信支付][wechat]
    [wechat]: https://img.haomeiwen.com/i12555132/30c4e96ea7dd4ed6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
    注意事项
    引用图片的 id 在文章中必须唯一

    2) 链接:行内链接、链接引用、自动链接

    1> 行内链接
    语法:[链接名称](链接地址 url "链接title")
    示例代码

     [新浪](http://www.sina.com.cn "新浪主页")
    
    

    效果

    新浪

    注意事项

    双引号中的内容是链接的 title (目前汉字显示不正确)

    2> 链接引用
    一种链接和地址分离的方式。
    语法:
    [链接名称][链接id]
    [链接id]:链接 url 地址 "链接 title"

    示例代码

    根据 [雅虎][yahoo] 的调查,希拉里将当选;根据 [谷歌][google] 的调查,川普将当选。
    
    [yahoo]: http://search.yahoo.com/ "Yahoo Search"
    [google]: http://google.com/ "Google"
    
    

    效果
    根据 雅虎 的调查,希拉里将当选;根据 谷歌 的调查,川普将当选。

    注意事项

    链接 id 可使用字母、数字、空格,但不区分大小写

    3> 自动链接
    一种简明的链接书写方式
    语法:<链接地址>

    示例代码

    <http://www.sina.com.cn>
    
    

    效果

    http://www.sina.com.cn

    3. 脚注

    为名词提供注释,注释将显示在文章末尾。
    语法:
    待解释文字[^脚注 id]
    [^脚注 id]:注释内容

    示例代码

    Hello程序[^hello]
    
    [^hello]:即:Hello, world 程序
    
    

    效果
    Hello程序[1]

    注意事项

    • 脚注 id 必须唯一
    • 无论脚注 id 如何起名,显示时一律标为数字,并且按出现顺序排列

    三、双标记

    既可作为区块标记又可作为行内标记的标记。

    1. 代码块

    1) 行内代码块

    语法:使用两个 ` 将代码包含起来

    示例代码

    在 OC 中输出 Hello, world :NSLog(@"Hello, World!");
    
    

    效果

    在 OC 中输出 Hello, world :NSLog(@"Hello, World!");

    2) 多行代码块

    语法:只需要每行都缩进 4 个空格即可,或者使用```框起来。

    示例代码 1 (行前4个空格)

    // JQuery 的 Hello, world
    $(function(){
    alert("Hello, world!")
    });

    效果(行前4个空格)

    // JQuery 的 Hello, world
    $(function(){
        alert("Hello, world!")
    });
    
    

    示例代码 2 (```)

    // JQuery 的 Hello, world
    $(function(){
    alert("Hello, world!")
    });
    

    效果 (```)

    // JQuery 的 Hello, world
    $(function(){
        alert("Hello, world!")
    });
    
    

    注意事项:

    1. 在代码区块内部,", <>,& 将会自动转换为转义字符
    2. 在代码区块内部,Markdown 标记将保持原样,即:星号()就是星号(),不被解释为特殊标记,这样就可以不能继续使用 Markdown 语法了**

    四、表格

    语法:

    1. 第一行为表头,第二行分隔表头和主体部分,第三行开始每一行为一个表格行。
    2. 列于列之间用管道符 | 隔开。表格每一行两边的管道符可省略。
    3. 第二行还可以为不同的列指定对齐方向。标题默认为居中对齐,内容默认为左对齐;在 - 左边加上 : 就是左对齐;在 - 右边加上 : 就是右对齐;在 - 两边都加上 : 就是居中对齐。

    示例代码

    姓名|语文成绩|数学成绩|总成绩
    ---|:---|:---:|---:
    喜羊羊|100|120|220
    
    

    效果

    姓名 语文成绩 数学成绩 总成绩
    喜羊羊 100 120 220

    五、其他问题

    1. Markdown 与 HTML 的关系

    1. HTML 是一种发布的格式,Markdown 是一种书写的格式。
    2. Markdown 的格式语法只涵盖纯文本可以涵盖的范围。
    3. 在 Markdown 中可直接使用 HTML 标签,但需要注意
    • 对于 HTML 区块元素――如 div、table、pre、p 等标签,必须在前后加上空行与其它内容区隔开,还要求它们的开始标签与结尾标签不能用制表符(tab)或空格来缩进
    • HTML 的行内标签——如 span、cite、del 可以在 Markdown 的段落、列表或是标题里随意使用。
    • 在 HTML 的区块标签中的 Markdown 标签是没有效果的

    2. 特殊字符的自动转换

    • 在 HTML 文件中,有两个字符需要特殊处理: < 和 &,必须使用转义字符:& lt ; 和 & amp ;
    • Markdown 中,你可以自由的书写 < 和 &,编辑器会智能的进行判断:当这些符号用于 HTML 标签中,他们将保留原型;当他们单独使用时,将会转换为字符实体。
    • 在代码块中,它们将统统被转换为字符实体,即:原样显示。

    3. Markdown 中的转义字符

    Markdown 中,如需显示有特定意义的符号,如:*,# 等,可使用 反斜杠 \ 进行转义。可对如下字符进行转义:

    *
    `
    *
    _
    {}
    ()
    #
    +
    -
    .
    !  
    
    

    六、简书尚不支持的标记和不足

    1. 用于生成目录索引的 [TOC]
    2. 用于说明文章标签的 tags
    3. 定义列表和待办事宜 Todo 列表
    4. 数学公式
    5. 各种图形:流程图、时序图、甘特图
    6. 其他技术,如:{mermaid}
    7. 区块代码中不显示行号

    1. 即:Hello, world 程序

    本文转载自白老师课堂的简书《 Markdown 语法详解》

    相关文章

      网友评论

        本文标题:简书 Markdown 语法详解

        本文链接:https://www.haomeiwen.com/subject/rdibsftx.html