markdown工作随笔总结

1. 锚点 (使用方法和链接很像)

            ## 目录
                 1. [命名](#命名)

                      .......

             **[返回顶部](#目录)**

             ## 命名
             ###命名原则
     
可以从返回顶部回到目录,也可以点击目录的命名跳到命名内容处

2. 标题

Markdown语法:

    # 一级标题
    ## 二级标题
    ### 三级标题
    #### 四级标题
    ##### 五级标题
    ###### 六级标题
    
    大标题
    =
    小标题
    -

预览效果:

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

大标题

小标题

3. 粗体、斜体

Markdown语法:

    **粗体**
    __粗体__
    *斜体*
    _斜体_

预览效果:

粗体

粗体

斜体

斜体

4. 分割线、删除线

Markdown语法:

    ---
    ***
    ~~文字删除线~~

预览效果:

有文字挨着才有分割线

文字删除线

5. 列表

Markdown语法:

    - 无序列表项目
    - 无序列表项目
    - 无序列表项目
    
    * 无序列表项目
    * 无序列表项目
    * 无序列表项目
    
    1. 有序列表项目
    2. 有序列表项目
    3. 有序列表项目
    
    - 外层列表项目
      + 内层列表项目
      + 内层列表项目
      + 内层列表项目
    - 外层列表项目

预览效果:

  • 无序列表项目

    • 无序列表项目
    • 无序列表项目
    • 无序列表项目
    • 无序列表项目
    • 无序列表项目
    1. 有序列表项目
    2. 有序列表项目
    3. 有序列表项目
    • 外层列表项目
      • 内层列表项目
      • 内层列表项目
      • 内层列表项目
    • 外层列表项目

6. 添加超链接、图片

Markdown语法:

    Markdown中有两种方式,实现链接,分别为内联方式和引用方式。
    内联方式: This is an [example link](http://example.com/). 
    
    引用方式:
    [博客园][1]
    图片:![博客园cnblogs][2]
    
    [1]:链接地址
    [2]:链接地址
    
    [无链接的链接][null-link]
    [null-link]: chrome://not-a-link
    
    

预览效果:

Markdown中有两种方式,实现链接,分别为内联方式和引用方式。
内联方式: This is an example link.

引用方式:
博客园

图片(没有链接地址,故没显示):博客园cnblogs

无链接的链接

超链接引用方式栗子:
Markdown语法:

    I get 10 times more traffic from [Google][1] than from [Yahoo][2] or [MSN][3].  
    
    [1]: http://google.com/        "Google" 
    [2]: http://search.yahoo.com/  "Yahoo Search" 
    [3]: http://search.msn.com/    "MSN Search"

预览效果:
I get 10 times more traffic from Google than from Yahoo or MSN.

7. 添加表格

Markdown语法:

    | ABCD | EFGH | IJKL |
    | -----|:----:| ----:|
    | a    | b    |  c   |
    | d    | e    |  f   |
    | g    | h    |  i   |
    
    ABCD | EFGH | IGKL
    -----|------|----
    a    | b    | c
    d    | e    | f
    g    | h    | i
    

预览效果:

ABCD EFGH IJKL
a b c
d e f
g h i
ABCD EFGH IGKL
a b c
d e f
g h i

8. 添加代码

Markdown语法:

    `字符`(简短文字添加代码框)
    
    `Tab`或
        四个空格(大段文字添加代码框,每行前添加)
    

预览效果:

字符 (简短文字添加代码框)

Tab 或四个空格(大段文字添加代码框,每行前添加)

9. 引用

Markdown语法:

    >朝辞白帝彩云间
    >千里江陵一日还
    >两岸猿声啼不住
    >轻舟已过万重山
    
    >> 引言内的引言引言内的引言引言内的引言

       

预览效果:

朝辞白帝彩云间

千里江陵一日还

两岸猿声啼不住

轻舟已过万重山

引言内的引言引言内的引言引言内的引言

注释:
Mou 解析的结果是:

<blockquote>
    <p>朝辞白帝彩云间 千里江陵一日还 两岸猿声啼不住 轻舟已过万重山</p>
</blockquote>

而简书解析的结果是:

<blockquote>
    <p>
       朝辞白帝彩云间<br>
       千里江陵一日还<br>
       两岸猿声啼不住<br>
       轻舟已过万重山
    </p>
</blockquote>

要在Mou中实现类似简书中的效果,应当在上面第一段代码的前三行每行末加入两个空格。

10. 单行长文字

Markdown语法:

    在需要以单行长文字显示的文字两段各加三个`~`,即`~~~`
    
    在需要以单行长文字显示的文字段落前加四个空格
    
    如下:
    ~~~
        在需要以单行长文字显示的文字段落前加四个空格在需要以单行长文字显示的文字段落前加四个空格在需要以单行长文字显示的文字段落前加四个空格在需要以单行长文字显示的文字段落前加四个空格在需要以单行长文字显示的文字段落前加四个空格
    ~~~
    

预览效果:

   在需要以单行长文字显示的文字段落前加四个空格在需要以单行长文字显示的文字段落前加四个空格在需要以单行长文字显示的文字段落前加四个空格在需要以单行长文字显示的文字段落前加四个空格在需要以单行长文字显示的文字段落前加四个空格
  • 只在需要以单行长文字显示的文字两段各加三个~,即~~~ 效果:
在需要以单行长文字显示的文字段落前加四个空格在需要以单行长文字显示的文字段落前加四个空格在需要以单行长文字显示的文字段落前加四个空格在需要以单行长文字显示的文字段落前加四个空格在需要以单行长文字显示的文字段落前加四个空格

* 只在需要以单行长文字显示的文字段落前加四个空格
在需要以单行长文字显示的文字段落前加四个空格在需要以单行长文字显示的文字段落前加四个空格在需要以单行长文字显示的文字段落前加四个空格在需要以单行长文字显示的文字段落前加四个空格在需要以单行长文字显示的文字段落前加四个空格

11. 首行缩进

由于markdown语法主要考虑的是英文,所以对于中文的首行缩进并不太友好,两种方法都可以完美解决这个问题

Markdown语法:

    &ensp; 半角的空格
    &emsp; 全角的空格
    &nbsp; 

预览效果:

  那日;丹桂梢头缀,黄花绽竹篱。抛情引墨顿成诗,情也依依,爱也依依。

  此后;天涯两相望,月人独伤悲。红笺小字寄相思,情也难追,爱也难追。

  那日;聊期花共月,闲看绿着珠。滴水涌泉歌诗儒,词也狂书,笔也狂书。

此后;瑶琴闲置久,知音日渐疏。往事思来总不如,词也成枯,笔也成枯。

12. 添加脚注

Markdown语法:

  [^脚注]: http://www.google.com

预览效果:

可惜cnblog不支持这种格式,在MarkdownPad中可以正常显示。

14. 创建链接

为输入的URL或邮箱自动创建链接,如test@domain.com。

Markdown语法:

    <http://example.com/>  
    <test@domain.com>

Markdown 会转为: <a href="http://example.com/">http://example.com/</a>

预览效果:

http://example.com/

address@example.com

15. 转义字符

在特殊字符,如*、[、>等前面加\可使特殊格式字符转换为正常字符打出(有序列表符号如1.,须在. 前加\)。

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

Markdown语法:

    \\
    \`
    \*
    \_
    \{\}
    \[\]
    \(\)
    \#
    \+
    \-
    \.
    \!

预览效果:

\

`

*

_

{}

[]

()

#

+

-

.

!

16. 小型文本

Markdown语法:

    <small>文本内容</small>

预览效果:

小型文本文本内容

17. 背景色:

Markdown本身不支持背景色设置,需要采用内置html的方式实现:借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色的功能。

Markdown语法:

    <table><tr><td bgcolor=orange>背景色是:orange</td></tr></table>

预览效果:

背景色是:orange

18. 字体、字号与颜色:

Markdown语法:

    <font face="黑体">我是黑体字</font>
    <font face="微软雅黑">我是微软雅黑</font>
    <font face="STCAIYUN">我是华文彩云</font>
    <font color=#0099ff size=7 face="黑体">color=#0099ff size=72 face="黑体"</font>
    <font color=#00ffff size=72>color=#00ffff</font>
    <font color=gray size=72>color=gray</font>
    
    Size:规定文本的尺寸大小。可能的值:从 1 到 7 的数字。浏览器默认值是 3

预览效果:

我是黑体字

我是微软雅黑

我是华文彩云

color=#0099ff size=72 face="黑体"

color=#00ffff

color=gray

posted @ 2017-07-26 23:26  逍遥超儿  阅读(510)  评论(0编辑  收藏  举报