Markdown

作者: 小阳哥_ | 来源:发表于2017-04-27 22:52 被阅读32次

    Markdown 是一种轻量级的标记语言,其用简单的标记语法便可达到排版的目的,其可以使我们更加专注于内容的编写,而不需过多关注排版。本文主要整理了 Markdown 中的常用的标记语法,以便自己与他人以后查用。

    段落元素

    1、段落与换行

    Markdown 中的段落指连续的一段文字,编写时段落之间用至少一个空行隔开,段落内多个空格将被视为一个空格,段首不支持缩进。

    如果想要在显示时显示多个空行,可以插入 <br/> 来实现,注意的是,插入的 <br/> 应与前后的段落中间至少空一行。

    2、标题

    Markdown 支持两种类型的标题。

    //类型 1
    这是一级标题
    ==========
    这是二级标题
    ----------
    
    //类型 2
    # 这是一级标题
    ## 这是二级标题
    ...
    ###### 这是六级标题
    

    从上面可以看出类型 1 是在标题下面插入 = 或者 - 来标识标题等级,但局限是其只能表示两个级别的标题。

    类型 2 是在标题前面插入 1 - 6 个 # ,表示 6 个等级的标题,这是比较推荐的用法。

    3、引用

    Markdown 中使用 > 来引用。我们可以在一段文字中的每行开头加上 > 来表示一段引用文字,也可以只在一段文字的开头插入一个 > 来表示,如下面的 1、2 两种方式:

    //方式 1
    > 这是一句话
    > 这是第二句话
    
    //方式 2
    > 这是一句话
    这是第二句话
    

    Markdown 支持使用不同数量的 > 表示嵌套引用。

    > 这是外层的引用
    > > 这是内层的引用
    

    4、无序列表

    无序列表使用 -+* 来作为标记。

    - 第一项
    - 第二项
    - 第三项
    

    上面的 - 可以用 +*替换。需要注意的是,- 等符号与后面的文字至少空一格空格。

    5、有序列表

    有序列表使用数字和紧挨着的点号表示。

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

    同无序列表一样,标记符号与后面的文字至少空一格空格。但编辑时的数字对显示无影响。

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

    上面的例子与前一个显示的结果完全一致,但建议编辑时按照数字顺序。

    列表

    • 有序列表和无序列表的每一项中均可嵌套其他列表;

    • 在列表项之间要插入段落时,这时需要将列表项之间的段落缩进 4 个空格;

    • 使用 1\. 来输出 1.;

    6、代码区块

    缩进 4 个空格,需要注意的是,每行代码都需要至少缩进 4 个空格,不能像段落一样采用首行标记的偷懒写法,一个代码区会一直持续到没有缩进 4 个空格的那一行。

    也可以用一对三个连续的撇号 ` 来包裹代码段。

    ```
    code
    ```
    

    有的解释器还能根据代码的语言从而给代码加上语法高亮。

    ```javascript
    function func() {}
    ```
    

    7、分割线

    使用三个及以上的 *-_来表示一个分割线,符号不能混用,符号之间可以插入多个空格。需要注意的是,使用 - 来插入分割线时需要与上一个段落至少空一行,否则 Markdown 会将上一行文字解释为二级标题。

    8、表格

    表格是 Markdown 比较复杂的一种表示。

    | Table | Col1 | Col2 |
    | ----- |:----:| ----:|
    | Row1  | 1-1  | 1-2  |
    | Row2  | 2-1  | 2-2  |
    | Row3  | 3-1  | 3-2  |
    

    上面第二行中的点代表对齐方式,分别是默认(居右)、居中、居左。


    行内元素

    9、超链接

    Markdown 中有三种方式实现超链接。

    //方式 1
    [百度](http://www.baidu.com)
    
    //方式 2
    [百度][Baidu-url]
    [Baidu-url]: http://www.baidu.com
    

    方式 1 较为常用,也可以为链接的文字加上提示文字,只要在括号中超链接加上空格后添加提示内容即可。

    [百度](http://www.baidu.com "这是提示文字")
    

    方式 2 由链接文字和链接地址组成,不同的是两者均由 [] 包裹。链接地址的格式为:

    • 方括号,里面输入链接地址;
    • 紧接着是一个冒号;
    • 冒号后面至少一个空格;
    • 链接地址;
    • 若有提示文字,空格后用引号或者括号包裹提示文字。

    下面是完整示例:

    [百度][Baidu-url]
    [Baidu-url]: http://www.baidu.com "这是提示文字"
    

    第三种方式是用 <> 来包裹 URL。

    //方式 3
    <http://www.baidu.com>
    

    10、加粗和斜体

    Markdown 使用 *_ 来表示粗体和斜体。

    //加粗
    **这是加粗文字**
    __这也是加粗文字__
    
    //斜体
    *这是斜体文字*
    _这也是斜体文字_
    

    被偶数个 *_ 包裹的文字显示加粗效果,被奇数个包裹的为倾斜效果。

    需要注意的是,*- 要成对出现,不能混合使用,也不能只出现一个。同时,标识符号要与标识的文字紧挨着,符号与符号之间、符号文字之间不能有任何空格。

    11、代码

    使用 ` (撇号) 来包裹一小段代码。

    `Hello world.`
    

    若想在代码中添加撇号,可以使用多个撇号包裹里面需要添加的撇号,但注意里面的连续的撇号数量不能超过外面的数量。

    //显示一个撇号
    `` ` ``
    //显示两个撇号
    ``` ``  ```
    

    12、图片

    图片的插入方式跟超链接前两种插入方式类似。

    //方式 1
    ![](图片 url)
    
    //方式 2
    ![如果图片不能显示,就显示这段文字][Image-url]
    [Image-url]: 图片url "这是提示文字"
    

    反斜杠 \

    我们经常需要在文章中插入一些特殊符号,而这些符号恰好是前面所讲的标识符号,可以在特殊符号前插入 \ 来直接显示符号,而不让 Markdown 来将其解释为标识符号。

    Markdown 支持以下这些符号前插入 \ 而显示其本来样子:

        \   反斜线
        `   反引号
        *   星号
        _   底线
        {}  花括号
        []  方括号
        ()  括弧
        #   井字号
        +   加号
        -   减号
        .   英文句点
        !   惊叹号
    

    拓展

    其实,市场上有很多的 Markdown 解释器,它们大都能支持上面所讲的语法,但呈现出的样式往往不一。另外,不同的解释器还能支持其他自己定义的语法,比如 Github 还能支持 emoji。下面再着重介绍 Github 支持的几个 Markdown 语法。不过需要注意的是,有些语法只能在 issue 或者 pull request 上使用,这个在后面讲每个语法时会标记(约定:“通用”表示在 Github 任何地方可以使用的语法,“特殊”表示只能在 issue 或者 pull request 上使用)。

    语法高亮(通用)

    上面说过,有的解释器是能够显示语法高亮的,Github 就可以。

    任务列表(通用)

    - [ ] task one
    - [x] task two
    

    用法跟普通列表的用法差不多,只不过在每一项文字前面加了 [ ] 或者 [x][ ] 中间有且只有一个空格,表示未完成,另一个表示已完成。

    表格(通用)

    Github 支持更简单的 table 语法。

    First Header | Second Header
    ------------ | -------------
    Content from cell 1 | Content from cell 2
    Content in the first column | Content in the second column
    

    表头与项用一排 - 分隔开,每一列用 | 分隔开。

    SHA 引用(特殊)

    每一次 commit 都会产生一个 id,用 @id 的方式可以链接到某个项目的特定的 commit。比如用 jquery/jquery@1b9575b9d14399e9426b9eacdd92b3717846c3f2 就能链接到 jquery 的一次 commit 记录上。

    issue 引用(特殊)

    #1 来引用当前 repo 的第一个 issue,也可以用 jquery/jquery#1 引用 jquery 的第一次 issue。

    @(特殊)

    @ 来提醒目标用户。比如 @CompileYouth 可以 @ 到我。

    删除符号(通用)

    用连续两个 ~ 包围的词会被加上删除符。比如 ~~This is removed~~

    Emoji(通用)

    Github 比较有意思的是可以支持 emoji。比如 :smile: 表示笑脸等等,具体可以查看 Emoji Cheat Sheet

    详细信息可以查看官方文档。最后 po 两张 Github 官方推荐的 Markdown Cheat Sheet:通用语法Github 支持语法

    工具

    • Windows 环境下,推荐 TyporaMarkdownpad(自带图床功能)
    • Mac 环境下,推荐 Typora、Mou
    • 笔记软件: 为知笔记较好的支持 markdown,且支持 Windows、Mac、web、ios、android 等各个平台
    • 当然,还有 Github

    实践

    Markdown 文件的编辑在不同编辑器中有不一样的表现,我主要介绍一下在 Atom 中使用 Markdown 的情况。

    Atom 官方自带了一个插件,叫 markdown-preview,可以在 Atom 中进行预览。当然,Atom 还有很多第三方的 Markdown 插件,我使用的是 markdown-writer,可以使我更方便地编辑 Markdown 文件,当然你可以根据自己的需要下载插件。

    在 Atom 中,其他的使用方式就不赘述了,唯一需要提一下的是插入 table。在 Markdown 中插入 table 是一件比较麻烦的事情,而在 Atom 中,可以简化操作,就是直接输入 table 然后按 Enter 键,编辑器便会自动生成 table 的模板,比自己手写便捷多了。

    拓展阅读:

    1. Markdown 语法说明

    !!!转自:https://github.com/CompileYouth/front-end-study/blob/master/tool/markdown/Markdown-Learning.md

    相关文章

      网友评论

          本文标题:Markdown

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