标记语言Markdown介绍以及日常使用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xun527/article/details/78821095

Markdown介绍

  • Markdown是一种文本标记语言,用于快速文档排版
  • Markdown文件为纯文本文件,后缀名为 .md
  • Markdown介于WordHTML之间
    • 比起Word,Markdown是纯文本,排版文档轻量、方便、快速。
    • 比起HTML,Markdown简单直观,易读、易写、易修改

Markdown优点

  • 简单、流行、B格高且使用广泛,排版功能足够使用(不足之处可用HTML、CSS弥补)
  • 广泛用于用于办公、文字工作者、程序员等人员日常文档的写作排版

Markdown缺点

  • 太简单,很多复杂的专业排版样式功能无法实现,只适用于要求不高的文字排版场合(办公、技术文档等)

Markdown编辑器

  • 任意文本编辑器
  • 专业Markdown编辑器:支持Markdown文档排版后预览,适合文字工作者
    • MAC:mou,macdown
    • Windows:MarkdownPad
  • 自带预览功能的专业代码编辑器:适合编程、分析等理工类应用
    • VSCode 原生支持预览
    • Atom 原生支持预览,并可将md文件另存为HTML文件
    • Jupyter Notebook 科学工作者和程序员用交互式笔记本,网页版,可用于数据分析、教学、演讲等

Markdown预览

  • Atom:
    • 预览快捷键:Ctrl+Shift+M
    • 或:Ctrl+Shift+P - 命令窗口输入 markdown ,回车
  • VSCode:md文件右上方-打开侧边栏预览

Markdown语法

Markdown有很多扩展方言,这里使用GFM(Github Flavored Markdown)

如何速成Markdown?

一份Markdown格式的文件,
应该要能以纯文字形式直接发表,
并且一眼看过去不存在任何标记用的标签或格式指令。

- John Gruber
  • 不要机械记忆Markdown标记,如果由我发明一种格式标记语言,写文章时候如何表示标题、段落、列表,你就知道Markdown是怎么发明出来的了。

Markdown基本语法


1:标题(# h1-h6)

<!-- 标题用 2个或2个以上的=或- -->

一级标题
==

二级标题
--

<!-- 或者: -->

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

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

2:空格、段落和换行(<p><br>)

  • 空格:直接在编辑器空格或换行,md都只显示为一个空格
  • 段落:回车两次,编辑器换两行,显示为段落(p标签)

少见情况:

  • 多个空格:语义性原因不建议这么做,可直接写HTML转义字符 &nbsp;
  • 换行:上一行结尾加两个空格再回车(<br>)。建议少用,可用无序列表代替
  • 连续换行多行:语义性原因不建议这么做,可直接写HTML换行标签<br>
空     格
没 &nbsp;&nbsp;&nbsp;&nbsp;换行

段落

<!-- 少见情况 -->

本行结尾空两格  
回车就会换一行

连续换行多行
<br><br><br>
换行结束

空 格没     换行

段落

本行结尾空两格
回车就会换一行

连续换行多行


换行结束


3:超链接([]() <a>)

3.1:直接写链接地址:http://www.aaa.com/ (VSCode不支持)

3.2:[超链接](http://www.aaa.com/)

3.3:[本页面锚点](#abc)
<div id="abc">点击跳转到本页面锚点位置,多用于文档目录</div>




4:图片(![]() <img>)和公式

  • 图片只比超链接前面多个 !
  • 图片路径,相对链接、绝对链接均可
  • 复杂的写法,例如 图片加超链接、图片设宽高 等,建议用HTML或CSS实现

![图片描述](images/markdown.png)

URL地址中带括号的图片,一般是公式,

图片调用和URL链接隔行书写,

  • 一行调用(描述可以不写),
  • 一行定义图片URL地址(括号内名字或数字对应)。

![][gs]

[gs]: http://latex.codecogs.com/gif.latex?\prod%20\(n_{i}\)+1


5:列表(<ul><ol><li>)

* 无序列表1
* 无序列表2
  * 无序列表3
    * 无序列表4
    * 无序列表5

1. 有序列表1
1. 有序列表2
    1. 有序列表3
        1. 有序列表4
        1. 有序列表5

无序列表

  • 无序列表1
  • 无序列表2
    • 无序列表3
      • 无序列表4
      • 无序列表5

有序列表

  1. 有序列表1
  2. 有序列表2
    1. 有序列表3
      1. 有序列表4
      2. 有序列表5

6:代码块(``` <pre>)

` 反引号

  • 将编辑器内程序代码原格式显示
  • 内部的HTML特殊符号如< > &和都会自动转义为&lt; &gt; &amp;
  • 代码块要离上下内容空一行,否则易出问题

1:行内代码块,一个反引号,HTML转义为<code>包裹区块,保留布局

这是`<strong>行内代码块</strong>`都在一行内

效果:这是<strong>行内代码块</strong>都在一行内

2:块级代码块,三个反引号包含,```,HTML转义为<pre><code>包裹区块,保留布局

```
<div>
  这是块级代码块
</div>
```

效果:

<div>
  这是块级代码块
</div>

如要带代码高亮效果,3个反引号开始处加上编程语言名

```html
<div>
  这是块级代码块
</div>
```

效果:

<div>
  这是块级代码块
</div>

如要显示一个反引号或者<pre>标签,用两个反引号包裹文档 ``

在这个``文本中夹杂一个`反引号如何显示``?

效果:在这个文本中夹杂一个`反引号如何显示

如要显示3个反引号,用<pre>标签标签包裹文档

<pre>
```javascript
function aaa(){
  var a = 1;
}
```
</pre>

效果:

```javascript
function aaa(){
  var a = 1;
}
```

7:着重、强调(** <em><strong>)

着重 斜体 em *着重 斜体 em*

强调 粗体 strong **强调 粗体 strong**


8:表格(-|-|- <table>)

默认左对齐

表头1 | 表头2 | 表头3
------|------|------
行1列1 | 行1列2  | 行1列3
行2列1 | 行2列2  | 行2列3
行3列1 | 行3列2  | 行3列3
表头1 表头2 表头3
行1列1 行1列2 行1列3
行2列1 行2列2 行2列3
行3列1 行3列2 行3列3

9:转义字符(\)

\ 反斜杠

  • 想在页面显示md标记,
  • 或者你不小心写了其他重复md标记,例如:
### 标题

__也是着重标记__

1986. 数字+点,被转成有序列表
1986. 数字+点,被转成有序列表

标题

也是着重标记

  1. 数字+点,被转成有序列表
  2. 数字+点,被转成有序列表

反斜杠转义

\### 标题

\__也是着重标记__

1986\. 数字+点,被转成有序列表
1986\. 数字+点,被转成有序列表

### 标题

_也是着重标记_

1986. 数字+点,被转成有序列表1986. 数字+点,被转成有序列表


10:分隔线(--- <hr>)


---

  • 前面空一行
  • 本行最少三个-表示水平线,分隔线

Markdown拓展应用

1:Markdown保存为HTML

  • 最简单的方法:Atom - 预览界面右键 - Save As HTML(注意图片路径默认为绝对路径,需要修改为相对路径)
  • 高级方法:
    • 使用基于Node.js的gitbook库自动生成HTML文档
    • 使用基于Python的Sphinx库生成HTML文档
    • 使用基于Haskell的Pandoc转换任意电子文档格式

2:在Markdown中直接写HTML/CSS/JavaScript

不在md范围内的标记或样式,或者说用Markdown很难实现的标记或样式,可以直接写HTML/CSS/JavaScript语言实现

你完全可以把md文档当成HTML文档在里面写原生HTML/CSS/JS代码(注意环境支持度)

  • HTML: 所有编辑器都支持
  • CSS: 大部分支持。Atom VSCode支持,JupyterNotebook只支持行内样式
  • JS: 基本都不支持。VSCode设置开启后支持,其他环境如想写JS可导出HTML文档后自行编辑
<div class="d1">d111</div>
<div id="d2">d222</div>

<style>
.d1{
  background:#f00;
}
</style>

<script>
d2.style.background = '#00f';
</script>
d111
d222

3:在Markdown中载入基于文本的公式

上面图片标签讲了怎样载入基于图片的公式,怎样载入基于文本的公式?

  • MathJax是一个渲染公式的JS库,LaTex语法书写
  • 使用MathJax显示公式,文档浏览器必须支持JS
    • Jupyter不需操作,原生支持
    • VSCode需手动载入MathJax.js,再启用JS后支持
    • Atom默认过滤JS,不支持

使用方式:

  1. 载入MathJax.js
  2. Jupyter不需要,默认已载入
  3. 载入JS库路径问号后面的参数必须带
CDN远程载入
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

或下载JS库后本地载入
<script src="images/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  1. 将LaTeX公式写入$$ $$之间,空格分隔
$$ P(A \mid B) = \frac{P(B \mid A) \, P(A)}{P(B)} $$

效果(需启用JS支持才可预览):

$$ P(A \mid B) = \frac{P(B \mid A) \, P(A)}{P(B)} $$

没有更多推荐了,返回首页