zoukankan      html  css  js  c++  java
  • Markdown 语法的超快速上手

    本文支持WTFPL协议,因此你想往哪转就往哪转。

    Why markdown?

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式
    Markdown具有一系列衍生版本,用于扩展Markdown的功能(如表格、脚注、内嵌HTML等等),这些功能原初的Markdown尚不具备,它们能让Markdown转换成更多的格式,例如LaTeX,Docbook。Markdown增强版中比较有名的有Markdown Extra、
    MultiMarkdown、 Maruku等。这些衍生版本要么基于工具,如Pandoc;要么基于网站,如GitHub和Wikipedia,在语法上基本兼容,但在一些语法和渲染效果上有改动。
    - Baidu Baike

    上述内容告诉你,Markdown是一种标记语言,再粗暴一点说,就是排版用的,再再粗暴一点,就是如何让你看起来如同记事本一般平淡的文本能够变得花里胡哨。

    偷偷告诉你:这篇文章就是用Markdown写的。

    标记语言??我知道HTML啊,有什么区别么??

    他俩啥关系

    Markdown是基于HTML所开发的,与HTML不同的是,Markdown(以下简称MD)并不受W3C基金会管理,但本身也是开放的。
    Markdown允许内嵌HTML代码(尽管不完全支持HTML标准下的所有标签,这是出于安全考虑,而且这也不是倡用的行为),而在网页显示的时候这些Markdown语法也会被转换成对应的HTML标记文本显示在你的面前。
    但是现在的Markdown并不只限于可以转换为HTML,新的技术(Pandoc)标明他们实际上还可以转换成doc或者pdf之类的……

    他俩谁好用

    这不是一个可以很快下定论的东西,无所谓谁更好或者更糟,如果Markdown和HTML真能像这样一较高下的话恐怕另一个也就不复存在了不是。
    他们两个的面向是不同的,HTML专注于一种通用的,能够在各个设备上在一定的文本协议(HTTP/HTTPS)下正确的进行显示,所以论强大的话,HTML可以支持更加花哨强大的功能,但是相对应的,使用起来就要繁琐一些,并且具备一个相当庞大的语法标准和一些协议性的说明。
    而Markdown则是面向于快速标记的,而且对程序员非常友好(因为本身针对代码的排版做了相关的处理,可比HTML的<code>再配上一堆乱七八糟的CSS方便多了),因此广受IT行业的青睐,不仅如此,最近的Markdown甚至可以支持部分(mathrm{LaTeX})语法(当然主要用于写数学公式用,而另一方面用于HTML的MathML似乎没能推广起来的样子)

    所以简单来说,Markdown比HTML用起来快,但HTML具有Markdown无法替代的功能。
    Markdown 用起来有多快??看看下面这段话就知道了:

    万维网联盟创建于1994年,是Web技术领域最具权威影响力的国际中立性技术标准机构。到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南

    Markdown:

    > *万维网联盟*创建于**1994**年,是Web技术领域**最具权威**和**影响力**的国际中立性技术标准机构。到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南
    

    HTML:

    <blockquote><p><i>万维网联盟</i>创建于<b>1994</b>年,是Web技术领域<b>最具权威</b>和<b>影响力</b>的国际中立性技术标准机构。到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南<br /></p></blockquote>
    

    据上述内容统计,当输入一个HTML标签的时候,你需要按下若干次的Shift+,+Shift+.+←[+/]+标签键位,而在Markdown里至多只需要若干次的Shift+8而已,根据时间复杂度o(n)的分析和人体工学的相关……

    How?

    本人的资历尚浅,即便如此自己还是能希望通过自己绵薄的力量帮助大家快速上手,自己从大二开始经常使用Markdown记录笔记,因此用的还算方便和熟练。因此这里针对一些非常非常常用的功能进行说明:。

    标题文本(巧了,说的不就是我么??)

    标题文本一般用#开始,#的数量决定标题的等级,这和HTML里面的<h1><h6>多少有些类似,尽管Markdown的最终渲染结果取决于各服务器提供的CSS文件但一般来说,层级越高(##...## Title)的标题通常字会越小作为副标题使用。
    比如,这段的标题实际上就是这么写的

    ## 标题文本
    

    是的,根据井号的数量来看,这是个二级标题。
    如没有特殊规定,一般标题最大支持到六级(正好对应HTML的<h6>
    在有些Markdown系统下,#可以(甚至会要求)成对出现

    ## 标题文本 ##
    

    但是博客园里的没做这种要求

    标题属于行级格式,因此标题只能出现于一行的行首,而不允许在行的中间或结尾出现,而且当某一行被标注为标题的时候,整个一行的文字都会变成标题的格式。位于行中间的井号会被真的处理为#

    位于分割线上方的文本会被自动处理为标题

    粗体、斜体、粗斜体、删除线

    不怕影子

    正是这样,Markdown提供了一种非常快速方式进行这种文字版式的替换,使用若干个成对的*完成:
    一对*斜体*斜体*)(不知何种原因,博客园的MD编辑器似乎不支持斜体,自然,粗斜体也会同样变成粗体,好吧,跟皮肤有关系,有的皮肤样式对应的Markdown渲染样式就没有斜体,换个皮肤就好了)
    两对*粗体**粗体**
    我想又粗又斜怎么办,很简单,1+2=3(***粗斜***

    此外,Markdown还允许使用一堆双浪线~~包围文本作为删除线使用,例如:
    浪个里格浪

    ~~浪个里格浪~~
    

    不幸的是,Markdown语法里并未提供下划线,尽管如此可以通过内嵌HTML的<u>标签来实现。

    引用

    著名的作家鲁迅先生曾经在这里说了很多的东西,比如“我从来没说过这句话”……

    引用在Markdown里由一个>开始,值得注意的是,引用是一个块级结构,这意味着引用不会对文段的一部分进行修饰,而是直接作用于一整个文段
    如果想要让后文内容脱离引用,根据上面的说法就是让后文内容脱离被引用的文段,也就是在引用文段的最后一行与非引用文段的第一行之间加个回车比如:

    鲁迅说过:……

    鲁迅没说过……

    用Markdown写出来就是:

    > 鲁迅说过:……
    
    鲁迅没说过……
    

    但如果是

    > 鲁迅说过:……
    鲁迅也说过……
    

    就会变成:

    鲁迅说过:……
    鲁迅也说过……

    和标题类似,引用也可以通过增加>的数量进行嵌套引用:

    鲁迅先生曾经说过

    世界上本没有路,走的人多了,便成了路

    > 鲁迅先生曾经说过
    >> 世界上本没有路,走的人多了,便成了路
    

    引用内的文段一样可以加上其他的格式标注,比如:

    鲁迅先生强调过:真的勇士猛士,敢于直面惨淡的人生,敢于正视淋漓的鲜血。

    > [鲁迅](https://baike.baidu.com/item/鲁迅/36231?fr=aladdin)先生**强调**过:**真的~~勇士~~猛士,敢于直面惨淡的人生,敢于正视淋漓的鲜血。**
    

    表格

    0 VS 0
    ×
    ×
    × ×

    住手!!你们住手!!不要再下啦!!
    这已经是你们下的第4294967295盘啦!!

    Markdown提供了一个非常简单的关于表格的格式支持,尽管这原本并不存在于最初的Markdown语法集当中,Markdown对于表格功能上的支持是无法与HTML的<table>标签抗衡的,因为它支持最完整的表格,也只有这种格式:

    表头1 表头2 表头3
    左对齐的文本 居中的文本 右对齐的文本
    左对齐 居中 右对齐
    左对齐 居中 右对齐

    只有表格的第一行可以作为表头使用,其他的项只能作为普通的元组使用,表格是向下排开的,所以想写横向表格的话也不是一个很好的选择,和引用类似,表格也是一个块级结构,而表格要求在其前后都要有一个回车,否则内容不被视为表格,表格的基本语法如下(这恐怕是Markdown里最麻烦的语法格式了):

    上一段文本……
    
    |表头1|表头2|表头3|
    |:---|:---:|---:|
    |左对齐的文本|居中的文本|右对齐的文本|
    |左对齐|居中|右对齐|
    |左对齐|居中|右对齐|
    
    下一段文本
    

    第一行作为表头使用表头的格式与表格其他项会略有不同,他的字更粗而且他所在的单元格与其他的单元格长得也略有不同。
    第二行那个很像火星文的东西用于指定整列的对齐方式,横线的数量不限,冒号确定文本的对齐锚点位置,表示如下含义:

    |:---|:---:|---:|
     左     中    右
    

    并不一定非要指定成这个样子,也可以全是左的,也可以全是右的……总之是这样。
    后面的行就是普通的表格项了,以|分割,不限于3列,可以更多,每列用|分割,而且请注意,MD中一张表格的列数是固定的,因此,你不可以指定被合并的单元格,也不可以弄出那种像砖墙那样的锯齿表格,而且表格的列宽是自适应内容的,因此在原生MD中你无法指定列宽
    但如果真的需要这样怎么办呢,由于MD允许内嵌HTML代码,因此可以使用HTML的<table><tr><td>...这些标签来实现(i.e.写成HTML表格),因为HTML的table功能足够强大,尽管如此内嵌HTML也不是倡用的做法

    代码块与行内代码

    #include <iostream>
    
    using namespace std;
    
    int main()
    {
        cout << "Hello World" << endl;
        return 0;
    }
    

    这是Markdown最受IT从业者青睐的地方了,因为同样的功能如果让HTML来做会需要用各种各样的标签控制等宽文本然后还要用CSS或者JS脚本来控制高亮……
    但是在Markdown里你完全不需要考虑这些(当然,高亮与否以及高亮的方式取决于服务器提供的CSS样式)。

    这里先介绍代码块,它由一对三个反单引号包围```,反单引号在哪呢??在键盘Tab键的上方你会找到一个标有~的键,这个键用Shift打出来就是浪线,但是直接敲出来就是反单引号,在中文标点下,这个键会打出间隔符·
    代码块是块级结构,被修饰的内容即使被写到某一段内,也会被另起一行作为新的段落,直至再出现三个反单引号结束,比如本节最开始的那个Hello World实际上是这样婶儿的:

    (请无视反斜线`\`,我没找到好方法能够让代码块里显示代码块的写法)
    \```cpp
    #include <iostream>
    
    using namespace std;
    
    int main()
    {
        cout << "Hello World" << endl;
        return 0;
    }
    \```
    
    

    其中,第一个三反单引号后面可以加入你的语言名称的缩写(cpp表示C++),这个有助于文档确认你这段代码基于何种语法进行高亮,你也可以指定JavaScript之类的

    在有些Markdown系统中,允许通过另外一种方式定义代码块,将整个文段向内进行一次Tab(缩进)即可,这个文段整个就被当作代码块处理。这里不对此方法进行描述。

    除了代码块以外,Markdown还支持行内代码,对就是这样,行内代码和加粗类似,属于对文段内部的修饰,由一对反单引号包围,比如这段内容的Markdown语法就是这样的:

    除了代码块以外,`Markdown`还支持**行内代码**,对就是这样,……
    

    这种写法在有些时候是非常方便的,比如:

    这里介绍关于System.Collection.Generic所包含的接口和类……

    这样,在文本内排放代码是非常容易并且美观的

    可比某课设里面往Word里面粘代码来的顺畅多了……

    链接

    这个链接正好就是这篇文章的地址

    链接在Markdown中的组织形式也非常简单,链接有两部分构成,一个是链接的显示文本,还有一个就是链接的符号地址
    比如沈阳航空航天大学官网
    Markdown语法就是:

    [沈阳航空航天大学官网](http://www.sau.edu.cn)
    [显示文本](符号地址)
    

    如果显示文本为空,则链接将直接取符号地址作为显示文本。

    图片

    Mona Lisa
    (上图来自于百度搜索结果)

    在Markdown中由于图片也是直接链接网络资源,因此她的格式多少与链接有些类似:

    ![图片描述](图片地址)
    ![Mona Lisa](https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554392569440&di=978dfe9d1b6f5fc3def15e9febbac1ce&imgtype=0&src=http%3A%2F%2Fwww.lvyou168.cn%2Fupload%2F20180519%2F113713872.jpg)
    

    图片描述通常不会显示出来,有些页面允许图片描述作为鼠标悬停在图片上的提示文本出现,图片描述的另一个作用在于,当对服务器进行检索的时候,提供图片描述的关键字可以直接检索出该图片。
    图片地址表示图片在网络上的位置(URI),如果图片存在,则直接显示图片,否则图森破

    列表

    1. 吃饭
      • 早饭
      • 午饭
      • 晚饭
        • 夜宵
    2. 睡觉
    3. 打豆豆
      • 红豆
      • 黄豆
      • 绿豆

    有序列表

    有序列表就是带编号的列表,Markdown最基础的语法只支持这种格式的编号:

    1. 项目1
    2. 项目2
    3. 项目3
    1. 项目1
    2. 项目2
    3. 项目3
    

    是的!你没看错,就是这么写的!其中,如果手动编号顺序错误,有些Markdown编辑器会矫正过来(这种矫正可能不会在编辑期间完成,而是在最终显示的时候被修正),有些编辑器甚至会自动产生编号。
    有些编辑器甚至支持下级的编号,以及其他的编号格式,如abc等,博客园的支持多级编号:

    1. 项目1
      1. 子项目1
        1. 孙子项目1.1
      2. 子项目2
    2. 项目2
    3. 项目3

    产生次级编号的方法是对次级编号进行缩进:

    1. 项目1
        1. 子项目1
            1. 孙子项目1.1
        2. 子项目2
    2. 项目2
    3. 项目3
    

    无序列表

    无序列表当然也就没有编号,他们用圆点作为项目符,在Markdown中可以使用加号+,减号-,星号*引领一个无序项,使用哪个符号的最终结果是一样的,同样,无序列表也支持多级列表,例如:

    • Who
      • cares
    • my
    • order
      • out
      • of
        • its
        • own
          • ORDER

    写出来就是:

    + Who
        + cares
    + my
    + order
        + out
        + of
            + its
            + own
                + ORDER
    

    数学公式((mathrm{LaTeX})扩展语法)

    [E=mc^2 ]

    [e^{ipi}+1=0 ]

    [Phi (x)=frac{1}{sqrt{2pi}}int_{-infty}^x e^{-frac{t^2}{2}} mathrm{d}t ]

    [mathbf{E} = egin{bmatrix} 1 & 0 & 0 \ 0 & 1 & 0 \ 0 & 0 & 1 \ end{bmatrix} ]

    [mathbf{A}vec{x} = egin{bmatrix} a_{11} & a_{12} & a_{13} \ a_{21} & a_{22} & a_{23} \ a_{31} & a_{32} & a_{33} \ end{bmatrix} egin{bmatrix} x_1 \ x_2 \ x_3 end{bmatrix} = egin{bmatrix} b_1 \ b_2 \ b_3 end{bmatrix} = vec {b} implies egin{equation} egin{cases} a_{11}x_1+a_{12}x_2+a_{13}x_3 &= b_1 \ a_{21}x_1+a_{22}x_2+a_{23}x_3 &= b_2 \ a_{31}x_1+a_{32}x_2+a_{33}x_3 &= b_3 \ end{cases} end{equation} ]

    好吧,我估计错了,博客园的数学公式支持功能需要自己在设置里面打开。
    这里不介绍关于如何开启该功能的方法,可自行查找其他博文。
    这里也不介绍如何控制(mathrm{LaTeX})文本的语法,这不属于标准Markdown语法而是(mathrm{LaTeX})的语法
    这里只说如何在Markdown中嵌入,类似于代码块,公式块也可以块级键入或者行内嵌入,块级嵌入的公式使用一对双美元号$$,而行内则使用一对单美元号$(这里只用块级的,有些系统不支持使用行内嵌入,当然,有的系统干脆不支持这个东西):

    $$
    E=mc^2
    $$
    
    $$
    e^{ipi}+1=0
    $$
    
    $$
    Phi (x)=frac{1}{sqrt{2pi}}int_{-infty}^x e^{-frac{t^2}{2}} mathrm{d}t
    $$
    
    $$
    mathbf{E} = 
    egin{bmatrix}
        1 & 0 & 0 \
        0 & 1 & 0 \
        0 & 0 & 1 \
    end{bmatrix}
    $$
    
    $$
    mathbf{A}vec{x} =
    egin{bmatrix}
        a_{11} & a_{12} & a_{13} \
        a_{21} & a_{22} & a_{23} \
        a_{31} & a_{32} & a_{33} \
    end{bmatrix}
    egin{bmatrix}
        x_1 \ x_2 \ x_3
    end{bmatrix}
    = 
    egin{bmatrix}
        b_1 \ b_2 \ b_3
    end{bmatrix}
    = vec {b} implies
    egin{equation}
        egin{cases}
            a_{11}x_1+a_{12}x_2+a_{13}x_3 &= b_1 \
            a_{21}x_1+a_{22}x_2+a_{23}x_3 &= b_2 \ 
            a_{31}x_1+a_{32}x_2+a_{33}x_3 &= b_3 \
        end{cases}
    end{equation}
    $$
    
  • 相关阅读:
    Poj2516 最小费用最大流
    spss研究高等院校人文社会研究课题受什么因素影响
    使用bs4实现将诗词名句网站中三国演义小说章节内容爬取
    python爬虫1 爬虫概要
    解析出所有城市名称
    xpath爬取58二手房的房源信息
    Po两段小代码,说几个小细节____关于九九乘法表&amp;amp;amp;国际象棋棋盘
    小爬虫demo——爬取“妹子”等网站链接____使用requests库
    爬取京东历史图书图片并下载到本地____requests库
    python基础:复习整理笔记(一)____关于 工具、程序执行原理、python风格规范
  • 原文地址:https://www.cnblogs.com/oberon-zjt0806/p/10656720.html
Copyright © 2011-2022 走看看