写文章怎么能不知道Markdown 基本使用技巧呢

558 阅读10分钟

image

一、概述

1.1 设计理念

  Markdown是一种用来写作的轻量级标记语言,它用简洁的语法代替了排版、字体设置,使我们可以专心写作,目前被越来越多的开发者、写作爱好者使用。它可以被编译成 Html 页面,或者也可以单独以纯文本的形式呈现。

  Markdown 易于阅读,方便创作web文档,利于各平台无缝分发。Markdown 语法灵感最大的来源还是纯文本 email 的格式,完全由标点符号标签组成的纯文本。

1.2 内联 HTML 语法

1.2.1 基本语法

  对于 Markdown 文档来说,可读性是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布,并且看起来不会像是由许多标签或是格式指令所构成。总之, Markdown 的语法全由一些符号所组成,这些符号经过精挑细选,其作用一目了然。

  Markdown 完全兼容 HTML 语法,可以直接在 Markdown 文档中插入 HTML 内容:

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
1 2
3 4

1.2.2 文本修饰类标签

  • Markdown 中的标题对应着 HTML 中的 h 标签。一个*对应<h1>,两个*对应<h2>,以此类推。
  • Markdown 中的粗体强调对应着 HTML 中的<strong>标签。
  • Markdown 中的斜体强调对应着 HTML 中的<em>标签。
  • Markdown 中的删除线对应着 HTML 中的<del>标签。
  • Markdown 中的下划线对应着 HTML 中的<u>标签。

1.2.3 内容排版类标签

  • Markdown 中的行内代码块对应着 HTML 中的<code>标签。
  • Markdown 中的多行代码块对应着 HTML 中的<pre>标签。
  • Markdown 中的有序列表对应着 HTML 中的<ol><li>标签。
  • Markdown 中的无序列表对应着 HTML 中的<ul><li>标签。
  • Markdown 中的引用对应着 HTML 中的<blockquote>标签。
  • Markdown 中的分割线对应着 HTML 中的<hr>标签。
  • Markdown 中的表格对应着 HTML 中的<table>标签。

二、标题与段落

2.1 标题

  Html 中通常使用<H1>-<H6>这六种标签对来表示六级标题,所以在Markdown标准语法中也定义了标题。使用 # 号可表示1-6级标题,一级标题对应一个 # 号,二级标题对应两个 # 号,以此类推

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

效果展示:

image

2.2 段落格式

  Markdown 段落没有特殊的格式,直接编写文字就好,段落的换行是使用两个以上空格。

image

  当然也可以在段落后面使用一个空行来表示重新开始一个段落,相邻两行文本,如果中间没有空行,会显示在一行中。

image

2.3 缩进字符

  • 不断行的空白格
&nbsp; 或 &#160
  • 半角的空格
&ensp; 或 &#8194
  • 全角的空格
&emsp; 或 &#8165

三、字体

3.1 加粗、斜体

  • 以前后各两个*(星号)或各两个_(下划线符)包围的文本是加粗文本。
  • 以前后各一个*(星号)或各一个_(下划线符)包围的文本是倾斜文本。
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___

image

  如果实在喜欢 Html 标签,也可以这样写

这是一段<b>加粗</b>的文字。  
这是一段<strong>加粗</strong>的文字。
这是一段<em>倾斜</em>文本。
这是一段<i>倾斜</i>文本。

这是一段加粗的文字。
这是一段加粗的文字。
这是一段倾斜文本。
这是一段倾斜文本。

3.2 文本字体

<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>

我是黑体字

我是微软雅黑

我是华文彩云

3.3 文本大小

大小的属性名为size,Size规定文本的尺寸大小,取值从 1 到 7,浏览器默认值是 3。

<font face="黑体" size=2>我是黑体2号字</font>
<font face="黑体" size=3>我是黑体3号字</font>
<font face="黑体" size=7>我是黑体7号字</font>

我是黑体2号字

我是黑体3号字

我是黑体7号字

3.4 文本颜色

颜色虽是样式属性,但为了区别于强调有时会用到,通常不同的颜色代表不同的状态。

<font color="red">文本颜色</font>

文本颜色

颜色名十六进制颜色值rgb颜色
黑色(black)000000rgb(0, 0, 0)
蓝色(blue)0000FFrgb(0, 0, 255)
灰色(grey)808080rgb(128, 128, 128)
绿色(green)008000rgb(0, 128, 0)
橙色(orange)FFA500rgb(255, 165, 0)
红色(red)FF0000rgb(255, 0, 0)
黄色(yellow)FFFF00rgb(255, 255, 0)

3.5 文字对齐

  对于标准的markdown文本,是不支持居中对齐的。不过markdown支持html语言,所以采用html语法格式书写即可。

<p align="left">左对齐</p>
<center>这一行需要居中</center>
<p align="right">右对齐</p>

左对齐

这一行需要居中

右对齐


3.6 下划线

  下划线可以通过 HTML 的 <u> 标签来实现:

我的正常状态下的字体

<u>我是加了下划线的字体</u>

效果展示:

我的正常状态下的字体

我是加了下划线的字体

3.7 删除线

  如果段落上的文字要添加删除线,只需要在文字的两端加上两个波浪线 ==~~== 即可,实例如下:

我的正常状态下的字体

~~我是加了删除线的字体~~

效果展示:

我的正常状态下的字体

我是加了删除线的字体

3.8 文字注音

  对于一些多音字或者生癖字,留下注音能帮助读者更好的阅读。

<ruby>饕餮 <rt>tāo tiè</rt></ruby>是古代中国神话传说中的一种神秘怪物。

饕餮 tāo tiè是古代中国神话传说中的一种神秘怪物。

四、引用与标记

4.1 引用

  Markdown 引用是在内容开头使用 > 开头的符号。若是单行引用内容,则可以直接在引用内容之前添加 ==>==;若是多行引用内容,这需要在每一行或者只在首行左侧添加 > 就可以,但是如果中间有空行且空行左边没有>,则会退出引用模式。另外区块是可以嵌套的,一个 > 是最外层,两个 > 符号是第一层嵌套,以此类推:

这是普通内容

> 这是引用的内容
>> 这也是引用的内容
>>> 这也是引用的内容
>>>> 这也是引用的内容
>>>>>>>>>>>>>> 我叫腰间盘

效果展示:

这是普通内容

这是引用的内容

这也是引用的内容

这也是引用的内容

这也是引用的内容

我叫腰间盘

4.2 高亮

  文本高亮在标识搜索关键词的场景下用到,通常用于提示用户关键词的位置,以便用户更快的找到。如果需要,也可以针对一句话甚至一个段落高亮。

这是普通文本

==这是高亮文本==

<mark>这是高亮文本</mark>

效果展示:

这是普通文本

==这是高亮文本==

这是高亮文本

4.3 分割线

  可以在一行中用三个以上的星号、减号、底线来建立一个分隔线。每个符号之间可以用空白符,但是行内不能有其他东西。下面每种写法都可以建立分隔线:

***
* * *
*****
- - -
----------

效果展示:






4.4 行内代码引用

  如果是段落上的一个函数或片段的代码可以用反引号把它包起来(==`==),例如:

执行了`print`方法

效果展示:

执行了print方法

4.5 代码块引用

  用 ``` ``` 包裹一段代码,并指定一种语言(也可以不指定):

```javascript
$(document).ready(function(){
	alert();
});
```

效果展示:

$(document).ready(function(){
	alert();
});

五、插入

5.1 插入链接

[链接名称](链接地址 'title text')

或者

<链接地址>

例如:

这是一个链接 [百度一下](https://www.baidu.com)

这是一个链接 百度一下

5.2 插入图片

  Markdown 图片语法格式如下:

![找不到图像文件时显示的文本](图片地址)

![找不到图像文件时显示的文本](图片地址 "可选标题")
  • 开头一个感叹号 !
  • 接着一个方括号,里面放上图片的替代文字
  • 接着一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上选择性的 'title' 属性的文字。
![img](https://www.baidu.com/img/flexible/logo/pc/result.png)

效果展示:

img转存失败,建议直接上传图片文件

六、列表与表格

Markdown 支持有序列表和无序列表。

6.1 有序列表

有序列表使用数字并加上 . 号来表示,如

1. 第一项
2. 第二项
3. 第三项

image

6.2 无序列表

  无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记,这三个字符使用任意一个字符都可以,编译后的结果是一样的。

* 第一项
* 第二项
* 第三项

+ 第一项
+ 第二项
+ 第三项

- 第一项
- 第二项
- 第三项

image

6.3 列表嵌套

  无论哪一种列表都可以互相嵌套,只需在子列表中的选项添加四个空格即可。

1. 第一项:
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项:
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素

image

6.4 任务列表

  • 尚未开始的任务,文本行以 [ ] 开头;
  • 已经完成的任务,文本行以 [x] 开头;
- [ ] **Markdown 编辑器学习**
    - [ ] 增加 TOC 语法
    - [ ] 增加流程图、序列图、甘特图、Todo 列表
    - [x] 有道云笔记Markdown指南 [【简明版】](http://note.youdao.com/iyoudao/?p=2411)
    - [x] 有道云笔记Markdown指南 [【进阶版】](http://note.youdao.com/iyoudao/?p=2445)

效果示例:

  • Markdown 编辑器学习
    • 增加 TOC 语法
    • 增加流程图、序列图、甘特图、Todo 列表
    • 有道云笔记Markdown指南 【简明版】
    • 有道云笔记Markdown指南 【进阶版】

注意:

  1. 无序列表与加粗可能冲突!!!
  2. 嵌套列表、引用、代码块都涉及Tab符或空格缩进,很容易混淆,高亮显示也是不准确的。因此建议不要同时使用这三种元素。

6.5 表格

  Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。语法格式如下:

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

注意:第二行必须得有,并且第二行的冒号代表对齐格式,分别为左对齐(:---)、居中(:---:)、右对齐(---:

| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格左对齐 | 单元格右对齐 | 单元格居中对齐 |

以上代码效果展示:

左对齐右对齐居中对齐
单元格单元格单元格
单元格左对齐单元格右对齐单元格居中对齐

七、特殊字符

  在 HTML 中, 有两个字符需要特殊对待: < 和 &,左尖括号用于起始标签。如果你想将它们用作字面量, 你必须将它们转义为字符实体, 例如<&

特殊字符描述字符的代码
空格符
<小于号<
大于号>
&和号&
人民币¥
©版权©
®注册商标®
°C摄氏度°°C
±正负号±
×乘号×
÷除号&devide;
²平方(上标²)²
³立方(上标³)³

八、语法高亮(着色)

  MarkDown里对代码块的引用语法是通过使用 `````` 来包含多行代码, ``` 要独占一行。在第一组 ``` 之后添加代码的语言,如 javascipt,即可将代码标记为 JavaScript。常用的代码语言以及关键字有:

名称关键字
C#c-sharp , csharp
CSScss
SASS&SCSSsass , scss
Erlangerl , erlang
Javajava
JavaScriptjs , jscript , javascript
PHPphp
Shellbash , shell
Pythonpy , python
Rubyruby , rails , rb
Scalascala
SQLsql
VisualBasicvb , vbnet
XMLxml , xhtml
Swiftswift
GOgo , golang
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}

结语

把今天最好的表现当作明天最新的起点…...~

  投身于天地这熔炉,一个人可以被毁灭,但绝不会被打败!一旦决定了心中所想,便绝无动摇。迈向光明之路,注定荆棘丛生,自己选择的路,即使再荒谬、再艰难,跪着也要走下去!放弃,曾令人想要逃离,但绝境重生方为宿命。若结果并非所愿,那就在尘埃落定前奋力一搏!

image