外挂标签

为简单的一句话提供的简便写法。

带 下划线 的文本

带 着重号 的文本

带 波浪线 的文本

带 删除线 的文本

键盘样式的文本 command + D

密码样式的文本：这里没有验证码

彩色文字
在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。超大号文字

文档「开始」页面中的标题部分就是超大号文字。

A Wonderful Theme for Hexo

绿色 + 默认选中

时间线标题（可选）[

时间节点（标题）

正文内容

时间节点（标题）

正文内容

xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu

作者: Chaospring
链接: https://chaospring.com/posts/4770/#%E6%8C%89%E9%92%AE-btns
来源: Chaospring
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

脚注footnotes测试1，脚注英文2，脚注中文3

查看默认打开的折叠框

这是一个默认打开的折叠框。

This is Tab 1.

This is Tab 2.

This is Tab 3.

默认情况

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

默认 提示块标签

你是刷 Visa 还是 UnionPay

primary 提示块标签

小心开车 安全至上

你是刷 Visa 还是 UnionPay

2021年快到了....

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

mermaid绘图

graph TB;
subgraph 分情况
A(开始)-->B{判断}
end
B--第一种情况-->C[第一种方案]
B--第二种情况-->D[第二种方案]
B--第三种情况-->F{第三种方案}
subgraph 分种类
F-.第1个.->J((测试圆形))
F-.第2个.->H>右向旗帜形]
end
H---I(测试完毕)
C--票数100---I(测试完毕)
D---I(测试完毕)
J---I(测试完毕)
sequenceDiagram
Title: 小明买书

participant consumer as 小明
participant store as 书店
participant publisher as 出版社

consumer ->> store: 想买一本限量版书籍
store -->> consumer: 缺货
consumer ->> store: 隔一个月再次询问
store -->> consumer: 抢完了
loop 一个星期一次
consumer -x +store: 有货了吗
store --x -consumer: 正在订,有货马上通知你
end

store ->> publisher: 我要订购一批货
publisher --x store: 返回所有书籍的类别信息

alt 书籍类别符合要求
store ->> publisher: 请求书单信息
publisher --x store: 返回该类别书单信息
else 书单里的书有市场需求
store ->> publisher: 购买指定数据
publisher --x store: 确认订单
else 书籍不符合要求
store -->> publisher: 暂时不购买
end

par 并行执行
publisher ->> publisher : 生产
publisher ->> publisher : 销售
end

opt 书籍购买量>=500 && 库存>=50
publisher ->> store : 出货
store --x publisher : 确认收货
end

Note left of consumer : 图书收藏家
Note over consumer,store : 去书店购买书籍
Note left of store : 全国知名书店
Note over store,publisher : 去出版社进货
Note left of publisher : 持有版权的出版社
pie
 title Pie Chart
 "Dogs" : 386
 "cats" : 567
 "rabbit" : 700
 "pig":365
 "tiger" : 15
%%{init: { "sequence-theme": "hand" } }%%

timeline
        title England's History Timeline
        section Stone Age
          7600 BC : Britain's oldest known house was built in Orkney, Scotland
          6000 BC : Sea levels rise and Britain becomes an island.
 The people who live here are hunter-gatherers.
        section Bronze Age
          2300 BC : People arrive from Europe and settle in Britain. 
They bring farming and metalworking.
                  : New styles of pottery and ways of burying the dead appear.
          2200 BC : The last major building works are completed at Stonehenge.
 People now bury their dead in stone circles.
                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
                  2200 BC : The last major building works are completed at Stonehenge.
 People now bury their dead in stone circles.
                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
%%{init: { "sequence": { "wrap": true} } }%%
sequenceDiagram

Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion?
Alice->Bob: Good.
Bob->Alice: Cool

github style alert

1
2
> [!NOTE]
> Information the user should notice even if skimming.$a \leq b$

Note

Information the user should notice even if skimming.\(a \leq b\)

1
2
> [!tip]
> Information the user should notice even if skimming.

Tip

Information the user should notice even if skimming.

1
2
> [!important]
> Information the user should notice even if skimming.

Important

Information the user should notice even if skimming.

1
2
> [!caution]
Information the user should notice even if skimming.

Caution

Information the user should notice even if skimming.

Tip

Optional information to help a user be more successful.

Important

Essential information required for user success.aaa

sdfkahsdkfhkaskdfhkashkdfhkashdkfkashdkfhkasdhkfkasdhkfhaskdhf
ashdkfhkasdkfhkas
ahksdhfkasjkdfhaskdfh

Important

Essential information required for user success.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
sdfkahsdkfhkaskdfhkashkdfhkashdkfkashdkfhkasdhkfkasdhkfhaskdhf
ashdkfhkasdkfhkas
ahksdhfkasjkdfhaskdfh

Caution

Negative potential consequences of an action.
tesesdfksdhfkksd

Warning

Dangerous certain consequences of an action.

test

esskdf\(a \leq b\)

sdflsj
sdfsdfhkaaosofosajdf

sdfsdf
asdfasdf
asdfasdf
asdfasdfasdf

Note

sdfskjdhf
sdfskhdkf'
askdfhkashdf
aksdhfkas

Note

sdfskjdhf

sdfskhdkf'

askdfhkashdf

aksdhfkas

admonition

Hexo-admonition 插件使用示例

这是基于 hexo-admonition 插件渲染的一条提示信息。类型为 note，并设置了自定义标题。

提示内容开头留 4 个空格，可以有多行，最后用空行结束此标记。

Warning

这是一条采用默认标题的警告信息。

这是一条不带标题的警告信息。

嵌套链接及引用块

欢迎访问我的博客链接：悟尘纪

这里嵌套一行引用信息。

嵌套链接及引用块

嵌套admonition

嵌套admonition

子内容

如果 $k \leq r$

标题为公式，内容公式\(k \leq r\)

所有功能

Note

Abstract

Info

Tip

Success

Question

Todo

Warning

Failure

Danger

Bug

Example

Quote

Attention

Caution

Missing

Error

reveal slides

首先在source/slides/下面闯将子文件夹(或者直接创建markdown也行)，然后创建一个markdown文件，用来存放一个幻灯片。并且需要添加如下的Front-matter。其中permalink是指定其被编译成html之后，在public中存放的位置,建议就统一存放在slides下面就好了。然后就可以直接用markdown来创建slides了，其中不同的页面通过---来分隔开。然后在需要引用的地方，可以使用<iframe src="path" width="100%" height="600" name="topFrame" scrolling="yes" noresize="noresize" frameborder="0" id="topFrame"></iframe>来进行引入。

后面有时间的时候，可以去看看下面这两个用markdown创建slides的方案.

1
2
3
4
5
6
7
---
title: title
author: narutozxp
date: 2022-05-19 20:45:27
permalink: slides/test_slide.html
layout: slides
---

test_slide

c0

c1

c2

c3

wavedrom

外部图片链接

wave

echarts绘图

hexo 实现echarts有两种方式。

第一种是直接使用echarts类型的代码块，里面写入echarts所需的option。然后再echarts代码块的上面添加<script>标签，其中添加变量和函数的定义，如果某个图不需要额外的函数或者变量定义，则可以不需要添加<script>。剧吐实施可以参考柱状图Bar里面的第一张图的实现。

第二中实现方式是，直接在source/custom_html/下新增一个html文件，直接在里面添加所需的js,css等文件。然后在所需的地方使用<iframe src="path" width="100%" height="600" name="topFrame" scrolling="yes" noresize="noresize" frameborder="0" id="topFrame"></iframe>进行引入。具体的实施方案可以参考地图Map的实现。

第一种实现方案可能会通过script标签引入过多的变量和函数，它们之间可能会冲突。因此建议简单图形通过方案一来实现，复杂图形通过方案二来实现

折线图Line

Stacked area chart

Area Pieces

Rainfall

Line Easing Visualizing

柱状图Bar

柱状图动画延迟

柱状框选图

极坐标系下的堆叠柱状图

饼图Pie

Texture On Pie Chart

地图Map

Air Quality - Baidu Map

K线图Candlestick

Candlestick Brush

雷达图Radar

Proportion of Browsers

关系图Graph

Graph Webkit Dep

树图Tree

Multiple Trees

日历坐标系Calendar

Calendar Hearmap Horizontal

3D图

Bar3D - Simple Noise

音乐

abc五线谱

有很多音乐都没有abc的谱子，这时候可以通过下载midi或者musicxml格式的歌曲，然后通过工具转换成abc格式。
midi2abc,以及其在线工具

musicxml转abc的工具(这两个工具我还没有试过)：
xml2abc
musicXML-to-simplifiedAbc





嵌入musescore

1
2
直接去musescore的官网，找到谱子，然后点进去，点击分享，就可以获得如下的嵌入链接
<iframe id="score-iframe" width="100%" height="394" src="https://musescore.com/user/16006641/scores/4197961/embed" frameborder="0" allowfullscreen allow="autoplay; fullscreen"></iframe><span><a href="https://musescore.com/user/16006641/scores/4197961" target="_blank">Merry-Go-Round of Life: Howl's Moving Castle Piano Tutorial</a> by <a href="https://musescore.com/user/16006641">PianoChannel</a></span>

Merry-Go-Round of Life: Howl's Moving Castle Piano Tutorial by PianoChannel

kroki画图

1
2
3
4
5
#使用语法,其中{kroki=true}可有可无(当前还不行，改成这样以后，会导致hexo渲染的时候卡死，还没找到原因，大概率跟wavedrom可以被kroki渲染，也可以被我写的脚本渲染)
```language {kroki=true}
code
code
```

kroki所支持的language如下，其中plantuml的功能非常丰富，还可以绘制脑图

  • actdiag
  • blockdiag
  • bpmn
  • bytefield
  • c4plantuml
  • d2
  • dbml
  • ditaa
  • erd
  • excalidraw
  • graphviz
  • mermaid
  • nomnoml
  • nwdiag
  • packetdiag
  • pikchr
  • plantuml
  • rackdiag
  • seqdiag
  • structurizr
  • svgbob
  • tikz
  • vega
  • vegalite
  • wavedrom
  • wireviz

Table中插入wavedrom

当前渲染使用的pandoc版本为3.3

符号 含义 样例 渲染结果
. 与上一周期状态相同 { signal : [{ name: ".", wave: "p..." }]}

test
p 在周期开始时为上升沿的时钟信号 { signal : [{ name: ".", wave: "p.pp" }]} a link
P 在周期开始时为上升沿的时钟信号，上升沿有箭头 { signal : [{ name: ".", wave: "P.PP" }]} one
n 在周期开始时为下降沿的时钟信号 { signal : [{ name: ".", wave: "n.nn" }]} n
N 在周期开始时为下降沿的时钟信号，下降沿有箭头 { signal : [{ name: ".", wave: "N.NN" }]} N
0 低电平，有过渡 { signal : [{ name: ".", wave: "0.01" }]} 0
l 低电平，无过渡 { signal : [{ name: ".", wave: "l.lh" }]} l
1 高电平，有过渡 { signal : [{ name: ".", wave: "1.10" }]} 1
h 高电平，无过渡 { signal : [{ name: ".", wave: "h.hl" }]} h
z 高阻态 { signal : [{ name: ".", wave: "z.zz" }]} z
d 下拉（弱 0） { signal : [{ name: ".", wave: "d.dd" }]} d
u 上拉（弱 1） { signal : [{ name: ".", wave: "u.uu" }]} u
x 未定义 { signal : [{ name: ".", wave: "x.xx" }]} x
2/= 值（颜色为 2） { signal : [{ name: "2", wave: "2.22" }]} 2
3 值（颜色为 3） { signal : [{ name: "3", wave: "3.33" }]} 3
4/5/6 值（颜色为 4/5/6） { signal : [{ name: "4/5/6", wave: "4.56" }]} 4/5/6
7/8/9 值（颜色为 7/8/9） { signal : [{ name: "7/8/9", wave: "7.89" }]} 7/8/9
| 延长前一个周期并绘制间隙 { signal : [{ name: "|", wave: "xx|x" }]} |

pseudocode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
```pseudocode
% This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
    \begin{algorithm}
    \caption{Quicksort}
    \begin{algorithmic}
    \PROCEDURE{Quicksort}{$A, p, r$}
        \IF{$p < r$} 
            \STATE $q = $ \CALL{Partition}{$A, p, r$}
            \STATE \CALL{Quicksort}{$A, p, q - 1$}
            \STATE \CALL{Quicksort}{$A, q + 1, r$}
        \ENDIF
    \ENDPROCEDURE
    \PROCEDURE{Partition}{$A, p, r$}
        \STATE $x = A[r]$
        \STATE $i = p - 1$
        \FOR{$j = p$ \TO $r - 1$}
            \IF{$A[j] < x$}
                \STATE $i = i + 1$
                \STATE exchange
                $A[i]$ with $A[j]$
            \ENDIF
            \STATE exchange $A[i]$ with $A[r]$
        \ENDFOR
    \ENDPROCEDURE
    \end{algorithmic}
    \end{algorithm}
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
% This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
    \begin{algorithm}
    \caption{Quicksort}
    \begin{algorithmic}
    \PROCEDURE{Quicksort}{$A, p, r$}
        \IF{$p < r$} 
            \STATE $q = $ \CALL{Partition}{$A, p, r$}
            \STATE \CALL{Quicksort}{$A, p, q - 1$}
            \STATE \CALL{Quicksort}{$A, q + 1, r$}
        \ENDIF
    \ENDPROCEDURE
    \PROCEDURE{Partition}{$A, p, r$}
        \STATE $x = A[r]$
        \STATE $i = p - 1$
        \FOR{$j = p$ \TO $r - 1$}
            \IF{$A[j] < x$}
                \STATE $i = i + 1$
                \STATE exchange
                $A[i]$ with $A[j]$
            \ENDIF
            \STATE exchange $A[i]$ with $A[r]$
        \ENDFOR
    \ENDPROCEDURE
    \end{algorithmic}
    \end{algorithm}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<pre id="quicksort" class="pseudocode">
    % This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
    \begin{algorithm}
    \caption{Quicksort}
    \begin{algorithmic}
    \PROCEDURE{Quicksort}{$A, p, r$}
        \IF{$p < r$} 
            \STATE $q = $ \CALL{Partition}{$A, p, r$}
            \STATE \CALL{Quicksort}{$A, p, q - 1$}
            \STATE \CALL{Quicksort}{$A, q + 1, r$}
        \ENDIF
    \ENDPROCEDURE
    \PROCEDURE{Partition}{$A, p, r$}
        \STATE $x = A[r]$
        \STATE $i = p - 1$
        \FOR{$j = p$ \TO $r - 1$}
            \IF{$A[j] < x$}
                \STATE $i = i + 1$
                \STATE exchange
                $A[i]$ with $A[j]$
            \ENDIF
            \STATE exchange $A[i]$ with $A[r]$
        \ENDFOR
    \ENDPROCEDURE
    \end{algorithmic}
    \end{algorithm}
</pre>
    % This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
    \begin{algorithm}
    \caption{Quicksort}
    \begin{algorithmic}
    \PROCEDURE{Quicksort}{$A, p, r$}
        \IF{$p < r$} 
            \STATE $q = $ \CALL{Partition}{$A, p, r$}
            \STATE \CALL{Quicksort}{$A, p, q - 1$}
            \STATE \CALL{Quicksort}{$A, q + 1, r$}
        \ENDIF
    \ENDPROCEDURE
    \PROCEDURE{Partition}{$A, p, r$}
        \STATE $x = A[r]$
        \STATE $i = p - 1$
        \FOR{$j = p$ \TO $r - 1$}
            \IF{$A[j] < x$}
                \STATE $i = i + 1$
                \STATE exchange
                $A[i]$ with $A[j]$
            \ENDIF
            \STATE exchange $A[i]$ with $A[r]$
        \ENDFOR
    \ENDPROCEDURE
    \end{algorithmic}
    \end{algorithm}

交叉引用

引用与打标签的语法需要安装pandoc-crossref，表格标题的语法不需要

参考链接

原则上，在添加标签的时候，{与#之间是不需要空格的，但是由于hexo的问题，如果不加空格的话，会导致其截断后面的内容（{ and # without space is interpreted as a comment of the nunjucks template by Hexo），可以通过在博客的Front-matter中添加disableNunjucks: true来解决这个问题，但是添加了这个之后，很多插件就失效了。因此比较好的方案是使用<span id="HTML-anchor"></span>来添加标签

图片交叉引用

fig ref

1
2
3
4
5
创建标签语法
![fig Caption](link){#fig:label}

引用语法
[fig ref](#fig:label)

fig

表格交叉引用

Caption
a b c
1 2 3
4 5 6

下面Caption上的那个空行不能少

table ref

1
2
3
4
5
6
7
8
9
创建标签语法
a   b   c
--- --- ---
1   2   3
4   5   6

: Caption {#tbl:label}

引用标签语法[text](#tbl:label)
Caption { #tbl:label)}
a b c
1 2 3
4 5 6

公式交叉引用

math ref

1
$$ math $$ {#eq:label}

\[ math \] { #eq:label}

\[\cssId{Overlinev}{\overline{v}}:\overline{S}\to\{F,T\}\]

test公式ref

代码块交叉引用

code ref

1
2
3
4
5
6
```haskell
main :: IO ()
main = putStrLn "Hello World!"
```

: Listing caption {#lst:code}
1
2
main :: IO ()
main = putStrLn "Hello World!"

: Listing caption { #lst:code}

  1. 脚注测试↩︎

  2. english↩︎