美文网首页
Markdown学习之二基础语法

Markdown学习之二基础语法

作者: 何其甚 | 来源:发表于2020-07-21 16:19 被阅读0次

    Markdown学习之二基础语法

    语法基本规则

    1. Markdown语法完全由标点符号组成
    2. 语法标点符号与内容之间要有空格
    3. Markdown中可直接使用html标签

    编辑器

    支持Markdown的编辑器非常多,搜一下会出来很多,Atom、MarkdownPan2、Typora、Vscode等等,选一个自己喜欢的就可以了,毕竟我们是用它来快速排版编写内容用的,只要快速了解一下基础语法,就可以开始我们的工作。

    本文编写使用的编辑器是Typora,之前使用MarkdownPan2但是它突然不能渲染页面于是放弃。

    写作本文时,未测试其他编辑器对基础语法的支持以及解析结果是否相同,也未整理各编辑器在基础语法之上另开发的额外功能。了解各编辑器的额外功能请参考各自的文档。

    基础语法

    最基础的语法整理自创始人约翰·格鲁伯发布的内容,参考地址:https://daringfireball.net/projects/markdown/syntax

    块元素 block elements

    标题 Headers

    标题有两种格式,一种是Setext,一种是atx。

    Setext,是用至少两个等号(=)在文字下面一行,标记一级标题,等价一个#;用至少两个减号(-)在文字下面一行,标记二级标题,等价两个#。

    注:有的编辑器一个=号能正常显示,有的不行,为了保险起见至少两个。

    atx,是用#号的个数标记几级标题,一个就是一级标题,两个就是二级标题,最多六个,空格加标题内容。

    注:标记符号后边一定要有空格,至少一个。

    以下是示例:

    Setext格式

    一级标题

    这里是一级标题
    =
    

    显示效果:

    这里是一级标题

    二级标题

    这里是二级标题
    --
    

    显示效果:

    这是里二级标题

    atx格式

    一级标题

    # 这里是一级标题
    

    显示效果:

    这里是一级标题

    二级标题

    ## 这里是二级标题
    

    显示效果:

    这里是二级标题

    文本块引用 Blockquotes

    格式语法

    > 这里是引用的文本块
    > > 再次引用的文本块
    

    显示效果

    这里是引用的文本块

    再次引用的文本块

    多行的文本块,可以在段首写>,也可以每行行首写。

    > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
    Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
    

    显示效果

    This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
    Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

    > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
    > consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
    > Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
    

    显示效果

    This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
    Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

    引用的文本块中,还支持其他Markdown标签,包括标题、列表和程序代码块。

    > ## This is a header.
    > 
    > 1.   This is the first list item.
    > 2.   This is the second list item.
    > 
    > Here's some example code:
    > 
    >     return shell_exec("echo $input | $markdown_script");
    

    显示效果

    This is a header.

    1. This is the first list item.
    2. This is the second list item.

    Here's some example code:

    return shell_exec("echo $input | $markdown_script");
    

    列表 Lists

    Markdown支持无序列表和有序列表。

    无序列表使用*、+、-任意其中一个标识,标识时使用一个字符。

    * 无序列表1
    + 无序列表2
    - 无序列表3
    

    显示效果

    • 无序列表1
    • 无序列表2
    • 无序列表3

    无序列表分级,下一级标识符前面加两个空格或者一个tab

    * 列表1级1
      * 列表2级1
      * 列表2级2
    * 列表1级2
    

    显示效果

    • 列表1级1
      • 列表2级1
      • 列表2级2
    • 列表1级2

    列表内容会自动顶格对齐,不需要手动进行调整,下面两段代码显示效果一致。

    *   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
        viverra nec, fringilla in, laoreet vitae, risus.
    *   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
        Suspendisse id sem consectetuer libero luctus adipiscing.
    
    *   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
    viverra nec, fringilla in, laoreet vitae, risus.
    *   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
    Suspendisse id sem consectetuer libero luctus adipiscing.
    

    显示效果是一样的

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
      viverra nec, fringilla in, laoreet vitae, risus.
    • Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
      Suspendisse id sem consectetuer libero luctus adipiscing.

    一条列表内容,如果有多个段落,需要在段落开始增加4个空格或者一个tab。

    1.  This is a list item with two paragraphs. Lorem ipsum dolor
        sit amet, consectetuer adipiscing elit. Aliquam hendrerit
        mi posuere lectus.
    
        Vestibulum enim wisi, viverra nec, fringilla in, laoreet
        vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
        sit amet velit.
    
    2.  Suspendisse id sem consectetuer libero luctus adipiscing.
    

    显示效果:

    1. This is a list item with two paragraphs. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Aliquam hendrerit
      mi posuere lectus.

      Vestibulum enim wisi, viverra nec, fringilla in, laoreet
      vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
      sit amet velit.

    2. Suspendisse id sem consectetuer libero luctus adipiscing.

    如果段落开始不够4个空格或者没有1个tab,显示效果如下:

    1. This is a list item with two paragraphs. Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Aliquam hendrerit
      mi posuere lectus.

    Vestibulum enim wisi, viverra nec, fringilla in, laoreet
    vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
    sit amet velit.

    1. Suspendisse id sem consectetuer libero luctus adipiscing.

    列表中引文文本,引用符号 > 必须要相对列表符号右缩进4个空格或者1个tab。文本引用的标签规则同样生效,文本内容不用手动每一行对齐,会自动对齐。

    * this is list level 1
        > this is level 1 blockquotes
        next new line 
    * this is list levle 1 
        * this is list level 2
            > this is level 2 blockquotes
        * this is list level 2
    > this is levle 2 blockquotes , no tab
    

    显示效果

    • this is list level 1

      this is level 1 blockquotes
      next new line

    • this is list levle 1
      • this is list level 2

        this is level 2 blockquotes
        * this is list level 2

    this is levle 2 blockquotes , no tab

    列表中引用Markdown其他标签,需注意符号的缩进,对齐一级,4个空格或1个tab;对齐二级,8个空格或2个tab,以此类推,不再赘述。

    上面主要说明了无序列表。有序列表开始标识符号不一样,其他规则与无序列表相同。

    有序列表,英文数字加英文句号(.)。

    1. 有序列表1
        1.有序列表下一级
    2. 有序列表2
    3. 有序列表3
    

    显示效果:

    1. 有序列表1
      1.有序列表下一级
    2. 有序列表2
    3. 有序列表3

    代码块 Code Blocks

    代码块引用有两种方式,一种是tab或4个空格,一种是三个`号可以标识是哪种语言。创始人约翰·格鲁伯在发布语法时只有tab或4个空格一种。

    tab或4个空格格式很简单,代码开始行首加至少一个tab或4个空格,根据缩进关系可以加多个,一个tab相当4个空格,空格需要是4的倍数。

        function test (){
            console.log('this is log');
        }
    

    显示效果

    function test (){
        console.log('this is log');
    }
    

    三个`号标识开发语言的写法,javascript与前面符号之间的空格可有可无,建议不写。

    ​```javascript
    function test (){
        console.log('this is log');
    }
    ​```
    

    显示效果

    function test (){
        console.log('this is log');
    }
    

    水平分割线 Horizontal Rules

    html中的水平分割线


    ,可以通过使用同一行上至少3个同一字符来实现,字符间可以有空格,这个字符包括3个分别是星号*、减号-和下划线_。
    * * *
    ***
    *******
    ---
    _ _ _ _ _ _ _
    

    显示效果






    行元素 span elements

    首先说明“行元素”这是个翻译词,是根据本部分包括的内容而来,区别于“inline element”,编写此处时暂时没想到更好更合适的词所以暂用“行元素”翻译,如果各位网友有更好的词,可以留言给我。

    链接 Links

    链接有两种格式,一种是行内,一种是引用。

    行内的格式如下:

    This is [an example](http://example.com/ "Title") inline link.
    
    [This link](http://example.net/) has no title attribute.
    
    [about](/about/index.html 'about')
    

    中括号内是链接显示的内容,也就是a标签的text,小括号(圆括号)中写链接地址(相当a的href)和链接标题(相当a的title),链接地址可以是绝对地址也可以相对地址,标题用单引号或者双引号包围。

    显示效果

    This is an example inline link.

    This link has no title attribute.

    about

    链接引用的格式如下:

    This is [kkxiazai][id] reference-style link.
    This is [kkxiazai][ID] reference-style link.
    This is [kkxiazai] [ID] reference-style link.
    
    [id]: http://www.kkxiazai.com/  "Optional Title Here"
    [id]: <http://www.kkxiazai.com/>  "Optional Title Here"
    [ID]: http://www.kkxiazai.com/  'Optional Title Here'
    [id]: http://www.kkxiazai.com/  (Optional Title Here)
    [id]: http://www.kkxiazai.com/  
    (Optional Title Here)
    [kkxiazai]: http://www.kkxiazai.com 'kkxiazai'
    

    链接引用注意以下几点:

    1. 引用时两个中括号之间不可以有空格,有空格将会各自解析
    2. id 不区分大小写
    3. 被引用的内容冒号后面要有至少有一个空格,[id]: 冒号后边要有空格
    4. 链接标题可写也可不写
    5. 链接标题可以换行
    6. 链接地址和标题中间要有空格
    7. 标题必须用单引号、双引号、小括号其中一种包围
    8. 链接地址可以用尖括号包围

    额外说明:链接引用目前的语法和初始语法有些不同,但是目前的语法兼容初始语法,看下例:

    初始的语法
    this is [kkxiazai][] reference-style link.
    
    目前的语法
    this is [kkxiazai] reference-style link.
    
    [kkxiazai]: http:/www.kkxiazai.com 'kkxiazai'
    

    强调文本 Emphasis

    强调文本使用星号(*)和下划线(_),单个字符包围的相当<em>,两个字符包围的相当<strong>。

    *single asterisks*
    
    _single underscores_
    

    显示效果

    single asterisks

    single underscores

    如果要显示文本内容中的星号(*)或者下划线(_),可以使用反斜线进行转义。

    \*this text is surrounded by literal asterisks\*
    \_this text is surrounded by literal asterisks\_
    

    显示效果

    *this text is surrounded by literal asterisks*

    _this text is surrounded by literal asterisks_

    两个字符Strong

    **double asterisks**
    
    __double underscores__
    

    显示效果

    double asterisks

    double underscores

    代码 Code

    不同于代码块(Code Blocks)整段落引用代码,这里是指在文本内容引用的小段代码。例如:

    这里我们调用了 `printf()` 函数。
    

    显示效果:

    这里我们调用了 printf() 函数。

    如果引用的代码里面含有反引号`符号,引用代码开始和结束的符号可以使用两个反引号`.

    ``There is a literal backtick (`) here.``
    

    显示效果:

    There is a literal backtick (`) here.

    如果引用的代码也包含反引号开始和结束,可以使用两个反引号加空格中间放引用的代码,如下:

    A backtick-delimited string in a code span: `` `foo` ``
    

    引用的代码foo两边也有反引号,因此在引用时使用双反引号,但是两个反引号不能和引用代码的反引号连到一起,加空格隔开就可以,显示效果:

    A backtick-delimited string in a code span: `foo`

    图片 Images

    图片的调用格式与链接相似,也是两种,行内和引用。

    行内

    ![Alt text](/path/to/img.jpg)
    
    ![Alt text](/path/to/img.jpg "Optional title")
    

    与链接不同的是要以英文感叹号开始,中括号中放的是img的alt。

    引用

    ![Alt text][id]
    
    [id]: url/to/image  "Optional title attribute"
    

    Markdown中的标签没有用于指定图像尺寸的语法,如果要想指定图片大小,可以直接使用html<img>标签。

    其他 miscellaneous

    字符转义 Backslash Escapes

    Markdown中允许使用反斜杠进行字符转义。支持转义的字符如下:

    \   backslash 反斜杠
    `   backtick 反引号
    *   asterisk 星号
    _   underscore 下划线
    {}  curly braces 大括号 花括号
    []  square brackets 中括号 方括号
    ()  parentheses 小括号 圆括号
    #   hash mark 井号
    +   plus sign 加号
    -   minus sign (hyphen) 减号
    .   dot 点号
    !   exclamation mark 叹号
    

    自动生成链接 Automatic Links

    创始人给出的语法,生成链接:

    <https://www.kkxiazai.com>
    <support@kkxiazai.com>
    

    显示效果:

    https://www.kkxiazai.com
    support@kkxiazai.com

    但是测试发现直接写地址也可以,不要两边的尖括号。

    后记

    时间有限,查阅了力所能及的资料,可能有理解不当之处,看到的网友如有发现与我留言或者私信,我会进行修改。谢谢。大家共同学习进步。

    前一篇:
    Markdown学习之一理解Markdown

    相关文章

      网友评论

          本文标题:Markdown学习之二基础语法

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