美文网首页
首次使用Markdown写博客,好激动!

首次使用Markdown写博客,好激动!

作者: 李阿昀 | 来源:发表于2016-05-08 23:01 被阅读1893次

    Markdown是一种轻量级的[标记语言],它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被[标记]、[语言]所迷惑,Markdown的语法十分简单。常用的标记符号也不超过十个,这种相对于更为复杂的HTML标记语言来说,Markdown可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果。
    废话不多说,直接开干,来看看Markdown的基本语法规则。

    标题

    title
    标题是每篇文章都需要也是最常用的格式,在Markdown中,如果一段文字被定义为标题,只须在这段文字前加#号即可。
    # 一级标题
    ## 二级标题
    ### 三级标题
    以此类推,总共六级标题,建议在#号后加一个空格,这是最标准的Markdown语法。
    特别的,还可使用=(高阶标题)和-(次阶标题)标记一级和二级标题。
    标题的又一种生成方式
    注意:==--标记标题时,=-的个数大于等于2个都可以表示。

    列表

    熟悉HTML的同学肯定知道有序列表与无序列表的区别,在Markdown下,列表的显示只需要在文字前加上-*即可变为无序列表,有序列表则直接在文字前加1. 2. 3.符号和文字之前加上一个字符的空格。

    list

    引用

    如果你需要引用一小段别处的句子,那么就要用引用的格式。
    只需要在文本前加入>这种尖括号(大于号)即可。
    例,
    > 这是引用
    效果:

    这是引用

    特别的,引用还可以嵌套,如:
    > 这是一级引用
    >> 这是二级引用
    >>> 这是三级引用

    > 这是一级引用
    

    效果:

    这是一级引用

    这是二级引用

    这是三级引用

    这是一级引用

    再如:
    > 这是一级引用
    >> 这是二级引用
    >>> 这是三级引用
    > 这是一级引用
    效果:

    这是一级引用

    这是二级引用

    这是三级引用
    这是一级引用

    1. 从上面两例可看出,如果>>>>>>等嵌套使用的话,从>>>退到>时,必须之间要加上一个空行作为过渡,否则默认为下一行和上一行是同一级别的引用。如示例所示。
    2. 引用完之后,必须再空一行,重新一个新的开始,否则,以后的文字都将在引用的范围内,不要问我为什么,实践出真知。

    代码块

    使用```表示代码块。如:
    javascript var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");
    效果:

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    

    注意:

    1. `这个符号是反引号,我一开始在键盘上死命的找还找不到呢?闹笑话了,这个符号在Esc键下面,切换到英文下即可。
    2. ```后面的javascript表示此段代码为javascript代码,Markdown会自行使用javascript代码颜色渲染。

    附加:还可使用4个空格或者一个制表符(tab)缩进表示代码区块。如:

        /** 
          * nth element in the fibonacci series. 
          * @param n >= 0 
          * @return the nth element, >= 0. 
          */
        function fib(n) { 
            var a = 1, b = 1; 
            var tmp; 
            while (--n >= 0) { 
                tmp = a;
                a += b; 
                b = tmp;
            }
            return a; 
        }
        document.write(fib(10));
    

    效果:

    /** 
      * nth element in the fibonacci series. 
      * @param n >= 0 
      * @return the nth element, >= 0. 
      */
    function fib(n) {
        var a = 1, b = 1; 
        var tmp; 
        while (--n >= 0) { 
            tmp = a;
            a += b; 
            b = tmp;
        }
        return a; 
    }
    document.write(fib(10));
    

    但是这样写代码太费劲了,每行的开头都要空4个空格啊!要是成千上万行代码呢?那不把人累死啊!这种方式一定是差评啊!
    少量的代码还可以接受啊!例,

        void main()
        {
            printf("Hello, Markdown.");
        }
    

    效果:

    void main()
    {
        printf("Hello, Markdown.");
    }
    

    行内代码

    使用``表示行内代码。如:

    这是`java`代码。
    

    效果:
    这是java代码。
    注意:需要和普通段落之间存在空行。

    链接

    链接可以由两种形式生成:行内式参考式

    • 使用[](link "Optional title")表示行内链接。其中
    1. []内的内容为要添加链接的文字
    2. link为链接地址
    3. Optional title为显示标题。显示效果为在你将鼠标放到链接上后,会显示一个小框提示,提示的内容就是Optional title里的内容。中文显示乱码啊!差评

    例,

    这就是行内链接:[李阿昀的简书](http://www.jianshu.com "Markdown")
    

    效果:
    这就是行内链接:李阿昀的简书

    • 参考式链接

    例,

    这里我们参考:
    1. [JavaScript | MDN][1]
    2. [ECMAScript 6 入门 阮一峰][2]
    3. [InfoQ JavaScript][3]
    [1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
    [2]: http://es6.ruanyifeng.com
    [3]: http://www.infoq.com/cn/javascript/?utm_source=infoq&utm_medium=header_graybar&utm_campaign=topic_clk
    

    效果如下:
    这里我们参考:

    1. [JavaScript | MDN][1]
    2. [ECMAScript 6 入门 阮一峰][2]
    3. [InfoQ JavaScript][3]
      [1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
      [2]: http://es6.ruanyifeng.com
      [3]: http://www.infoq.com/cn/javascript/?utm_source=infoq&utm_medium=header_graybar&utm_campaign=topic_clk
      注意
    4. 上述的[1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript不出现在区块中。
    5. 参考式链接和行内链接的显示效果是一样的。但是在编辑状态下的使用情况不一样。行内连接紧跟链接文字,可以在看到链接文字的同时清楚的知道链接地址,但是不便于多次重复利用。参考式链接可以重复使用,但一般都是将一些链接放在一起统一管理,如一段文字后面或文章结尾,因此在找到链接和链接文字的对应关系上有些麻烦。各有利弊了,分情况使用。

    图片

    插入图片与插入链接的语法很像,区别在一个!号,而且也有行内式和参考式两种。
    插入图片语法为:![Alt text](/path/to/img.jpg "Optional title")

    • Alt text为如果图片无法显示时显示的文字。
    • /path/to/img.jpg为图片所在路径。
    • Optional title为显示标题。显示效果为在你将鼠标放到图片上后,会显示一个小框提示,提示的内容就是Optional title

    插入图片的地址需要图床(什么是图床呢???),这里推荐围脖图床修复计划CloudApp的服务,生成URL地址即可。
    例,行内式:

    ### 插入图片
    ![图灵社区](http://www.turingbook.com/Content/img/Turing.Gif)
    

    效果:

    插入图片

    粗体与斜体

    表格

    表格应该是Markdown比较累人的地方,例子如下:

        | Tables        | Are           | Cool  |
        | ------------- |:-------------:| -----:|
        | col 3 is      | right-aligned | $1600 |
        | col 2 is      | centered      |   $12 |
        | zebra stripes | are neat      |    $1 |
    

    这种语法生成的表格如下:

    Tables Are Cool
    col 3 is right-aligned $1600
    col 2 is centered $12
    zebra stripes are neat $1

    又如相关代码:

        dog | bird | cat
        ----|------|----
        foo | foo  | foo
        bar | bar  | bar
        baz | baz  | baz
    

    这种语法生成的表格如下:

    dog bird cat
    foo foo foo
    bar bar bar
    baz baz baz

    注意:需要和普通段落之间存在空行。

    相关文章

      网友评论

          本文标题:首次使用Markdown写博客,好激动!

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