2017-03-03

Markdown快速入门

写在前面

经过了一番折腾，我的博客终于开通了！愁于第一篇博客写什么的同时，却发现自己好像连Markdown怎么用都还不清楚，于是这第一篇博客就选择记录自己学写博客的过程，边学边用，现学现用。

Markdown 简介

Markdown是一种轻量级标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式，语法简单明了，使文字编辑者更专注于文字内容而不纠结于排版样式。

Markdown编辑器

在选择编辑器时，我也查阅了一些资料，可支持Markdown的编辑器有很多，我这里就不一一介绍了，贴几篇别人整理的Mardown编辑器介绍或比较：

Sublime Text + LiveReload + Chrome

最后我选择的是 Sublime Text + LiveReload + Chrome，LiveReload用于实时刷新，Sublime Text安装LiveReload插件，Chrome启用LiveReload扩展程序。使用时，用Sublime编辑.md文件，由于我是使用的Hexo搭建的博客，运行hexo s -g命令即可自动将md文件生成html（若想直接预览md文件效果，可在Chrome中添加扩展程序“Markdown Preview”进行预览），在Chrome上输入调试地址即实时刷新预览。具体配置步骤如下：

在Sublime Text 3 中安装插件

快捷键ctrl + shift + p 打开命令面板
输入add repository, 可看到下方弹出如下输入框，输入https://github.com/NickWoodhams/LiveReload.Git，Enter, 由于Sublime Text 3 中直接使用“Package Control: Install Package”不能用了，只能从github上下载
快捷键ctrl + shift + p 再次打开命令面板
输入install package, Enter
在弹出的输入框中输入liveReload, Enter，下载完成后，未避免每次重启Sublime Text都需要启动LiveReload，可以做如下配置：
preferences->packge settings ->livereload->settings-default

{
     "enabled_plugins": [
          "SimpleReloadPlugin",
          "SimpleRefresh"
     ]
}

在Chrome中安装LiveReload扩展程序

设置 -> 扩展程序 -> 获取更多扩展程序，找到LiveReload，下载并启用，若是需要直接预览文件，则需要将“允许访问文件网址”勾上

修改文件-实时预览

预览Hexo博客：在GitBash中执行 hexo s -g生成并预览，在Chrome中打开预览地址http://localhost:4000，点击右上角的LiveReload插件图标，中心的圆圈为由空心变成实心，即表示可对当前页面实时刷新；在Sublime Text中修改md文件，每一次ctrl + s保存文件，Chrome中页面就会刷新，即实现实时预览
直接预览md文件：在Chorme中安装“Markdown Preview”扩展程序，启用并勾选“允许访问文件网址”，即可用Chrome打开md文件了，接下来的步骤跟上述一样

Sublime Text还有很多支持Markdownd的插件，如Markdown Editing，Markdown Preview等，都只要用“Install Package”直接下载就好了。

Markdown 基本语法

区块元素

段落和换行

空行实现段落
一个 Markdown 段落是由一个或多个连续的文本行组成，它的前后要有一个以上的空行。
<br />标签实现段落
在插入出先按入两个以上的空格然后回车，效果是

This is paragraph 1.  <br />This is paragraph 2.

效果：
段落演示

标题

类Setext形式

使用底线的方式，利用 ‘=’ （最高阶标题）和 ‘-’ （第二阶标题），数量不限，例如：

This is an H1
=============

This is an H2
-------------

效果：
标题演示1

类atx形式

在行首插入1-6个‘#’，分别对应标题一到6，例如：

# This is H1
## This is H2
### This is H3
#### This is H4
##### This is H5
###### This is H6

效果：
标题演示2

区块引用

Markdown的引用使用‘>’符号，在引用的部分每行行首加上一个’>’，或段落首行行首加’>’；引用嵌套可使用多个’>’，如：

> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.

效果：
引用演示

列表

有序列表

有序列表则使用数字接着一个英文句点，但列表标记上使用的数字并不会影响输出的 HTML 中的排序结果。如：

1. Item1
3. Item2
5. Item3

效果：
有序列表演示

若不想使用列表，但又想显示“123. content”，只要在句点前加入转义符’\’，如：123\. content，即可

无序列表

无序列表使用’*’、’+’或’-‘符号来标记，这三者等同，如：

* Item1
+ Item2
- Item3

效果：
无序列表演示

列表嵌套引用

列表内嵌套引用，则’>’前需要缩进4个空格

*   A list item with a blockquote:

    > This is a blockquote
    > inside a list item.

效果：
列表嵌套引用演示

列表嵌套代码块

列表内嵌套代码块，则’>’前需要缩进两次，即8个空格

*   A list item with a code block:

        > This is a code block inside a list item.

效果：
列表嵌套代码演示

代码区块

要在 Markdown 中建立代码区块，只需将代码前加入空行且整体缩进 4 个空格即可，如：
代码块中的

This is a paragraph.

    This is a code block.

效果：
代码区块演示

分隔线

在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。如：

***

---

___

分割线效果：
分割线演示

区段元素

链接

行内式

要建立一个行内式的链接，只要在方块括号”[]”后面紧接着圆括号”()”并插入网址链接即可，如果你还想要加上链接的 title 文字，只要在网址后面，用双引号把 title 文字包起来即可，title为打开的链接页面标签名，链接也可以替换成本地文件的相对路径

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

效果：
行内式链接演示

参考式

参考式的链接类似于论文中的参考文献的引用，可读性更强。
在链接文字的括号后面再接上另一个方括号”[]”，而在第二个方括号里面要填入用以辨识链接的标记：

This is [an example][id] reference-style link.

然后在文件的任意处，把这个标记的链接内容定义出来
以下这三种链接的定义都是相同：

[id]: http://example.com/  "Optional Title Here"
[id]: http://example.com/  'Optional Title Here'    <!-- 有一个已知的问题是 Markdown.pl 1.0.1 会忽略单引号包起来的链接 title。 --!>
[id]: http://example.com/  (Optional Title Here)

效果与行内式是一样的：
参考式链接演示

强调

Markdown 使用星号（*）和底线（_）作为标记强调字词的符号，显示斜体，用两个 * 或 _ 包起来的话，显示加粗，例如：

*single asterisks*

_single underscores_

**double asterisks**

__double underscores__

效果：
文字强调演示

行内代码

如果要标记一小段行内代码，你可以用反引号把它包起来（`）

Use the `printf()` function.

效果：
行内代码演示1
如果要在代码区段内插入反引号，你可以用多个反引号来开启和结束代码区段：

There ``is a literal backtick (`) ``here.

效果：
行内代码演示1

图片

图片的标记方法与连接类似，也分为行内式和参考式。

行内式

格式如下：

![Alt text](/path/to/img.jpg)
![Alt text](/path/to/img.jpg "Optional title")

参考式

格式如下：

![Alt text][id]

id为图片参考的名称，然后在文件的任意处，把这个标记的链接内容定义出来

[id]: url/to/image  "Optional title attribute"

其他

兼容HTML标签

不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。

要制约的只有一些 HTML 区块元素――比如 <div>、<table>、<pre>、<p> 等标签，必须在前后加上空行与其它内容区隔开，还要求它们的开始标签与结尾标签不能用制表符或空格来缩进。Markdown 的生成器有足够智能，不会在 HTML 区块标签外加上不必要的 <p> 标签。

特殊字符转换

在 HTML 文件中，有两个字符需要特殊处理： < 和 & 。 < 符号用于起始标签， & 符号则用于标记 HTML 实体，如果你只是想要显示这些字符的原型，你必须要使用实体的形式，像是 &lt; 表示 < 和，&amp;表示 & ，网址中的 & 字符也要转换。

不过需要注意的是，代码范围内，不论是行内还是区块， < 和 &两个符号都一定会被转换成 HTML 实体，这项特性让你可以很容易地用 Markdown 写 HTML code （和 HTML 相对而言， HTML 语法中，你要把所有的 < 和 & 都转换为 HTML 实体，才能在 HTML 文件里面写出 HTML code。）

自动连接

Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用尖括号包起来， Markdown 就会自动把它转成链接。

<http://example.com/>
<address@example.com>

转义符

Markdown 中有一些字符有其特殊含义，若需要其原本的符号，则需要在之前加反斜杠’\‘来表现，Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

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

参考资料

本文标题:Markdown快速入门

文章作者:Lollipop

发布时间:2017年03月03日 - 21时51分

最后更新:2017年05月07日 - 21时23分

原始链接:https://ruiruillp.github.io/2017/03/03/MakeDown/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。