markdown 起航

markdown 本质上是 一种排版语言,为 web 写作而生,其所有的功能都是为了高效、快捷的写作而设计。markdown 以一种非常简单的语法代替 html 中复杂的标记符号,能让内容创作者把精力聚焦于所创作的内容本身,尽量减轻其排版等内容呈现上的负担。

markdown 在潜移默化中催生出一种排版标准。



一、markdown 基础要素

作为一种排版语言,markdown 中所有的语言要素和语法都指明了某种排版格式,都是为了简易排版而设计。如 markdown 作者所言:

Markdow的重点在于,它能让文件更容易阅读、编写。HTML 是一种发布的格式,Markdown是一种编写的格式,因此,Markdown的格式语法只涵盖纯文字可以涵蓋的范围。

可以说,markdown 是更为聚焦于文字的排版语言。

1. 标题

markdown 支持6级标题,标题文字前 # 号的个数决定标题的等级。

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

2. 文字

markdown 使用*(星号)、_(下划线)、~(波浪线)来控制文字的基本表现形式

斜体:*文字*
斜体:_文字_
粗体:**文字**
删除体:~~文字~~

3. 段落

3.1 markdown 中的段落定义

markdown 使用空行作为段落区分标记。这种设定与传统排版直观理解的段落有所不同,直接导致以下几种展现方式:

  • 不同行文字之间,没有空行,在页面上也是以一个段落呈现;
  • 不同行文字之间,有多个空行,也会按照一个空行计算;
  • 同一段落文字,如需人为分行显示,除第二行文字进行换行外,还需在第一行行尾加入两个以上空格

以下段落排版语法都是以上述基本设定为基础的。

3.2 列表

无序列表

*/+/- item 1
*/+/- item 2
*/+/- item 3

有序列表

1. item 1
2. item 2
3. item 3

3.3 引用

markdown 使用 >(大于号)作为引用标志符。只要在一个段落前使用 > 号,则整个段落以 “引用” 格式呈现。

> 这是一个有两段文字的引用,
> 这里是的占行文字1.
> 这里的占行文字2.

> 这是一个有两段文字的引用,
 这里是的占行文字1.
 这里的占行文字2.

基于 markdown 对段落的基本设定,上述两种形式都解析成为对一个段落的引用,排版呈现结果一致。

3.4 代码嵌入混排

(1) 行内混排

使用小段代码、某些代码元素时,直接使用 `(斜单引号)将代码元素包起即可。这种应用场景,往往是代码与文字往往混排在一起,代码需要区别于文字标出时。

我们编写的一个程序` hello world`,定义的第一个变量` int nCount`。

(2) 独立区块

当直接呈现大段代码时,有两种方式呈现:

  • 将 ```(连续三个斜单引号)置于代码区块的首行和末行即可;
  • 缩进方式:在代码区块中的每行代码前使用 tab 键或连续输入 4 个空格;
独立区块排版方式 1:

` ` `(连续三个斜单引号)
first code line.
second code line.
third code line.
` ` `(连续三个斜单引号)

独立区块排版方式 2:

    first code line.
    second code line.
    third code line.

4. 跳转

4.1 超链接

(1) 直接定义 — 行内混排超链接

markdown 提供 ” [显示文本](链接地址) ” 的语法形式超链接。

这种超链接是超链接最基础的形式。将超链接地址直接写到链接文字旁边,链接文字与链接地址的耦合度很高,直观且简单,不易出错。这种形式特别适用于普通文字与超链接文字混排的应用场景。从 markdown 文档的可读性上,这种直接定义的缺点是阅读视觉感官稍差,尤其是当链接地址比较长的时候,链接地址在正文中占用太多空间,影响 markdown 中核心文本间的连贯性。

欢迎来到[gogetter的小屋](http://www.gogetter.com)一游。

(2) 间接分体式定义 — 复用式超链接

markdown 提供 ” [链接文字][链接 id] ” 的超链接形式。在文本的任意位置可以进一步定义 [链接 id],具体形式为:

  • [链接 id] : 链接地址

这种超链接有些类似于论文中引用文献的格式。可以在链接文字旁先下个“锚点”,定义一个非常简洁”链接 id”,在其他位置再进一步完成链接地址的详细定义。从 markdown 文档的可读性上,“链接 id” 不会占用太多空间,很好的保持了 markdown 文档的连贯性。从应用上,“链接 id” 具有良好的复用性,如果某个链接在文章中多处使用,那么使用这种可多次复用超链接将非常好,它可以避免重复工作,对链接进行统一的管理。

我经常去的几个网站[Google][1]、[Leanote][2]以及[自己的博客][3]
[Leanote 笔记][2]是一个不错的[网站][]。

[1]:http://www.google.com "Google"
[2]:http://www.leanote.com "Leanote"
[3]:http://http://blog.leanote.com/freewalk "梵居闹市"
[网站]:http://http://blog.leanote.com/freewalk

4.2 anchor

markdown 使用 ” [跳转起点文字](#锚点id) ” 定义跳转的起点,使用 ” \ ” 来定义锚点。

1). 下锚(定义锚id),也就是定义我们跳转的目标
    < span id="destid">Hello World< /span>
2). 定义出发点,使用markdown的语法:
    [出发点文字](#destid)

“锚点” 在 web 页面内非常有用,使用 “锚点” 可以实现页面内任意跳转,非常灵活。不难看出,可利用锚点进一步生成文章目录。很多 markdown 的 toc 生成工具本质上都是利用锚点生成的目录。

5. 图片

5.1 外部地址引入图片

web 页面中的图片需要从外部文件或地址中引入时,理念上和引入外部的超链接有些相似。因此,在语法表述形式上,也非常的相似,主要的区别就是图片的语法在前面加了一个 ” !(感叹号)”。

(1) 直接定义

markdown 使用 ” ![图片名称](图片链接) ” 的形式,完成图片引用工作。

(2) 间接分体式定义 — 复用式图片引入

markdown 使用 ” ![图片名称][图片 id] ” 的形式,完成图片引用工作。其中,” id ” 的定义方式和链接参考一样:

  • [链接 id]:链接地址

可以放在文档的任何位置。

5.2 markdown 文件内含图片

外部引入图片的方式直观而简洁,不占用 markdown 文档过多资源。但是,由于 markdown 文档和图片不在同一文件中,如果文档或图片文件的存储位置发生变更,会产生文件一致性同步的问题。文档和图片合在一起无疑是一种最省心的方法,markdown 也为这种需求提供了支持,可以将图片直接放到 markdown 文档的内部。如此,虽然会增大 markdown 文档的体量,但同时也很好的解决的文档图片同步问题。

将图片内嵌到 markdown 文档中,核心工作是将图片文件进行编码(base64),然后将编码嵌入到 markdown 文档中。markdown 语法上也提供了直接定义和间接分体式定义两种形式。

(1) 直接定义

使用 ” ![图片名称](data:image/png;base64, 图片转换后的 base64 编码) “的形式完成图片的内嵌。

(2) 间接分体式定义

  • 先定义” ![图片名称][图片 id]
  • 在 markdown 文档任意位置进一步完成 “图片 id” 的定义
    • [图片 id]:data:image/png;base64, 图片转换后的 base64 编码

从内嵌图片的使用不难看出,图片转换后的 base64 编码一般都较长,使用直接定义对 markdown 文档的可读性有相当影响,此时间接分体式定义的优势更为明显。这一点无论图片内嵌定义,还是 url 定义,都是一样的。

6. 转义

与 html 类似,markdown 本身是一种标记语言,语法中占用的许多特定标记。想在页面中展示这些特定标记本身,需要对被占用的标记进行转义。

\ 反斜杠
\` 反引号
\* 星号
\_ 下划线
\{\} 大括号
\[\] 中括号
\(\) 小括号
# 井号
\+ 加号
\- 减号
\. 英文句号
\! 感叹号

二、markdown 扩展

markdown 聚焦于简介的文字排版,总的来说,是一种相对简易的排版样式。对于复杂、多样性的板式要求无能无力,为此,markdown 可直接内嵌 html 的标签。可以说,markdown 出于 html,又融于 html。

文字属性调整

排版中,markdown提供了基本的字体排版能力,字体型号、颜色、大小经常需要调整,此时直接在 markdown中嵌入 html 标签

字体
< font face="黑体">我是黑体字< /font>
< font face="微软雅黑">我是微软雅黑< /font>
字号
< font size=4>我是4号字< /font>
颜色
< font color=#0000dd>我是蓝色字< /font>
< font color=gray size=5>color=gray< /font>

< font color=#0099ff size=7 face="黑体">color=#0099ff size=72 face="黑体"< /font>

Size:规定了字体的尺寸大小。取值为:从 1 到 7 的数字。浏览器默认值是 3

文字下划线

嵌入 html 标签

<u>我们是有下划线的文字</u>

添加空格、空行

空格种类:

  • 一般空格 : &# 160; 或 & nbsp;
  • 半角空格 : &# 8194; 或 & ensp;  
  • 全角空格 : &# 8195; 或 & emsp;  

嵌入 html 标签

添加空格
& nbsp;
添加空行
<回车>& nbsp;<回车>

reference:

  1. https://daringfireball.net/projects/markdown/syntax
  2. https://markdown.tw
  3. https://blog.csdn.net/witnessai1/article/details/52551362
  4. https://www.jianshu.com/p/q81RER
  5. https://en.wikipedia.org/wiki/Markdown
  6. https://blog.csdn.net/geekleee/article/details/73018194#reference
  7. https://www.jianshu.com/p/280c6a6f2594
  8. https://www.jianshu.com/p/0c5d6678ed6d
  9. https://zhuanlan.zhihu.com/p/31125442
  10. https://blog.csdn.net/u010177286/article/details/50358720

发表评论

电子邮件地址不会被公开。 必填项已用*标注