烧风的 Markdown 进阶教程

——没想到,Markdown 远比想象的要精彩。

注意

如果你还没看过 Markdown 基础教程,请先阅读 烧风的 Markdown 基础教程

相关信息

目录

注意

生成目录的语法是 [TOC] 而有些平台则是 [[TOC]] ,因为这并不是标准 Markdown 语法。同样的,后面的很多高级用法都不是标准 Markdown 语法,使用它们要注意平台是否支持和兼容

查看目录
查看 Markdown 代码
[[TOC]]

Emoji 表情

相关信息

试试在 Markdown 中输入 Emoji 表情 😆 😆 😆 !!!

你可以直接键入 Unicode 表情,也可以根据 这份对照表在新窗口打开 输入

😆 😆 😆 🎈🎈🎈 恭喜你进入 Markdown 进阶教程!!!

:laughing: :laughing: :laughing:
🎈🎈🎈 恭喜你进入 Markdown 进阶教程!!!

嵌入 HTML

相关信息

通常,Markdown 需要先被转换为 HTML ,然后再解析成 DOM 文档对象模型在新窗口打开 ,最终被布局排版并渲染为文档。更多信息,请了解 HTML 超文本标记语言在新窗口打开

提示

通过各种 HTML 标签和 style 样式,你可以更加灵活的控制页面布局和样式

下面举出一些常用例子,欢迎你补充或自己默默探索其它利用 HTML 的有趣用法

键盘输入元素

Ctrl + Shift + ESC

<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>ESC</kbd>

强制居中

注意

你可以使用 <center> 来强制居中,但它是已经被废弃使用的 HTML 标签,非常不推荐你使用它。请使用样式 style="text-align: center" 来代替,或者使用 对齐标记 来居中

这是居中的一段文本

<center>这是强制居中的一段文本</center>

<p style="text-align: center">这是居中的一段文本</p>

强制换行

注意

为保持文档的规范性,Markdown 避免出现空行,因此多余的空行会被取消掉,最多仅保留连续两个换行,但是你可以使用 HTML 来强制要求多次连续换行

这是第一行

只换了两行

这是第一行



换了很多行

查看 Markdown 代码
这是第一行



只换了两行

这是第一行<br><br><br><br>换了很多行

嵌入 Web 程序

相关信息

要完整的嵌入 HTML 和其它前端代码,请查看 前端演示

转义语法

转义符号

在以下字符前面添加反斜杠字符 \ ,可以显示原本用于格式化 Markdown 文档的字符

\   反斜线          `   反引号
*   星号            _   下划线
{}  花括号          []  方括号
()  小括号          #   井字号
+   加号            -   减号
.   英文句点        !   感叹号
|   管道符号        ~   波浪号

转义 `

想要输入 ` 你需要这样

`` ` ``

转义 ```

想要输入 ``` 你需要这样

\`\`\`

字符实体

相关信息

因为 Markdown 可以嵌入 HTML , 因此字符实体也可以用,请参考 Entity - 术语表 | MDN在新窗口打开

标题索引

提示

每个标题是可以被自动索引的,注意到标题前面隐藏的 # 超链接了吗?

你还可以通过这个语法为每个标题设置自定义的编号,通过链接索引可以直接到达这个标题位置

### 这是你的标题 {#custom-id}

索引到标题

[这个链接索引到标题](#custom-id)  
[也可通过完整链接索引](https://xxxx.xxxx/xxxx/xxxx.html#custom-id)

公式

相关信息

基于 Mathjax在新窗口打开 或者 KaTeX在新窗口打开 可以在 Markdown 中使用 语法来创建公式,本文的公式是使用 Mathjax 渲染的,其具体用法可以参考 这篇帮助文档在新窗口打开

数学公式

傅里叶变换

$$
f(x) = \int_{-\infty}^\infty  \hat f(x)\xi\,e^{2 \pi i \xi x}  \,\mathrm{d}\xi 
$$

物理公式

高斯定理

$$
\mathop \Phi \nolimits_e = \oint { \mathord{ \buildrel{ \lower3pt \hbox{$ \scriptscriptstyle \rightharpoonup$}} \over E} \cdot {d \mathord{ \buildrel{ \lower3pt \hbox{$ \scriptscriptstyle \rightharpoonup$}} \over S}}  = {1 \over {{\varepsilon _0}}}\sum {q} } 
$$

化学方程式

硫酸钡沉淀

$$
\ce{SO4^2- + Ba^2+ -> BaSO4 v} 
$$

代码

代码行高亮

提示

行数范围标记的例子

  • 行数范围: {5-8}
  • 多个单行: {4,7,9}
  • 组合使用: {4,7-13,16,23-27,40}
import { defaultTheme, defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: '你好, VuePress',

  theme: defaultTheme({
    logo: 'https://vuejs.org/images/logo.png',
  }),
})
 




 
 
 

查看 Markdown 代码
```ts{1,6-8}
import { defaultTheme, defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: '你好, VuePress',

  theme: defaultTheme({
    logo: 'https://vuejs.org/images/logo.png',
  }),
})
```

禁用行号

print('你好烧风')
```python:no-line-numbers
print('你好烧风')
```

分组代码

安装 VuePress Theme Hope

安装 VuePress Plugin Markdown Enhance

查看 Markdown 代码
安装 VuePress Theme Hope

::: code-tabs#shell

@tab pnpm

```bash
pnpm add -D vuepress-theme-hope@next
```

@tab yarn

```bash
yarn add -D vuepress-theme-hope@next
```

@tab:active npm

```bash
npm i -D vuepress-theme-hope@next
```

:::

安装 VuePress Plugin Markdown Enhance

::: code-tabs#shell

@tab pnpm

```bash
pnpm add -D vuepress-plugin-md-enhance@next
```

@tab yarn

```bash
yarn add -D vuepress-plugin-md-enhance@next
```

@tab:active npm

```bash
npm i -D vuepress-plugin-md-enhance@next
```

:::

上下标

  • 19th
  • H2O
- 19^th^
- H~2~O

对齐

要左对齐的段落

要居中对齐的段落

要右对齐的段落

::: left
要左对齐的段落
:::

::: center
要居中对齐的段落
:::

::: right
要右对齐的段落
:::

图片

图片尺寸

shaofunshaofunshaofun
![image](image.png =50x)![image](image.png =50x100)![image](image.png =x100)
|  ![image](image.png =50x)  |  ![image](image.png =50x100)  |  ![image](image.png =x100)  |
| :------------------------: | :---------------------------: | :-------------------------: |
| `![image](image.png =50x)` | `![image](image.png =50x100)` | `![image](image.png =x100)` |

图片标记

相关信息

一种特殊情况,使用 # 用为图像设置以下 ID ,可以使得这张图片尽在特定模式下显示

#gh-dark-mode-only
#gh-light-mode-only
#dark
#light

现在,你可以试试反复切换主题的暗黑模式,观察图像发生的变化

shaofun

shaofun

::: center
![shaofun](/images/logo.png#dark =400x100)
:::

::: center
![shaofun](/images/logo.png#light =200x100)
:::

标记

哈喽!很高兴认识你,我的 昵称 叫烧风!

哈喽!很高兴认识你,我的 ==昵称== 叫烧风!

容器

相关信息

信息容器

注释容器

提示

提示容器

注意

警告容器

警告

危险容器

详情

详情容器

自定义标题

一个有 代码链接 的信息容器

const a = 1;

自定义标题

一个有 代码链接 的注释容器

const a = 1;

自定义标题

一个有 代码链接 的提示容器

const a = 1;

自定义标题

一个有 代码链接 的警告容器

const a = 1;

自定义标题

一个有 代码链接 的危险容器

const a = 1;
自定义标题

一个有 代码链接 的详情容器

const a = 1;

自定义信息

自定义注释

自定义提示

自定义警告

自定义危险

查看 Markdown 代码
::: info
信息容器
:::

::: note
注释容器
:::

::: tip
提示容器
:::

::: warning
警告容器
:::

::: danger
危险容器
:::

::: details
详情容器
:::

::: info 自定义标题

一个有 `代码`[链接](#演示) 的信息容器

```js
const a = 1;
```

:::

::: note 自定义标题

一个有 `代码`[链接](#演示) 的注释容器

```js
const a = 1;
```

:::

::: tip 自定义标题

一个有 `代码`[链接](#演示) 的提示容器

```js
const a = 1;
```

:::

::: warning 自定义标题

一个有 `代码`[链接](#演示) 的警告容器

```js
const a = 1;
```

:::

::: danger 自定义标题

一个有 `代码`[链接](#演示) 的危险容器

```js
const a = 1;
```

:::

::: details 自定义标题

一个有 `代码`[链接](#演示) 的详情容器

```js
const a = 1;
```

:::

::: info 自定义信息
:::

::: note 自定义注释
:::

::: tip 自定义提示
:::

::: warning 自定义警告
:::

::: danger 自定义危险
:::

Mermaid 框图

相关信息

下面是一个 Mermaid 框图的例子,具体请查看 在 Markdown 中使用框图

查看 Markdown 代码
```mermaid
graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange
```

Echarts 图表

相关信息

下面是一个在 Markdwon 中使用 Echarts 图表的例子,更多信息请查看 使用 Echarts 图表

一个柱状图案例
查看 Markdown 代码
::: echarts 一个柱状图案例

```json
{
  "xAxis": {
    "type": "category",
    "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  "yAxis": {
    "type": "value"
  },
  "series": [
    {
      "data": [120, 200, 150, 80, 70, 110, 130],
      "type": "bar",
      "showBackground": true,
      "backgroundStyle": {
        "color": "rgba(180, 180, 180, 0.2)"
      }
    }
  ]
}
```
:::

思维导图

相关信息

使用 Markmap在新窗口打开 和 Markdown 语法来创建思维导图

演示
<iframe src="/html/blog/markmap-demo.html"
width="100%"
height="100%"
frameborder="0"
scrolling="No"
leftmargin="0"
topmargin="0"
/>
查看 Markdown 代码
---
markmap:
  colorFreezeLevel: 2
---

# markmap

## Links

- <https://markmap.js.org/>
- [GitHub](https://github.com/gera2ld/markmap)

## Related Projects

- [coc-markmap](https://github.com/gera2ld/coc-markmap)
- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)

## Features

- links
- **strong** ~~del~~ *italic* ==highlight==
- multiline
  text
- `inline code`
-
    ```js
    console.log('code block');
    ```
- KateX
  - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
  - [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md)
- Now we can wrap very very very very long text based on `maxWidth` option

选项卡

无绑定

查看 Markdown 代码
::: tabs

@tab apple

Apple

@tab banana

Banana

@tab orange

Orange

:::

绑定关联

查看 Markdown 代码
::: tabs#fruit

@tab apple#apple

Apple

@tab banana#banana

Banana

:::


::: tabs#fruit

@tab apple

Apple

@tab banana

Banana

@tab orange

Orange

:::

幻灯片

相关信息

基于 reveal.js在新窗口打开 ,使用 Markdown 语法来创建 Slides

提示

除此之外,你还有其它选择来创建 Slides ,例如 Marp在新窗口打开Slidev在新窗口打开

查看 Markdown 代码
@slidestart

## 幻灯片 1

一个有文字和 [链接](https://mrhope.site) 的段落

---

## 幻灯片 2

- 项目 1
- 项目 2

---

## 幻灯片 3.1

```js
const a = 1;
```

--

## 幻灯片 3.2

$$
J(\theta_0,\theta_1) = \sum_{i=0}
$$

@slideend

前端演示

相关信息

在页面内独立出一个渲染 Web 的容器,支持纯 HTML/JS/CSS ,还支持 VueReact

提示

下面是一个例子,更多信息请查看 VuePress Theme Hope 的 代码演示在新窗口打开

Demo 演示
<h1>你好,我是<span>烧风</span></h1>
<p><button id="button">一个按钮</button></p>
document.querySelector("#button").addEventListener("click", () => {
  alert("Hello World!");
});
span {
  color: green;
}
查看 Markdown 代码
::: normal-demo Demo 演示

```html
<h1>VuePress Theme <span>Hope</span></h1>
<p><button id="very">非常强大!</button></p>
```

```js
document.querySelector("#very").addEventListener("click", () => {
  alert("非常强大");
});
```

```css
span {
  color: green;
}
```

:::

组件

相关信息

在 Markdown 中嵌入 Vue 组件,可以实现为页面插入视频(Bilibili、YouTube、视频文件)、 PDF 文档和其它 Web 程序。

提示

详细信息请查看 VuePress Theme Hope 的 vuepress-plugin-components在新窗口打开

PDF


查看 Markdown 代码
<PDF url="/bin/pdf/pdf-demo.pdf" />

尾声

警告

Markdown 的进阶使用方法,大多数并不是标准语法,不一定受平台支持,兼容性可能存在问题。你需要根据你使用的工具或者环境来判断这个语法或者功能是否被支持

版权和开源协议

注意

本站所有内容均使用 MIT 协议,请遵守 此协议 。转载请标明出处:shao.fun在新窗口打开

Copyright © 2019-2022

Loading...