主页
文章
分类
系列
标签
关于
Markdown 扩展语法
发布于: 2023-1-14   更新于: 2023-1-14   收录于: web
文章字数: 2195   阅读时间: 5 分钟   阅读量:

NewBee 实现了一些 Markdown 的扩展语法,用以代替 shortcodes,目的主要是为了使书写更简单快捷,因为有时候感觉 shortcodes 敲起来有点麻烦。

代码

行内代码

示例(默认):`name`

输出:name

此外,行内代码样式还有其他 5 种颜色可供选择,在原文本之后加上(参数)即可,中间用空格分隔,且必须是1个空格:

`name (primary)`:

name (primary)

`name (success)`:

name (success)

`name (tip)`:

name (tip)

`name (warning)`:

name (warning)

`name (danger)`:

name (danger)

代码块

在代码的第一行加上close,当页面刷新时,此代码块将显示为关闭状态,这在代码很长且占用空间时很有用。

示例:

1
2
3
4
5
6
7
    ```python
    close
    import re
    a = 5
    b = 6
    ```
    <!-- 在这请忽略每一行对齐之前的空格,是Markdown语法嵌套问题,不得已才这么写的,下同 -->

输出(点击可打开):

1
2
3
4
close
import re
a = 5
b = 6

warning hugo.toml[markup.highlight]lineNumbersInTable的值请保持为true

引用

示例(默认):

1
> 我是一个段落

输出:

我是一个段落

NewBee 也提供了另外 5 种颜色的选择,使用方法很简单,像下面这样增加一个参数就行:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
> primary
> 我是一个 primary 的段落。

> success
> 我是一个 success 的段落。

> tip
> 我是一个 tip 的段落。

> warning
> 我是一个 warning 的段落。

> danger
> 我是一个 danger 的段落。

输出:

primary 我是一个 primary 的段落。

success 我是一个 success 的段落。

tip 我是一个 tip 的段落。

warning 我是一个 warning 的段落。

danger 我是一个 danger 的段落。

注意:参数行与内容行之间不能有空白行。

tip 当在引用段落里使用行内代码时,该行内代码背景色将跟随引用段落(无论该行内代码是否带参数),像这样:我是一个引用段落里的行内代码

链接

在当前标签页打开页面

1
[在当前标签页打开页面](https://xioyito.top)

输出: 在当前标签页打开页面

在新标签页打开页面(在链接前增加tab:的前缀)

1
[在新标签页打开页面](tab:https://xioyito.top)

输出: 在新标签页打开页面

图片

默认情况下图片自带阴影,如不想要阴影,在引号内的文本之后添加_no即可(例:'title_no')。没有标题时则是这样:'_no'

  1. 标题 + 阴影
1
![photo](/images/example.jpeg 'title')

输出:

photo

  1. 标题 + 无阴影
1
![photo](/images/example.jpeg 'title_no')

输出:

photo

  1. 无标题 + 阴影
1
![photo](/images/example.jpeg)

输出:

photo

  1. 无标题 + 无阴影
1
![photo](/images/example.jpeg '_no')

输出:

photo

tabs(选项卡)

示例

这是一个选项卡示例:

::: tabs

@tab 标题 1

内容 1

@tab 标题 2

内容 2

@tab 标题 3

内容 3

:::

用法

::: tabs:::作为选项卡容器的起始和结束,用@tab来标记和分隔不同选项卡,@tab之后是标题,默认情况下会激活第一个选项卡,你也可以在@tab之后添加文本:active来默认激活相应的选项卡。

  1. 例 1
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
    <!-- 空白行(必须) -->
::: tabs <!-- ':::' 和 'tabs' 之间必须有且只有 1 个空格 -->
    <!-- 空白行(必须) -->
@tab 李小龙 <!-- '@tab' 和标题之间必须有且只有 1 个空格 -->
    <!-- 空白行(必须) -->
《猛龙过江》《龙争虎斗》《唐山大兄》《精武门》
    <!-- 空白行(必须) -->
@tab 吴京
    <!-- 空白行(必须) -->
《战狼2》《战狼》《流浪地球》
    <!-- 空白行(必须) -->
@tab 甄子丹
    <!-- 空白行(必须) -->
《叶问》《导火线》《追龙》
    <!-- 空白行(必须) -->
:::
    <!-- 空白行(必须) -->

输出:

::: tabs

@tab 李小龙

《猛龙过江》《龙争虎斗》《唐山大兄》《精武门》

@tab 吴京

《战狼2》《战狼》《流浪地球》

@tab 甄子丹

《叶问》《导火线》《追龙》

:::

  1. 例 2(添加了:active
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

::: tabs

@tab 李小龙

《猛龙过江》《龙争虎斗》《唐山大兄》《精武门》

@tab:active 吴京

《战狼2》《战狼》《流浪地球》

@tab 甄子丹

《叶问》《导火线》《追龙》

:::

输出:

::: tabs

@tab 李小龙

《猛龙过江》《龙争虎斗》《唐山大兄》《精武门》

@tab:active 吴京

《战狼2》《战狼》《流浪地球》

@tab 甄子丹

《叶问》《导火线》《追龙》

:::

你可以为选项卡容器添加一个id

1
2
3
4

::: tabs#install

:::

有相同 id 的选项卡容器中,标题相同的选项卡将共享相同的切换事件,下面是两个有相同 id 的选项卡容器例子,试着点击不同选项卡看看效果:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

::: tabs#install

@tab npm

用 npm 安装 xxx

@tab Homebrew

用 Homebrew 安装 xxx

@tab MacPorts

用 MacPorts 安装 xxx

:::
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

::: tabs#install

@tab npm

用 npm 安装 yyy

@tab Homebrew

用 Homebrew 安装 yyy

@tab MacPorts

用 MacPorts 安装 yyy

:::

输出:

::: tabs#install

@tab npm

用 npm 安装 xxx

@tab Homebrew

用 Homebrew 安装 xxx

@tab MacPorts

用 MacPorts 安装 xxx

:::

::: tabs#install

@tab npm

用 npm 安装 yyy

@tab Homebrew

用 Homebrew 安装 yyy

@tab MacPorts

用 MacPorts 安装 yyy

:::

mermaid

warning 使用此语法需要满足:

  1. hugo.toml中将[markup.highlight]guessSyntax的值改为false
  2. 在使用此功能的文章前加上前置参数mermaid: true

mermaid 可绘制图表和流程图,用法很简单,像代码块一样:

1
2
3
    ```mermaid
    内容
    ```

示例:

1
2
3
4
    ```mermaid
    flowchart LR
        A -- text --> B -- text2 --> C
    ```

输出:

flowchart LR
    A -- text --> B -- text2 --> C

更多关于 mermaid 的用法请移步:Mermaid 官网

math

warning 使用此语法需要满足:

  1. hugo.toml中将[markup.highlight]guessSyntax的值改为false
  2. 在使用此功能的文章前加上前置参数math: true

基于 mathjax 的数学公式编辑。

行内公式

示例:

1
2
3
4
    ```math
    <!-- 用 '\(' 和 '\)' 表示行内公式的起始和结束 -->
    这是一个行内公式:\( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \)
    ```

输出:

<!-- 用 '\(' 和 '\)' 表示行内公式的起始和结束 -->
这是一个行内公式:\( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \)

公式块

示例:

1
2
3
4
    ```math
    <!-- 用 '$$' 和 '$$' 表示公式块的起始和结束 -->
    这是一个公式块:$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
    ```

输出:

<!-- 用 '$$' 和 '$$' 表示公式块的起始和结束 -->
这是一个公式块:$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

更多关于 mathjax 的信息请移步:MathJax 官网