Markdown

03_Markdown

Markdown 是一种轻量级标记语言,创始人为约翰 · 格鲁伯(英语:John Gruber)。它允许人们 “使用易读易写的纯文本格式编写文档,然后转换成有效的 XHTML(或者 HTML)文档”。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

由于 Markdown 的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如:GitHub、reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge 等。甚至 Markdown 能被使用来撰写电子书。

Typora 使用的是 GitHub Flavored Markdown 标准。

为什么要整理这篇文章?

  • 第一次使用Wordexpress(以下简称wp)建站,发现自带编辑工具太难用了,排版令人发狂,而且发布出来的页面十分丑陋!!!
  • wp中可以使用的插件,例如:wp-gruber-markdown、WP Editor等,难以令人感到满意,而且对于公式、表格没有很好的支持
  • 关于“Markdown”这篇文章,最初是计划作为公众号(公众号:beanspower)的第一篇文章。奈何微信公众号的文本渲染有与wp相似的问题,难以获得满意的排版,一直处于停滞状态。
  • 希望它能作为我在互联网整理学习的头作。

MarkDown 相关语法

1. 目录

目录是每篇文章的骨架,展示了全文的结构思路,需要向读者展示目录时,要在这段文字前加 “[TOC]” 号即可。

代码如下:

[TOC]

效果如下:


2. 字符格式

2.1 加粗

代码如下:

**哈哈哈**

效果如下:
哈哈哈

2.2 斜体
代码如下:

*哈哈*

效果如下:
哈哈

2.3 下划线
代码如下:

<u>哈哈哈</u>

效果如下:
哈哈哈

2.4 删除线
代码如下:

~~哈哈哈~~

效果如下:
哈哈哈

2.5 高亮
代码如下:

==哈哈哈==

效果如下:
哈哈哈

2.6 上标
代码如下:

哈^哈哈哈^

效果如下:
哈哈哈

2.7 下标
代码如下:

哈~哈哈哈~

效果如下:
哈哈哈

2.8 文本居中
代码如下:

<center>要居中的文字</center>

效果如下:

要居中的文字

3. 标题

标题是每篇文章都需要也是最常用的格式,在 Markdown 中,如果一段文字被定义为标题,只要在这段文字前加 “#” 号即可。在 Typora 中,只需按快捷键 Ctrl+1,Ctrl+2,……,Ctrl+6,就可以依次输入一级到六级标题——标题的格式会立刻显现

代码如下:

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

效果如下:

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

4. 引用

如果你需要引用一小段别处的句子,那么就要用引用的格式。只需要在文本前加入**“>”** 这种尖括号(大于号)即可。在 Typora 中,只需要输入**“>”之后输入需要的引用内容就可以生成引用块格式。Typora 在随后的输入过程中会自动为你添加“>”**和行间隔。引用块内的引用也是被允许的,只需要在引用块内同样使用>即可。

代码如下:

>本文由beanspower编辑

效果如下:

本文由beanspower编辑


5. 列表项

5.1 有序列表
指代编号项为数字:1、2、3…
代码如下:

1.内容1
2.内容2
3.内容3

效果如下:
1.内容1
2.内容2
3.内容3

5.2 无序列表
指代编号项为符号,可以在列表内容前加上+、*、- 等(符号和列表内容之间要有一个空格),这里以 – 为准
代码如下:

- 内容1
* 内容2
+ 内容3

效果如下:

  • 内容1
  • 内容2
  • 内容3

5.3 任务列表
任务清单是一种特殊的列表,列表中的事项用[ ]或者[x]分别标记未完成和已完成,可以通过鼠标点击事项前的任务框,从而切换任务清单事项中的状态
代码如下:

- [ ] 今天要完成公众号内容编写
- [x] 今天要完成公众号内容编写

效果如下:

  • 今天要完成公众号内容编写
  • 今天要完成公众号内容编写

6. 代码

6.1 单行代码
代码如下:

`String str1 = "hello";`

效果如下:
String str1 = "hello";

6.2 代码块
Typora 仅仅支持 GFM 的代码块,源码块是不支持的。 支持自定义代码块的语言,使用代码块的语法非常简单,输入''```语言类型''然后按下Enter 就可以,代码输入完毕后,再输入```即可。
代码如下:

 ```c++
int a=1
int b=2

效果如下:

int a=1
int b=2

7. 表格

创建表格,使用快捷键CTRL+T,或者使用代码" —: "表示右对齐, ":— "表示左对齐," :–: "表示居中对齐。
代码如下:

| 学科 | 姓名 | 成绩 |
| ---: | :--- | :--: |     
| 语文 | 小明 |A|
| 数学 | 小红 |B|
| 英语 | 小猪 |C|

效果如下:

学科 姓名 成绩
语文 小明 A
数学 小红 B
英语 小猪 C

8. 图片

8.1 本地图片
代码如下:

![图片名称](D:\Desktop\壁纸\16.jpg)

效果如下:
此处就不做展示了!!!

8.2 网络图片
代码如下:

![Logo](https://www.beanspower.cn/wp-content/uploads/2021/07/cropped-pinterest_board_photo-e1627119309590.png)

效果如下:
Logo


9. 链接

插入超链接
代码如下:

[百度](https://www.baidu.com)

效果如下:

百度


10. 表情包

代码如下:

:woman:
:cry:

效果如下:
👩
😢


11. 方框

代码如下:

- [ ] <kbd>吃饭</kbd>

- [ ] <kbd>睡觉</kbd>

- [ ] <kbd>打豆豆</kbd>

- [ ] <kbd>看剧</kbd>

豆豆在干什么

  • 吃饭

  • 睡觉

  • 打豆豆

  • 看剧

当然,kbd标签也可以作为按钮的样式,例如

<kbd>Ctrl</kbd>,<kbd>Shift</kbd>

按钮
CtrlShift


12. 其它

当然Markdown支持公式编辑和流程图渲染绘制。

12.1 数学公式

可以使用插件 – Markdown Preview Enhanced, 其利用 KaTeX 或者 MathJax 来渲染数学表达式。

12.2 流程图

Markdown Preview Enhanced 内部支持 flow charts, sequence diagrams, mermaid, PlantUML, WaveDrom, GraphViz,Vega & Vega-lite,Ditaa 图像渲染。 你也可以通过使用 Code Chunk 来渲染 TikZ, Python Matplotlib, Plotly 等图像。

12.3 Snippets

当使用 VScode 进行编辑时,可以通过Snippets快速完成文档模板的撰写。
通过导入自己DIY的json脚本:

     "Content": {
	 	"scope": "markdown",
	 	"prefix": "toc",
	 	"body": [
            "# 目录 { ignore } $1",
            "[TOC] "
	 	],
	 	"description": "Add content to the document"
	 },
     "Ignore": {
        "scope": "markdown",
        "prefix": "ign",
        "body": [
           "{ ignore }",
        ],
        "description": "Ignore some text when generate content "
    }

这里有一点需要注意:
默认情况下,Markdown的智能提示是被关闭的,因此需要去Settings.json激活该功能。

    "[markdown]": {
        "editor.wordWrap": "on",
        "editor.quickSuggestions": true
    },

参考

  1. Markdown Preview Enhanced
  2. 在WordPress中使用Markdown进行写作的正确姿势
  3. WordPress中实现Markdown编辑的终极解决方案