美文网首页
Markdown 最少必要知识

Markdown 最少必要知识

作者: 极速24号 | 来源:发表于2018-04-12 22:54 被阅读61次
    一、Markdown 是什么

    Markdown 是由 John Gruber 在 2004 年用 Perl 语言开发的一个软件工具,它的主要作用是帮助用户将简单易懂的纯文本内容转换成 HTML
    用户在创作的时候,只要按照标准的 Markdown 语法书写,Markdown 便会将这些纯文本内容转换成 HTML。因此,严格意义上讲,Markdown 是:

    • 一个软件工具
    • 一个语法
    二、Markdown 设计理念

    Markdown 软件设计的初衷是帮助 Web 创作者将纯文本内容转换成 HTML。
    Markdown 语法的设计初衷是保持纯文本内容的可读性,使转换之后的内容和源内容保持一致,除了原内容多一些标签。

    三、Markdown 语法
    PARAGRAPHS(段落)

    在 Markdown 中,用户书写的段落将会按照源文本格式输出。

    Markdown:

    When tomorrow turns in today, yesterday, and someday that no more important in your memory, 
    we suddenly realize that we are pushed forward by time. 
    This is not a train in still in which you may feel forward when another train goes by. 
    It is the truth that we've all grown up. And we become different.
    

    Output(Html):

    When tomorrow turns in today, yesterday, and someday that no more important in your memory, 
    we suddenly realize that we are pushed forward by time. 
    This is not a train in still in which you may feel forward when another train goes by. 
    It is the truth that we've all grown up. And we become different.
    

    Output(Actual):

    When tomorrow turns in today, yesterday, and someday that no more important in your memory,
    we suddenly realize that we are pushed forward by time.
    This is not a train in still in which you may feel forward when another train goes by.
    It is the truth that we've all grown up. And we become different.

    HEADERS(标题)

    在 Markdown 中,实现标题方法有三种:

    1. 三个等于号(===)
    2. 三个连接符(---)
    3. 一到六个井号(#),其中井号的个数与标题的大小正相关。

    Markdown:

    MARKDOWN
    ===
    

    Output(Html):

    <h1>MARKDOWN</h1>
    

    Output(Actual):

    MARKDOWN

    Markdown:

    MARKDOWN
    ---
    

    Output(Html):

    <h2>MARKDOWN</h2>
    

    Output(Actual):

    MARKDOWN

    Markdown:

    ###MARKDOWN###
    

    Output(Html):

    <h3>MARKDOWN</h3>
    

    Output(Actual):

    MARKDOWN

    BLOCKQUOTES(引用)

    在 Markdown 中,用右箭头引出需要强调的内容。

    Markdown:

    > MARKDOWN
    

    Output(Html):

    <blockquote>
        <p>MARKDOWN</p>
    </blockquote>
    

    Output(Actual):

    MARKDOWN

    PHRASE EMPHASIS(重点强调)

    在 Markdown 中,用星号(*,一个星号表斜体,两个星号表粗体)或者下划线(_,一个下划线表斜体,两个下划线表粗体)对需要强调的内容包裹。

    Markdown:

    *MARKDOWN*
    

    Output(Html):

    <em>MARKDOWN</em>
    

    Output(Actual):

    MARKDOWN

    Markdown:

    **MARKDOWN**
    

    Output(Html):

    <strong>MARKDOWN</strong>
    

    Output(Actual):

    MARKDOWN

    下划线修饰强调内容的效果同上,故在此不做演示,有兴趣的小伙伴可以自行尝试。

    LISTS(列表)

    在 Markdown 中,列表分两类,第一种是无序列表,用星号(*)、加号(+)、连接符(-)引出;第二种是有序列表,用阿拉伯数字加英文逗点(.)引出。

    Markdown:

    * RED
    * GREEN
    * BLUE
    

    Output(Html):

    <ul>
        <li>RED</li>
        <li>GREEN</li>
        <li>BLUE</li>
    </ul>
    

    Output(Actual):

    • RED
    • GREEN
    • BLUE

    加号、连接符效果同上,故在此不做演示,有兴趣的小伙伴可以自行尝试。

    Markdown:

    1. RED
    2. GREEN
    3. BLUE
    

    Output(Html):

    <ol>
        <li>RED</li>
        <li>GREEN</li>
        <li>BLUE</li>
    </ol>
    

    Output(Actual):

    1. RED
    2. GREEN
    3. BLUE
    LINKS(链接)

    在 Markdown 中,以如下两种表示链接的方式:

    1. [alt text](link)
    2. [alt text][id]   
       [id]: link
    

    Markdown:

    [WIKIPEDIA](https://www.wikipedia.org)
    

    Output(Html):

    <a href="https://www.wikipedia.org">WIKIPEDIA</a>
    

    Output(Actual):

    WIKIPEDIA

    Markdown:

    [WIKIPEDIA][1]
    [1]: https://www.wikipedia.org
    

    Output(Html):

    <a href="https://www.wikipedia.org">WIKIPEDIA</a>
    

    Output(Actual):

    WIKIPEDIA

    另外,在上面的链接中都可为链接添加标题,这样处理的之后,当鼠标放在链接内容上时,会有文字提示,添加的方法如下:

    1. [alt text](link "title")
    2. [alt text][id]
       [id]: link "title"
    

    Markdown:

    [WIKIPEDIA](https://www.wikipedia.org "WIKIPEDIA")
    

    Output(Html):

    <a href="https://www.wikipedia.org" title="WIKIPEDIA">WIKIPEDIA</a>
    

    Output(Actual):

    WIKIPEDIA

    IMAGES(图片)

    在 Markdown 中,以如下格式表示图片:

    [图片上传失败...(image-5276ed-1523544833415)]
    

    Markdown:

    ![WIKIPEDIA](https://img.haomeiwen.com/i1903333/2d38fbbd7f4ab830.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    

    Output(Html):

    <img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png" alt="WIKIPEDIA" />
    

    Output(Actual):

    WIKIPEDIA

    图片和文本链接一样,也可以添加标题,添加的方法如下:

    [图片上传失败...(image-2afd5-1523544833415)]
    

    Markdown:

    ![WIKIPEDIA](https://img.haomeiwen.com/i1903333/12ac7876e1fd868c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "WIKIPEDIA")
    

    Output(Html):

    <img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png" alt="WIKIPEDIA" title="WIKIPEDIA"/>
    

    Output(Actual):

    WIKIPEDIA
    CODE(代码块)

    在 Markdown 中,想以固定的格式将文本内容输出,只需在每一行文本内容前加四个空格或者一个制表符(Tab)。

    Markdown:

    public class HelloWorld {
        public static void main(String []args) {
            System.out.println("Hello World!");
        }
    }
    

    Output(Html):

    <pre>
        public class HelloWorld {
            public static void main(String []args) {
                System.out.println("Hello World!");
            }
        }
    </pre>
    

    Output(Actual):

    public class HelloWorld {
        public static void main(String []args) {
            System.out.println("Hello World!");
        }
    }
    

    在 Markdown 中,除了整个的代码块,还有在段落中嵌套的代码情况,在段落中引用代码的时候,只需用反引号(`)将其代码文本内容包裹。

    Markdown:

    `Hello World!`
    

    Output(Html):

    <code>Hello World!</code>
    

    Output(Actual):

    Hello World!

    四、常用 Markdown 工具

    Windows平台:

    Mac:

    五、参考文献
    1. Markdown - Wikipedia
    2. Daring Fireball: Markdown Syntax Documentation

    相关文章

      网友评论

          本文标题:Markdown 最少必要知识

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