Markdown初体验

Markdown初体验

  最近公司新项目处于设计阶段,没有太多的事情,难得清闲的时间,在拜读一些经典书籍,突然想开一个博客记录一些学习笔记,在CSDN上发现文章的编辑支持Markdown,于是花了一些时间研究了一些相关的语法。

  本文记录了一些常用的语法,由于本人也刚刚接触Markdown语法,只提供一些基本方法和示例,为了方便理解,提供了相应示例的效果演示。


目录 (Contents)

  • 语法 [TOC]

示例效果:

  • Markdown初体验
    • 目录 Contents
    • 注释 Comment
    • 分割线 Horizontal Rules
    • 段落缩进 text indent
    • 区块引用 Blockquote
      • 代码引用 Code Block
      • 文本引用 Text Block
    • 列表  List
      • 无序列表 Unordered List
      • 有序列表 Ordered List
      • 任务列表 Mission List
      • 列表格式 List Format
    • 文字样式 Text Styling
      • 加粗 Bold
      • 斜体 Italic
      • 下划线 Underline
      • 删除 Delete
      • 脚注 Footnote
      • 链接 Hyperlink
        • 自动链接 Autolink
        • 行内式 Inline
        • 参考式 Reference
      • 图片链接image href
        • 图片插入 Photo Insert
        • 图片链接 image href
    • 图表 Diagram
      • 表格 Table
      • 序列图 Sequence Diagram
      • 流程图 Flow Diagram
    • 数学公式 Mathematical Formula
    • 标题 Header
  • 一级标题
    • 二级标题
      • 三级标题
        • 四级标题
          • 五极标题
            • 六级标题
  • 小结


注释 (Comment)

注释内容并不会被浏览器所渲染,因此并不会在文章中显示

语法


分割线 (Horizontal Rules)

  • 语法
- - -
----------

段落缩进 (text indent)

  • 普通段落一般都是顶格开始,无法使用空格或 tab 来缩进,包括引用标记符(>)后面的空格都无法实现缩进。
  • 如果硬要输入空格显示占位缩进效果,可以嵌入空格对应的 HTML Entity 实体码。

普通自然行行首敲2个空格无占位缩进效果。
    该行行首添加了4个不断行的空白格( #160;
    该行行首添加了4个半方大的空格(
    该行行首添加了4个全方大的空白(


区块引用 (Blockquote)

代码引用 (Code Block)

  • 该区块中Markdown语法无效,使用任何Markdown语法都被认为是单纯的文本符号。
  • 效果与

    类似(注:下图中出现的\为转义符,单纯为满足显示bug,实际代码中并不需要 。)

  • 语法:```Hello World```

```#include 
int main(int argc, const char * argv[]) {
    // insert code here...
    printf("Hello, World!\n");
    return 0;
}
\```

示例效果:

#include 
int main(int argc, const char * argv[]) {
    // insert code here...
    printf("Hello, World!\n");
    return 0;
}

文本引用 (Text Block)

  • 该区块中Markdown语法依然有效,也就是说在改区块中使用任何Markdown语法,是可以看出效果的。

  • 语法 >

>少壮不努力,**老大**写程序
>年轻人不好好干活,还得_老大_还要写程序

示例效果:

少壮不努力,老大写程序
年轻人不好好干活,还得老大还要写程序

  • 还可以实现多层的嵌套
> 宇宙
>> 太阳系
>>>地球

>>太阳系
>
>宇宙

示例效果:

宇宙

太阳系

地球

太阳系

宇宙


列表  (List)

列表分为无序列表有序列表

无序列表 (Unordered List)

  • 语法 - + *(注:符号后面有一个空格)
- 列表1以‘-’开头
+ 列表2以‘+’开头
* 列表3以‘*’开头

示例效果:

  • 列表1以‘-’开头
  • 列表2以‘+’开头
  • 列表3以‘*’开头
  • 列表标记前增加tab,可以实现嵌套效果
 - 列表
    - 有序列表
        - 普通列表
        - 列表嵌套
    - 无序列表
    - 任务列表 
- 字体

示例效果:

  • 列表
    • 有序列表
      • 普通列表
      • 列表嵌套
    • 无序列表
    • 任务列表
  • 字体

有序列表 (Ordered List)

  • 语法1. 2. 3. (注:.后面有空格)
1.Programming is like sex: one mistake and you’re providing support for a lifetime.
2.A computer is like air conditioning: it becomes useless when you open Windows.
3.Talk is cheap. Show me the code.

示例效果:

  1. Programming is like sex: one mistake and you’re providing support for a lifetime.
  2. A computer is like air conditioning: it becomes useless when you open Windows.
  3. Talk is cheap. Show me the code.
  • 有序列表和无序列表可以进行混排
- mission1
1.mission1 to do
2.mission1 done
- mission2
1.mission2 to do
2.mission2 failed

示例效果:

  • mission1
    1.mission1 to do
    2.mission1 done
  • mission2
    1.mission2 to do
    2.mission2 failed

任务列表 (Mission List)

  • 语法:- [] 任务1 - [x] 任务2
    []会生成一个☐,[x]则会生成☑︎
- [ ] 任务1
- [x] 任务2

示例效果:

  • ☐ 任务1
  • ☑︎ 任务2

列表格式 (List Format)

  • 根目录的第一个子目录必须添加:,后面要添加空格。
  • 第二个子目录开始:可以不添加,但是会影响行间距,建议加上。
  • 根目录中如果有子目录,连接下一个根目录时,要用回车隔开,不然会被系统认为是上一个根目录的子目录。
  • 语法:
项目1
: 定义 A
: 定义 B

项目2
: 定义 C
: 定义 D

    > 定义D内容

示例效果:

项目1
定义 A
定义 B
项目2
定义 C
定义 D
定义D内容

文字样式 (Text Styling)

加粗 (Bold)

**加粗**
__加粗__
<b>加粗b>
<strong>加粗strong>

示例效果:

加粗

斜体 (Italic)

*斜体*        
_斜体_  
<i>斜体i> 
<em>斜体em>

示例效果:

斜体

下划线 (Underline)

<u>下划线u>

示例效果:

下划线

删除 (Delete)

~~删除~~

示例效果:

删除

脚注 (Footnote)

  • 语法
生成一个脚注[^footnote]
[^footnote]: 这里是脚注的内容
[^Footnote]:footnote[^Footnote2]
[^Footnote]:add explanatory notes to or supply with critical comments
[^Footnote2]:
a printed note placed below the text on a printed page

示例效果:

1footnote 2
  • Markdown 对于 HTTP(s) 协议开头的超链接地址,会生成自动链接。
    http://www.csdn.net/

行内式 (Inline)

  • 在方块括号后面紧接着圆括号并插入链接网址即可在一行内构建链接。
  • 如果是要链接到本机资源,可以使用相对路径(./user/pathToYour/resource)
[Chinese Software Developer Network](http://www.csdn.net) 

示例效果:

Chinese Software Developer Network

  • 还可以在括号内添加标题,添加后当鼠标悬浮在超链接文本上时就会显示标题内容了
[Chinese Software Developer Network](http://www.csdn.net/ "CSDN") 

示例效果:

Chinese Software Developer Network

参考式 (Reference)

  • 参考式的链接是在链接文字的括号后面再接上另一个方括号,在第二个方括号里面填入用以辨识链接的标记id,然后在其他地方给出该标记id真正的链接地址。
[Chinese Software Developer Network][CSDN_referid]

[CSDN_referid]:http://www.csdn.net/

示例效果:

Chinese Software Developer Network


图片链接(image href)

图片插入 (Photo Insert)

  • 语法与文字链接类似,只不过前面要加上!
![CSDN_Logo](http://www.csdn.net/css/logo.png) 

  • 与文字连接一样可以提供悬浮标题
![BaiDu_Logo](https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png "BaiDu_Logo") 

BaiDu_Logo

图片链接 (image href)

[![CSDN_Logo](http://www.csdn.net/css/logo.png "CSDN_Logo")](http://www.csdn.net/)


图表 (Diagram)

表格 (Table)

  • 语法
项目     | 价格
-------- | ---
Computer | $1600
Phone    | $12
Pipe     | $1

示例效果:

项目 价格
Computer $1600
Phone $12
Pipe $1

  • 可以使用冒号定义对齐的方式:(左侧冒号表示左侧对齐,默认是左侧对齐,右侧冒号表示右侧对齐,两侧冒号表示居中)
| 项目      |    价格 | 数量  |
| :-------- | --------:| :--: |
| Computer  | 1600 元 |  5   |
| Phone     |   12 元 |  12  |
| Pipe      |    1 元 | 234  |

示例效果:

项目 价格 数量
Computer 1600 元 5
Phone 12 元 12
Pipe 1 元 234

序列图 (Sequence Diagram)

下图中出现的\为转义符,单纯为满足显示bug,实际代码中并不需要 。

```sequence
Leon->Ada: Hey,Ada,Come to my arm.
Note right of Ada: A minute later,say:
Ada-->Leon: fuck off
\```

示例效果:

Created with Raphaël 2.1.0 Leon Leon Ada Ada Hey,Ada,Come to my arm. A minute later,say: fuck off

流程图 (Flow Diagram)

```flow
st=>start: Start
e=>end: End
op=>operation: MyOperation
cond=>condition: Sure?

st->op->cond
cond(yes)->e
cond(no)->op

示例效果:

Created with Raphaël 2.1.0 Start MyOperation Sure? End yes no

数学公式 (Mathematical Formula)

  • 这个功能并没有太多的研究,只列举两个小栗子,更为复杂的用法可见Ryan Zhao写的Mathjax与LaTex公式简介 或官方推荐的MATHEMATICS

  • 行内公式,数学公式为:
    $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$。

    示例效果:

    Γ(n)=(n1)!n

  • 块级公式:
    $$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

    示例效果:

    x=b±b24ac2a


标题 (Header)

  • 共有1~6级标题(对应 HTML 中的

    -

    标签),1级标题字体最大。
  • #的个数决定标题的级数
  • 可以在行尾加上对应或不限数量的 # 号,然而并没有什么用。行尾增加的#号之后不可以再增加字符。

语法:
# 一级标题

一级标题

## 二级标题 ##

二级标题

### 三级标题

三级标题

#### 四级标题

四级标题

##### 五级标题

五极标题

###### 六级标题##########

六级标题

小结

  • Markdown语法简单易懂,上手很快,可以帮助实现nice的排版效果
  • 可以内嵌 HTML实现一些Markdown语法不支持的功能,扩展性较强
  • 缩进方面,感觉很不自由,目前未发现什么快捷的方式随意缩进
  • 与C一样,\为转义符,可以转义一些系统关键字
  • 由于笔者刚刚接触Markdown语法,部分说明并不是很详细,如有疑问,欢迎交流
  • 以上语法基本已可以满足大部分人编写文章的需求,如有扩展,欢迎补充,笔者也会在往后的使用和学习中添枝加叶

  1. add explanatory notes to or supply with critical comments ↩
  2. a printed note placed below the text on a printed page ↩

你可能感兴趣的:(Markdown)