markdown 语法示例

qiuwww
426 阅读8分钟 
---
title: markdown 语法学习
date: 2017-2-2
tags:
  - markdown
  - 语法学习
categories:
  - markdown
  - [post, markdown 语法学习]
---

上边是 yaml 描述的文档信息。

[TOC]

[TOC]，是 Typora 所支持的目录，可自动生成目录，方便查看。

介绍，为什么要使用 markdown

  1. 纯文本格式，方便编辑和使用，Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。
  2. Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档，这里使用 Typora 可方便导出。
  3. 方便共享，大部分的社区、在线文档都是支持 markdown 格式编写的，共享方便。完全可以用于开发过程中做一些笔记等。
  4. 可以直接使用 html 标签来设置样式，非常的方便。

标题

使用 = 和- 标记一级和二级标题，更常用的是使用#来标记。

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

目录

也就是页面内的钩子，类似于 html 的 id。通过#id，来进行绑定元素与目录。

- [目录 1](#1)
- [目录 2](#2)

<h2 id="1">目录1</h2>
<h2 id="2">目录2</h2>

目录1，点击目录 1跳转到此处

目录2，点击目录 2跳转到此处

项目结构

Blog
  ├── .github                     -- git仓库的配置
  ├── .vscode                     -- vscode编辑器的配置
  ├── 0.2.HTML                    -- html相关
  ├── 0.3.CSS                     -- css相关
  ├── 0.5.JS                      -- js相关
      ├── 前端模板使用              -- 模板文件
      ├── 异步编程                 -- 从callback到async...await
          ├── async...await       -- async...await
          ├── generator...yield   -- generator...yield
          ├── promise
      └── 原型与原型链与原型链与类
  ├── 1.数据结构与算法              -- 数据结构与算法
  ├── 2.js-design-patterns        -- js设计模式
  ├── 3.浏览器原理                 -- 浏览器原理
  └── BLOG-markdown语法学习.zh-CN  -- markdown规范示例

引用

引用使用>来标记，可以是一块，或者是一行，内部还可以嵌套 md 格式语法。

> 这是一个块引用，
>
> 应该可以写很长，很长
>
> ### 引用的标题
>
> balabalabala
>
> > 这是第二级引用。
> > return shell_exec(`echo $input | $markdown_script`);

> github 有以下主要功能:
>
> 1. 代码托管平台
> 2. 在线运行环境
> 3. 代码质量监控
> 4. 项目管理平台

这是一个块引用，

应该可以写很长，很长

引用的标题

balabalabala

这是第二级引用。 return shell_exec(echo $input | $markdown_script);

github 有以下主要功能:

  1. 代码托管平台
  2. 在线运行环境
  3. 代码质量监控
  4. 项目管理平台

常用的简单标记

这是<u>下划线</u>，这里本质借助了 html 的标签来设置样式的。

---

分割线

---

~~这是删除线~~

表示**强调**

当然这样也表示**强调**，一般用在行内

表示*斜体*，比强调少了一个说明符

当然这也是*斜体*

这是下划线，这里本质借助了 html 的标签来设置样式的。

分割线

这是删除线

表示强调

当然这样也表示强调，一般用在行内

表示斜体，比强调少了一个说明符

当然这也是斜体

列表

列表，一般分为有序列表和无序列表，一般使用有序列表，更清晰，方便记忆。

任务列表

- [x] 吃饭
- [x] 看电影，已完成
- [ ] 看书，还没完成的
  • 吃饭
  • 看电影，已完成
  • 看书，还没完成的

无序的列表

使用星号*、加号+或是减号-作为列表标记。

- html
- css
- javascript
  • html
  • css
  • javascript

有序的列表

1. nodejs
2. angularjs
3. react
  1. nodejs
  2. angularjs
  3. react

代码块

单行代码注视使用``来标记，多行代码快使用```来标记。

代码样式显示，需要看的时候点到这里，也可以看别人的文档来学习这种语法

<p>代码块是这样的， 对，就是这样的。</p>

/**
 * @desc 判断`obj`是否为空
 * @param {Object} obj object
 * @return {Boolean}
 */
export function isEmptyObject(obj) {
  if (!obj || typeof obj !== 'object' || Array.isArray(obj)) return false;
  return !Object.keys(obj).length;
}

#!/bin/bash
npm install module@latest

链接

  1. 类似与 html 的 a 标签，可以设置相对路径的连接，也可以设置绝对路径的连接。
  2. 一般在 vsc 中，可以复制连接，然后选中元素，直接粘贴就可以生成。
[内嵌式链接](http://www.google.com)

[带标题的内嵌式链接](http://www.google.com '谷歌的主页')

[引用式链接][arbitrary case-insensitive reference text]

[相对引用一个库文件](../blob/master/LICENSE)

[你可以在引用式链接定义中使用数字][1]

或者空着什么都不写 [link text itself]

用来说明引用链接的文字可以放在后面。

[arbitrary case-insensitive reference text]: http://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com

内嵌式链接

带标题的内嵌式链接

引用式链接

相对引用一个库文件

你可以在引用式链接定义中使用数字

或者空着什么都不写 link text itself

用来说明引用链接的文字可以放在后面。

自动链接

md 可以自动识别一些地址为 url，展示的时候，会直接展示为连接。

当然标准的 url 直接填入就是了。eg：www.baidu.com

度娘一下，你就知道： <http://www.baidu.com>

[typora 语法学习](http://github.com/qiuwww/blog/blob/master/BLOG-markdown%E8%AF%AD%E6%B3%95%E5%AD%A6%E4%B9%A0.zh-CN.md)

当然标准的 url 直接填入就是了。eg：www.baidu.com

度娘一下，你就知道： www.baidu.com

typora 语法学习

页面内导航

这里是转为 html 的时候会生成锚点。

[插入图片](#插入图片)

**[:arrow_up: 返回目录](#目录)**

插入图片

:arrow_up: 返回目录

表格

可以使用 md 来生成表格，可以控制对齐方式。

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

其中代码的第二行指定对齐的方式，第一个是左对齐，第二个和第三个是居中，最后一个是右对齐。

插入图片

语法使用![展示的名称](图片的相对或者绝对地址)。

本地图片直接拖过来就行了，这里最好自己写绝对地址，不然上传在别的地方就访问不到了。

网络图片，so easy，（当然标题前后需要空一格）

防抖debounce_节流throttle

标注

某些人用过了才知道[^注释]

[^注释]: 真的可以啊，但是这里为什么还在呢

某些人用过了才知道1

流程图

Markdown 编辑器已支持绘制流程图、时序图和甘特图。通过 mermaid 实现图形的插入，点击查看 更多语法详情。

这里不同的编辑器查看到的效果不一样。

流程图 1

st=>start: Start
e=>end
op=>operation: My Operation
cond=>condition: Yes or No?

st->op->cond
cond(yes)->e
cond(no)->op

以及时序图

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

提示：想了解更多，请查看流程图[语法][3]以及时序图[语法][4]。

markdown 内部可以嵌入直接的 html 代码

这里的 html 可以随便写，还可以加内联样式。

使用img插入图片

防抖debounce_节流throttle

内容折叠，details 和 summary，常用于 qa。

<details>
  <summary>展开查看</summary>
  <pre>
    <code>
      System.out.println("Hello to see U!");
    </code>
  </pre>
</details>
展开查看 
        
      System.out.println("Hello to see U!");

内容折叠实例

View contents
  • list1
  • list2

这里是引用

这里是一个提问

这里是答案

We must have all ingredients of the recipe available, and in quantities that are more than or equal to the number of units required. If just one of the ingredients is not available or lower than needed, we cannot make a single batch.

插入数学公式

这里的兼容性不太好。

公式编辑

使用使用 Google Chart 的服务器

这里直接加载是加载不出来。

使用 MathJax 引擎，在 vscode 内预览是可以的

举例参考

?公式?表示行间公式，公式公式表示行内公式

?x_1?

?x_1^2?

?x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}?

?a + b?

?\frac{x+y}{2}?

?\sqrt{1+\sqrt[^p!]{1+a^2}}?

∫abf(x)dx\int_a^b f(x)dx

∑k=1n1k\sum_{k=1}^n\frac{1}{k}

(a+b)(a + b)

(x=−b±b2−4ac2a)(x=\frac{-b\pm\sqrt{b^2-4ac}}{2a})

紧贴 a ⁣ba\!b 没有空格 abab 小空格 a,b 中等空格 a;b

?\int_a^b f(x),\mathrm{d}x?

?\left(\sum_{k=\frac{1}{2}}^{N^2}\frac{1}{k}\right)?

?\begin{Bmatrix}1 & 2\\3 &4\end{Bmatrix}?

脚注

Text prior to footnote reference.2

hexo 生成文章的配置头部

hexo 的文章的头部信息，需要的基本信息：title、date、tags、categories、comments

---
layout: post
title: title
date: 2013-7-13 20:46:25
updated: 2013-7-13 20:46:29
photos: https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/22/172dca291804db9b~tplv-t2oaga2asx-image.image
tags:
  - JavaScript
  - React
# categories:
# - 编程
categories:
  - [Linux, Hexo]
  - [Tools, PHP]
# 默认为true
comments: true
# 参数越大，越靠前
top: 1
---

上边是 yaml 描述的文档信息，方便解析。

语法警告提示

no-inline-html: Inline HTML

常见提示语法的问题，可以配置.markdownlint.json文件来解决 warning 的问题。

⬆ Back to top

目前到这里，还要熟练运用

changyangzhe-2016.7.22 qiuwww-2018.9.14 qiuwww-2020.6.20

contact

github 源文件地址

Footnotes

  1. 真的可以啊，但是这里为什么还在呢 ↩

  2. Comment to include in footnote. ↩

avatar
文章
阅读
粉丝