首页 博客

🚀快速开始 - 💌依赖插件 - 📌基本配置 - 🌈界面显示 - 🦄特殊功能

以下介绍可以使用的 markdown 或者标签代码。
功能大部分基于 hexo-renderer-multi-markdown-it 渲染器，尤其是代码块的显示，与默认渲染器不兼容。

# links 链接块

本功能参考 NexT，基于 Hexo Tag 功能，用来建立友链或其他网址链接功能。

文章中的使用格式：

  1. 使用 links 标签块，包围 yml 语法书写的内容，字段包括
site站点名称必填
owner管理员名字可选，默认为 site 的值
url站点链接必填
desc站点描述可选，默认为 url 的值
image站点图片可选，默认为 images/404.png
color方块颜色可选，默认为 #666
{% links %}
- site: #站点名称
  owner: #管理员名字
  url: #站点网址
  desc: #简短描述
  image: #一张图片
  color: #颜色代码
{% endlinks %}

举个栗子：

{% links %}
- site: 優萌初華
  owner: 霜月琉璃
  url: https://shoka.lostyu.me
  desc: 琉璃的医学 & 编程笔记
  image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg
  color: "#e9546b"
- site: 優萌初華
  owner: 霜月琉璃
  url: https://shoka.lostyu.me
  image: images/avatar.jpg
- site: 優萌初華
  url: https://shoka.lostyu.me
  desc: 琉璃的医学 & 编程笔记
  color: "#9d5b8b"
{% endlinks %}
優萌初華
琉璃的医学 & 编程笔记
優萌初華
https://shoka.lostyu.me
優萌初華
琉璃的医学 & 编程笔记
  1. 以上标签块里的内容，还可以保存到一个 yml 文件中，然后使用 linksfile 标签。
    其中， path 位于 <root>/source 目录下。
{% linksfile [path] %}
举个栗子：
{% linksfile friends/_data.yml %}
# code 代码块
使用 markdown-it-prism 进行代码高亮，支持显示行号、行高亮 mark 、命令行提示符 command 、代码块标题。
基本格式： [language] [title] [url] [link text] [mark] [command]
选项描述默认值
language
  • 支持的语言戳此
  • 如果不需要代码高亮，但希望显示代码块样式，则设为 raw
  • 留空或设为 info ，将不显示代码高亮和代码块样式
null
title代码块的标题文字null
url代码块标题右侧显示的链接null
link text上述链接显示的标题link
mark
行高亮显示，格式为 mark:行号,行号开始-行号结束,其他行号 。
例如 mark:1,4-7,10 ，将高亮显示第 1、4、5、6、7、10 行
null
command
命令行提示符，格式为 command:("提示内容":行号,行号||"提示内容":行号开始-行号结束)
例如 command:("[root@localhost] $":1,9-10||"[admin@remotehost] #":4-6)
null
```java 行高亮 https://shoka.lostyu.me 参考链接 mark:1,6-7
import java.util.Scanner;
...
Scanner in = new Scanner (System.in);
// 输入 Scan 之后，按下键盘 Alt + “/” 键，Eclipse 下自动补全。
System.out.println (in.nextLine ());
System.out.println ("Hello" + "world.");
```
```bash 命令行提示符 command:("[root@localhost] $":1,9-10||"[admin@remotehost] #":4-6)
pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x   2 chris  chris     11 Jan 10 16:48 .
drwxr--r-x  45 chris  chris     92 Feb 14 11:10 ..
-rwxr-xr-x   1 chris  chris    444 Aug 25  2013 backup
-rwxr-xr-x   1 chris  chris    642 Jan 17 14:42 deploy
git add -A
git commit -m "update"
git push
```
行高亮参考链接
import java.util.Scanner;
...
Scanner in = new Scanner(System.in);
// 输入 Scan 之后，按下键盘 Alt + “/” 键，Eclipse 下自动补全。
System.out.println(in.nextLine());
System.out.println("Hello" + " world.");
命令行提示符
pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x   2 chris  chris     11 Jan 10 16:48 .
drwxr--r-x  45 chris  chris     92 Feb 14 11:10 ..
-rwxr-xr-x   1 chris  chris    444 Aug 25  2013 backup
-rwxr-xr-x   1 chris  chris    642 Jan 17 14:42 deploy
git add -A
git commit -m "update"
git push
# quiz 练习题与答案
这个功能是用来显示练习题的。
需要在 Front Matter 中添加 quiz: true ，以正确显示题型标签。
几个例子
---
title: 练习题与答案
quiz: true
---
1. 编译时多态主要指运算符重载与函数重载，而运行时多态主要指虚函数。 {.quiz .true}
2. 有基类 `SHAPE`，派生类 `CIRCLE`，声明如下变量：  {.quiz .multi}
    ```cpp
    SHAPE shape1,*p1;
    CIRCLE circle1,*q1;
    ```
    下列哪些项是 “派生类对象替换基类对象”。
    - `p1=&circle1;` {.correct}
    - `q1=&shape1;`
    - `shape1=circle1;` {.correct}
    - `circle1=shape1;`
{.options}
    > - :heavy_check_mark: 令基类对象的指针指向派生类对象
    > - :x: 派生类指针指向基类的引用
    > - :heavy_check_mark: 派生类对象给基类对象赋值
    > - :x: 基类对象给派生类对象赋值
    > {.options}
3. 下列叙述正确的是 []{.gap} 。 {.quiz}
    - 虚函数只能定义成无参函数
    - 虚函数不能有返回值
    - 能定义虚构造函数
    - A、B、C 都不对 {.correct}
{.options}
10. 如果定义 `int e=8; double f=6.4, g=8.9;`，则表达式 `f+int (e/3*int (f+g)/2)%4` 的值为 [9.4]{.gap}。 {.quiz .fill}
    > 注意运算顺序和数据类型
    > [8.4]{.mistake}
点击选项可以显示答案，以及答案解析。
  1. 下列叙述正确的是  。
    • 虚函数只能定义成无参函数
    • 虚函数不能有返回值
    • 能定义虚构造函数
    • A、B、C 都不对
  2. 有基类 SHAPE ，派生类 CIRCLE ，声明如下变量：
    SHAPE shape1,*p1;
    CIRCLE circle1,*q1;
    下列哪些项是 “派生类对象替换基类对象”。
    • p1=&circle1;
    • q1=&shape1;
    • shape1=circle1;
    • circle1=shape1;
    • ✔️ 令基类对象的指针指向派生类对象
    • ❌ 派生类指针指向基类的引用
    • ✔️ 派生类对象给基类对象赋值
    • ❌ 基类对象给派生类对象赋值
  3. 编译时多态主要指运算符重载与函数重载，而运行时多态主要指虚函数。
  4. 如果定义 int e=8; double f=6.4, g=8.9; ，则表达式 f+int(e/3*int(f+g)/2)%4 的值为 9.4。
    注意运算顺序和数据类型
    8.4
# 使用说明
本功能基于 markdown-it-bracketed-spans 和 markdown-it-attrs
标签含义
{.quiz}选择题
{.quiz .multi}多选题
{.quiz .true}正确的判断题
{.quiz .false}错误的判断题
{.quiz .fill}填空题
[]{.gap}空白下划线
[答案内容]{.gap}答案内容带下划线
{.options}ABCDE 选项
{.correct}选择题的正确选项
>答案解析
[8.4]{.mistake}错题备注
# emoji 绘文字
本功能基于 markdown-it-emoji ，所有标签参考戳此
:kissing_heart:
:ring:
:notes:
😘 💍 🎶
# effects 文字特效
本功能基于 markdown-it-ins 、 markdown-it-bracketed-spans 和 markdown-it-attrs
本主题风格颜色通用样式：default、primary、success、info、warning、danger
++ 下划线 ++
++ 波浪线 ++{.wavy}
++ 着重点 ++{.dot}
++ 紫色下划线 ++{.primary}
++ 绿色波浪线 ++{.wavy .success}
++ 黄色着重点 ++{.dot .warning}
~~ 删除线～～
~~ 红色删除线～～{.danger}
== 荧光高亮 ==
[赤橙黄绿青蓝紫]{.rainbow}
[红色]{.red}
[粉色]{.pink}
[橙色]{.orange}
[红色]{.yellow}
[绿色]{.green}
[靛青]{.aqua}
[蓝色]{.blue}
[紫色]{.purple}
[灰色]{.grey}
快捷键 [Ctrl]{.kbd} + [C]{.kbd .red}
H~2~0
29^th^
这段代码因为自动被 pangu.js 处理了一下，加了几个空格，导致直接复制代码不能正常显示。
正确的代码是 ++下划线++ ~~删除线~~ ==荧光高亮== ，不能有空格哦。
下划线
波浪线
着重点
紫色下划线
绿色波浪线
黄色着重点
删除线
红色删除线
荧光高亮
赤橙黄绿青蓝紫
红色
粉色
橙色
黄色
绿色
靛青
蓝色
紫色
灰色
快捷键 Ctrl + C
H20
29th
# spoiler 隐藏文字
本功能基于 markdown-it-spoiler 和 markdown-it-attrs
!! 黑幕黑幕黑幕黑幕黑幕黑幕！！： 鼠标滑过显示内容
!! 模糊模糊模糊模糊模糊模糊！！{.bulr} ： 选中文字显示内容
黑幕黑幕黑幕黑幕黑幕黑幕 ： 鼠标滑过显示内容
模糊模糊模糊模糊模糊模糊 ： 选中文字显示内容
# label 标签块
本功能基于 markdown-it-bracketed-spans 和 markdown-it-attrs
有以下颜色可选
[default]{.label}
[primary]{.label .primary}
[info]{.label .info}
[:heavy_check_mark:success]{.label .success}
[warning]{.label .warning}
[:broken_heart:danger]{.label .danger}
default
primary
info
✔️success
warning
💔danger
# note 提醒块
本功能基于 markdown-it-container
标签为：
开始行:::[风格颜色]
结束行:::
:::default
默认默认
:::
:::primary
基本基本
:::
:::info
提示提示
:::
:::success
成功成功
:::
:::warning
警告警告
:::
:::danger
危险危险
:::
:::danger no-icon
危险危险
:::
默认默认
基本基本
提示提示
成功成功
警告警告
危险危险
没有图标
# tab 标签卡
本功能基于 markdown-it-container
标签为：
开始行;;;[同一ID] [标签名称]
结束行;;;
;;;id1 卡片 1
这里是卡片 1 的内容
** 加粗 **
[success]{.label .success}
{% links %}
- site: 優萌初華
  owner: 霜月琉璃
  url: https://shoka.lostyu.me
  desc: 琉璃的医学 & 编程笔记
  image: https://cdn.jsdelivr.net/gh/amehime/shoka@latest/images/avatar.jpg
  color: "#e9546b"
{% endlinks %}
;;;
;;;id1 卡片 2
这里是卡片 2 的内容
:::danger
危险危险
:::
- 第一行
- 第二行
;;;
;;;id2 ②号标签卡片 1
这里是卡片 1 的内容
;;;
;;;id2 ②号标签卡片 2
这里是卡片 2 的内容
;;;
这里是卡片 1 的内容
加粗
success
優萌初華
琉璃的医学 & 编程笔记
这里是卡片 2 的内容
危险危险
  • 第一行
  • 第二行
这里是卡片 1 的内容
这里是卡片 2 的内容
# collapse 折叠块
本功能基于 markdown-it-container
标签为：
开始行+++[风格颜色] [标题文字]
结束行+++
+++ 默认默认 这里是一段文字
++ 下划线 ++
+++
+++primary 紫色
:::info
参考信息
:::
- 第一行
- 第二行
+++
+++info  蓝色
;;;id3 卡片 1
这里是卡片 1 的内容
;;;
;;;id3 卡片 2
这里是卡片 2 的内容
;;;
+++
+++success 绿色
{% links %}
- site: 優萌初華
  url: https://shoka.lostyu.me
  color: "#e9546b"
{% endlinks %}
+++
+++warning 黄色
!! 警告警告警告警告警告！！{.bulr}
[label]{.label .success}
+++
+++danger 红色
[danger]{.label .danger}
+++
默认默认 这里是一段文字
下划线
紫色
参考信息
  • 第一行
  • 第二行
蓝色
这里是卡片 1 的内容
波浪线
这里是卡片 2 的内容
绿色
優萌初華
https://shoka.lostyu.me
黄色
警告警告警告警告警告
label
红色
danger
# taskList 待办事项
本功能基于 markdown-it-task-checkbox 。
可以利用 markdown-it-attrs 添加风格颜色，只可以给 ul 标签添加，需要新建两行。
- [ ] 这是一个小叉叉
- [x] 这是一个红色勾勾
{.danger}
- [ ] 未完成
- [x] 完成
{.primary}
- [ ] 未完成
- [x] 默认颜色
# furigana 文字注音
原本用于日语汉字假名注音，但别的注音也可以。
为了兼容性，采用 markdown-it-ruby 的基本格式： {文字^注音} ，并且为了兼容表格，将分隔符由 | 换成了 ^ 。
注音分隔基于 furigana-markdown-it 显示说明看这里
{取り返す^とりかえす}取(と) り返(かえ) す
{可愛い犬^か+わい・い・いぬ}可愛(かわい) い犬(いぬ)
{可愛い犬^か・わい・いいぬ}可(か) 愛(わい) い犬(いぬ)
{アクセラレータ^accelerator}アクセラレータ(accelerator)
{accelerator^アクセラレータ}accelerator(アクセラレータ)
{食べる^たべる}食(た) べる
{食べる^=たべる}食べる(たべる)
{あいうえお^*}あ●い●う●え●お●
{あいうえお^*❤}あ❤い❤う❤え❤お❤
{常用账号^contact}常用账号(contact)
# media 多媒体
本功能基于 Hexo Tag 功能，使用 media 标签，目前可选择两种类型，即 audio 和 video 。
{% media audio %}
... 音频列表
{% endmedia %}
{% media video %}
... 视频列表
{% endmedia %}
标签包绕一段 yml 格式的内容，格式与背景音乐的配置类似。
亦可以直接使用网易云、虾米、QQ 音乐的播放列表、单曲。
举个栗子
{% media audio %}
- title: 列表 1
  list:
    - https://music.163.com/#/playlist?id=2943811283
    - https://music.163.com/#/playlist?id=2297706586
- title: 列表 2
  list:
    - https://music.163.com/#/playlist?id=2031842656
{% endmedia %}
{% media video %}
- name: "测试 1"
  url: https://cdn.kastatic.org/ka-youtube-converted/O_nY1TM2RZM.mp4/O_nY1TM2RZM.mp4#t=0
- name: "测试 2"
  url: https://cdn.kastatic.org/ka-youtube-converted/O_nY1TM2RZM.mp4/O_nY1TM2RZM.mp4#t=0
{% endmedia %}
# math 数学公式
本功能基于 markdown-it-katex
在 Front Matter 中添加 math: true 以支持 KaTex
---
title: 数学公式显示
math: true
---
行内公式：$\sqrt {3x-1}+(1+x)^2$
独立块显示：
$$\begin {array}{c}
\nabla \times \vec {\mathbf {B}} -\, \frac1c\, \frac {\partial\vec {\mathbf {E}}}{\partial t} &
= \frac {4\pi}{c}\vec {\mathbf {j}}    \nabla \cdot \vec {\mathbf {E}} & = 4 \pi \rho \\
\nabla \times \vec {\mathbf {E}}\, +\, \frac1c\, \frac {\partial\vec {\mathbf {B}}}{\partial t} & = \vec {\mathbf {0}} \\
\nabla \cdot \vec {\mathbf {B}} & = 0
\end {array}$$
行内公式：3x−1+(1+x)2\sqrt{3x-1}+(1+x)^2
独立块显示：
∇×B⃗−1c∂E⃗∂t=4πcj⃗∇⋅E⃗=4πρ∇×E⃗+1c∂B⃗∂t=0⃗∇⋅B⃗=0\begin{array}{c} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{array}
# mermaid 流程图
本功能基于 markdown-it-mermaid
在 Front Matter 中添加 mermaid: true 以支持 Mermaid
---
title: 流程图显示
mermaid: true
---
```mermaid
graph LR
    A [Square Rect] -- Link text --> B ((Circle))
    A --> C (Round Rect)
    B --> D {Rhombus}
    C --> D
```
```mermaid
sequenceDiagram
    loop Daily query
        Alice->>Bob: Hello Bob, how are you?
        alt is sick
            Bob->>Alice: Not so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end
        opt Extra response
            Bob->>Alice: Thanks for asking
        end
    end
```
Error: Could not find browser revision 818858. Run "PUPPETEER_PRODUCT=firefox npm install" or "PUPPETEER_PRODUCT=firefox yarn install" to download a supported Firefox browser binary.
Error: Could not find browser revision 818858. Run "PUPPETEER_PRODUCT=firefox npm install" or "PUPPETEER_PRODUCT=firefox yarn install" to download a supported Firefox browser binary.
 
 更新于 
请我喝[茶]~(￣▽￣)~*
Junwide Xiao 微信支付
微信支付
Junwide Xiao 支付宝
支付宝