学习笔记

Markdown语法及原理

Markdown编辑器本身只是内容协作工具,本身并不支持文字排本,理论上它只是指出哪些内容是表格,哪些内容是标题,哪些是正文图片代码超链接,因此,Markdown的语法全由一些符号所组成,这些符号精挑细选,其作用一目了然,其目标就是实现易读易写。

Markdown语法的目标是成为一种适用于网络的书写格式,它的格式语法只涵盖纯文本可以涵盖的范围,不再Markdown涵盖范围之内的标签,都可以直接在文档里面用HTML撰写,不需要额外标注这是HTML伙食Markdown,只要直接加标签就可以。

写一个Markdown文档,可以直接使用Markdown语法和HTML的标签混合进行使用,因为最后都会转换成HTML,但要注意的是,在HTML区块标签间的Markdown格式语法将不会被处理。

注意标记符号后面要跟着空格

Markdown纯文本基本语法

1.标题

Markdown支持两种标题的语法,类Setext和类atx形式。

类Setext形式是用底线的形式,利用【=】表示最高阶标题和用【-】表示第二阶标题。

这是最高阶标题
=============

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

任何数量的【=】和【-】都可以有效果,但需要注意的是,由于分割线也可以用【—】来表示,因此在使用分割线时,一定要空一行,不然会把上方的文字识别为第二阶标题。

标题

===

类atx形式则是在行首插入1到6个【# 】加上空格,对应标题1到6阶

# 这是H1
## 这是H2
### 这是H3

2.字体

Markdown使用星号【*】和底线【_】作为标记强调字词的符号,你可以随便用你喜欢的样式,唯一的限制是,你用什么符号开启标签就要用什么符号结束,中文使用*更方便一些,因为它不区分全角半角也不需要切换输入法。

**加粗**
__加粗__

*倾斜*
_倾斜_

***加粗并倾斜***
~~加上删除线~~

**加粗**

加粗 加粗 倾斜 倾斜

***加粗并倾斜*** 加上删除线

强调也可以直接插在文字中间,但是你的【*】和【~】两边都有空白的话,它们就只会被当成普通的符号。

如果要在文字前后直接插入普通的型号或者底线,你可以用反斜线\

3.分割线

你可以在一行中用3个以上的星号【*】、减号【-】、或者底线【_】来建立分割线,行内不能有其他字符,你可以在星号或者减号中插入空格

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

4.引用

在需要引用的文字前面假如【>】可以表示引用,在Markdown文件中建立一个区块引用,那会看起来像是你自己先断好行,然后在每行的前面加上【>】:

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
> 
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.

Markdown也允许你偷懒仅在整个段落的第一行最前面加上个【>】:

> 这是引用
第二行

这是引用
第二行

5.列表

Markdown支持有序列表和无序列表,无序列表用星号【*】、加号【+】或是减号【-】作为列表标记;有序列表则是数字接着英文句点作为标记,数字可以是不按顺序的。

- 无序列表内容
+ 无序列表内容
* 无序列表内容

注意:- + * 跟内容之间都要有一个空格

列表可以嵌套,上一级和下一级之间敲3个空格即可

* 一级无序列表内容

   * 二级无序列表内容
   * 二级无序列表内容
   * 二级无序列表内容
1. 有序列表内容
2. 有序列表内容
3. 有序列表内容

注意英文句点后需要跟着空格

列表项目可以包含多个段落,每个项目下的段落都必须缩进 4 个空格或是 1 个制表符:

1.  This is a list item with two paragraphs. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit. Aliquam hendrerit
    mi posuere lectus.

    Vestibulum enim wisi, viverra nec, fringilla in, laoreet
    vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
    sit amet velit.

2.  Suspendisse id sem consectetuer libero luctus adipiscing.

6.表格

示例:表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容

第二行分割表头和内容。
- 有一个就行,为了对齐,多加了几个
文字默认居左
-两边加:表示文字居中
-右边加:表示文字居右
注:原生的语法两边都要用 | 包起来。此处省略

7.代码

在Markdown中加入代码块有两种方式: 第一种,只要简单地缩进 4 个空格或是 1 个制表符就可以

这是一个普通段落:

    这是一个代码区块。

(当然,前面要有一个空行和前面的文字分隔开)

第二种方法更为常用,单行代码:代码之间分别用一个反引号【`】【·】包起来即可

·单行代码· 

8.段落和换行

一个Markdown段落由一个或多个连续的问本行组成,它的前后要有一个以上的空行(空行的定义是显示上看起来像是空的,便会被视为空行,比如一行只包含空格与制表符也会被视为空行)。

普通段落不该用空格或制表符来缩进,我么能在两个不同的文字块之间,一定要空行以示区分,不然就会被归入同一文字块中。Markdown允许段落内的强迫换行(插入换行符)。如果要空一行,在插入处先按两个以上的空格然后回车即可。

但有时也可以使用标记来强制空行和空格,比如需要首行缩进的时候: 一个空格大小的表示:\  或 \  两个空格的大小表示:\ 或 \ 不换行空格:\ 或 \ 强制空行: \

Markdown语法进阶

1.更改字体、大小、颜色

<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=red>我是红色</font>
<font color=#008000>我是绿色</font>
<font color=Blue>我是蓝色</font>
<font size=5>我是尺寸</font>
<font face="黑体" color=green size=5>我是黑体,绿色,尺寸为5</font>

2.为文字添加背景色

由于style标签和标签的style属性不被支持,所以这里只能是借助table、tr、td等表格标签的bgcolor属性来实现背景色。

故这里对文字背景色的设置,只是将一整行看做一个表格,更改了那个各自的背景色(bgcolor)

<table><tr><td bgcolor=yellow>黄背景色yellow</td></tr></table>

3.设置文字居中

<center>居中</center>
<p align="left">左对齐</p>
<p align="right">右对齐</p>

4.加入上下标

直接使用HTML的语法即可

H<sub>2</sub>O  CO<sub>2</sub> 
爆米<sup>TM</sup>

显示结果:

H2O CO2
爆米TM

Markdown使用进阶

有时候在使用Markdown时,不仅要使用纯文本,还需要插入图片、链接等,由于Markdown只是关注于纯文本,因此这些操作都需要引用来完成

1.超链接

Markdown支持两种形式的链接语法:行内式和参考式,不管是哪一种,链接文字都是用方括号[]来标记

行内式的链接,只要在方括号后面紧接着圆括号并插入网址链接即可,注意方括号和圆括号之间不能有空格,如果你还想加上链接的title文字,只要在网址后面,用双引号把title文字包起来即可,title的双引号与网址之间有空格

这是一个[链接](http://lingjie.li "title")

这是一个链接

参考式的链接,是在链接文字的括号后面再接上另一个方括号,而在第二个方括号里面要填入用以辨识链接的标记

This is [an example][id] reference-style link. 
接着,在文件的任意处,你可以把这个标记的链接内容定义出来:  
[id]: http://example.com/  "Optional Title Here"

This is an example reference-style link.
接着,在文件的任意处,你可以把这个标记的链接内容定义出来:

链接内容的形式为: 方括号(前面可以选择性地加上至多三个空格来缩进),里面输入链接文字 接着一个冒号 接着一个以上的空格或制表符 接着链接的网址 选择性地接着 title 内容,可以用单引号、双引号或是括弧包着 链接网址也可以用尖括号包起来:[id]: <http://example.com/> “Optional Title Here”

链接辨别标签可以有字母、数字、空白和标点符号,但是并不区分大小写。

链接的定义可以放在文件中的任何一个地方,我比较偏好直接放在链接出现段落的后面,你也可以把它放在文件最后面,就像是注解一样。

此外,用这个方法还可以将图片转化为base64编码保存在.md文件中,这将在插入图片中介绍。

下面是一个参考式链接的范例:

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] [1] than from
[Yahoo] [2] or MSN.
[1]: http://google.com/ “Google” [
2]: http://search.yahoo.com/ “Yahoo Search”

还可以直接用链接名称的方式写:

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

I get 10 times more traffic from Google than from
Yahoo or MSN.

要知道,参考式的链接其实重点不在于它比较好写,而是它比较好读。 使用 Markdown 的参考式链接,可以让文件更像是浏览器最后产生的结果,让你可以把一些标记相关的元数据移到段落文字之外,你就可以增加链接而不让文章的阅读感觉被打断。

2.自动链接

只要用尖括号<>将链接括起来,Markdown会自动将它转换为链接

<http://lingjie.li>

http://lingjie.li

3.插入图片

很明显地,要在纯文字应用中设计一个「自然」的语法来插入图片是有一定难度的。 Markdown 使用一种和链接很相似的语法来标记图片,同样也允许两种样式: 行内式参考式

行内式的图片语法看起来像是:

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

详细叙述如下: 一个惊叹号 ! 接着一个方括号,里面放上图片的替代文字 * 接着一个普通括号,里面放上图片的网址或本地路径(可以是相对路径或绝对路径),最后还可以用引号包住并加上 选择性的 ‘标题’ 文字。

参考式的图片语法则长得像这样:

![Alt pic][id]

「id」是图片参考的名称,图片参考的定义方式则和连结参考一样:

[id]: url/to/image “Optional title attribute”

但是在这里有两个很大的问题: 1. 如果使用本地路径插入本地图片,不灵活不好分享,本地图片的路径更改或丢失都会造成markdown文件调不出图。 2. 插入网络图片,则非常依赖网络,如果是本地图片,还需要先上传到网络服务器上。

所以,如果你想上传本地图片,这里我也列出两个解决方法,这也是我查了很多文章总结的,这里欢迎大家来补充指教:

1. 将本地图片上传到github

首先在github中新建一个repo,然后git clone下来,然后把你想要的图片放到这个文件夹中然后上传,然后到GitHub中找到这个图片查看地址,在markdown中引用就好了。

这种方法的优点就在于插入式很灵活,github没有墙,你的文章上传到各个平台,图片也都基本不会丢失或找不到,但缺点就在于图片的管理很不方便,图片一旦多起来,你的本地仓库将会变得很大,而且你的文章可能涉及很多方面,管理也不方便,不过,也算是一个比较理想的解决方案。

2. 把图片存入markdown文件
  1. 用base64转码工具把图片转成一段字符串
  2. 把字符串填到基础格式中链接的那个位置。
  3. 由于图片转成base64编码,会非常的大,一般至少都要上千行,这个时候会发现插入的这一长串字符串会把整个文章分割开,非常影响编写文章时的体验。这时候就可以用参考式,把大段的base64字符串放在文章末尾,然后在文章中通过一个id来调用,文章就不会被分割的这么乱了。

这种方法的优点就是图片真的是不会丢啊,相当于直接将图片编码嵌入到文档中,但缺点也是显而易见的,就是base64编码实在是太长了啊,太长了,虽然可以放到文章结尾,但还是太长了,所以目前我还没找到更好的解决方法。

4.调整图片格式

到目前为止, Markdown 还没有办法直接指定图片的宽高,如果需要的话,则可以使用普通的 \ 标签。 * 图片位置——居左/居中/居右

利用markdown在编写文档时插入图片是默认靠左,有些时候将图片设置为居中时可以更加的美观,这时就需要在图片的信息前边添加如下语句:

<div align=center>![Alt pic] (http:...)

如果想将图片位于右侧,只需要将center改为right

设置图片大小

<img src="http:..." width = "100" height = "100" div align=right />

标签里,貌似就不能作为参考式的链接了,所以用base64调整图片大小还是很艰难,也希望大手能指导一下。

5.LaTeX公式

Markdown还有一大优势就是可以支持 LaTeX 的公式。 \$ 表示行内公式 \$$ 表示整行公式 访问 MathJax 参考更多使用方法。

https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference

这里说一个常用的,很多时候,我们在做笔记时候,需要画箭头,然后在箭头上需要写字,这里就可以用LaTeX公式来实现:

$ X\stackrel{F}{\longrightarrow}Y $

LaTeX 支持多种箭号,内容很丰富,这里就不一一列举了,大家可以参见Latex各种箭号符号。

https://blog.csdn.net/J__Max/article/details/86549124

6.内容目录

Markdown还有一个很方便的功能,就是可以根据标题自动生成目录。 在段落中填写 [TOC] 以显示全文内容的目录结构

在最后要说的是,Markdown其实还有很多强大的功能,比如画流程图、序列图、甘特图、Mermaid 流程图、Mermaid 序列图, 因为暂时用的比较少,而且上面的语法应该已经足够用了,所以这个就有待我下次再开发把。

Tips: 1. 用于Markdown语法标记的符号和后面的内容之间一定要加上至少一个空格,以便识别。 2. 在Markdown编辑中,你用「Enter」键来敲空行,最多只能空一行,如果想要在显示中有多行空行的话,则要用HTML标签来实现了。

发表回复