组件样式示例 | 心记|Mood

在 Markdown 中使用组件

Nuxt Content 使用 Markdown 语法和约定来提供丰富的文本编辑体验。它使用自定的 MDC 语法，可以让你在 Markdown 中使用 Vue 组件，并支持多种 remark 扩展。

我编写了一些可以在 Markdown 文件中调用的组件，以下是一些示例。

通过 CSS 类名控制样式

各级标题
- 在 Front matter 中设置 type: story 可以换用不同样式。
- 跟随 URL Hash（网址锚点）的高亮。
引用。
无序和有序列表。
粗体、~~删除线~~。
分割线。

带有 icon 类名的图片，如。
只在 type: story 时🀄
故事感。
阴影回声
滚动，然后悄悄变大变高，惊艳所有人。

Markdown 语法组件

可以通过 Markdown 原生语法、HTML 语法和 MDC 语法使用的组件。

链接 `ProseA`

这是内部链接。站外链接默认在新标签页打开，并在鼠标悬浮时展示域名。

还会根据域名展示图标，例如微软文档、GitHub、Bilibili、QQ 官网、微信公众号等。

为更多站点匹配图标

你可以在 app/utils/icon.ts 分别为主域名或专门域名（优先级高）添加匹配规则来为更多站点匹配图标。

代码 `ProseCode`

行内代码 和在超链接中的 行内代码。

还可以通过在反引号后加 {lang="js"} 等语言实现高亮，例如 const a = 1 。

代码块 `ProsePre`

text

纯文本代码块

文件名text

带文件夹名、未指定语言的代码块

yaml

语言: yaml # 指定语言但无文件名

特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别长的文件名yaml

羽化边缘: 如果一行特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别长，溢出滚动时有羽化边缘。

CHANGELOG.mdmd

# 更新日志
- 特殊文件名自动匹配图标
- 若行数超出
  `appConfig.component.codeblock.triggerRows`
  （默认32）
  - 则自动折叠到
  `appConfig.component.codeblock.collapsedRows`
  （默认16）
- 如果设置了 expand，则不会自动折叠
- 如果设置了 wrap，则会自动换行
- 如果设置了文件名，则会在代码块标题前展示图标
  - 图标只在有文件名时展示
  - 默认图标是语言图标
  - 特殊文件名也会自动识别出图标
  - 文件名可以是任意字符串，例如 `CHANGELOG.md`、`README.md` 等
  - 文件名也可以是路径，例如 `src/components/ProsePre.vue` 等
  - 还可以通过 `icon=图标` 自定义图标

\
\
\
\
\
\
\
\
\
\
\
\
\
\
\

更多功能md

- 在 Markdown 文件中，可以通过代码块语法的 meta 标记
  - `wrap` 直接启用自动换行功能，以展示特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别长的文本而不换行
  - `icon=tabler:files` 自定义代码块图标
  - `expand` 禁用自动折叠功能

# 代码块语法

```语言简写 [文件名] icon=图标 wrap expand
- 上面这几项都是可选的。
- 如果有语言简写，必须位于反引号后的第一项，且需要是小写字母。
  - https://shiki.style/languages
- 方括号包裹的是文件名。
- icon=图标、wrap、expand 都是 meta 标记。
- 如果要在代码块中嵌套代码块语法，外层可以用四个反引号包裹。
```

高亮和转换

代码块通过 Shiki 进行高亮，可在 blog.config.ts 中配置语言（Markdown 中出现的所有语言）和代码高亮主题。

转换器（如 diff）可通过 https://shiki.style/packages/transformers#transformers 配置，启用的转换器可在 app/stores/shiki.ts 查看。

为更多语言匹配图标

你可以根据 app/utils/icon.ts 语言图标匹配流程为文件后缀、语言简写或别名添加匹配规则来为更多语言匹配图标：

查找 file2icon 映射表，将文件名后缀替换为图标名。
若无匹配，查找 ext2lang 映射表，将语言简写或别名转换为 Catppuccin 图标库中的语言名。
将 Catppuccin 图标库中的语言名转换为 Iconify 图标名。

表格 `ProseTable`

支持表格横向滚动或自动换行的切换。

表头滚动吸附	滚动时边缘羽化	如果标题或内容很 loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog	这里还有一列，但是是空内容
已实现	已实现	可以切换滚动方式

脚注

由remark-gfm的micromark-extension-gfm-footnote驱动的脚注¹。

数学公式

由 remark-KaTeX\KaTeX 驱动，支持 TeX\TeX 和部分 LaTeX\LaTeX 语法。如果 Markdown 正文需要直接使用 $ 符号，需要使用 \$ 转义。
支持语法列表（中文版）

行内公式课程绩点=课程分数(成绩)10−5\text{课程绩点} = \frac{\text{课程分数(成绩)}}{10} - 5

学分绩点=课程学分×课程绩点\text{学分绩点} = \text{课程学分} \times \text{课程绩点}平均绩点(GPA)=学分绩点之和课程学分之和=∑(课程学分×课程绩点)∑课程学分\text{平均绩点(GPA)} =\frac {\text{学分绩点之和}}{\text{课程学分之和}} = \frac{\sum (\text{课程学分} \times \text{课程绩点})}{\sum \text{课程学分}} 纸鹿至麓不知路支炉制麓不止漉\raisebox{-2pt}{\colorbox{#4A90A4}{\color{white}{\Large\text{纸}}}}\kern-2pt \raisebox{-4pt}{\colorbox{#5BA88C}{\color{white}{\large\text{鹿}}}}\kern-3pt \raisebox{-1pt}{\colorbox{#6B8E9F}{\color{white}{\normalsize\text{至}}}}\kern-1pt \raisebox{-3pt}{\colorbox{#A8D5E2}{\color{#2C4A52}{\large\text{麓}}}}\kern-2pt \raisebox{0pt}{\colorbox{#B8E0D0}{\color{#2C4A52}{\normalsize\text{不}}}}\kern-3pt \raisebox{-5pt}{\colorbox{#5A9AA8}{\color{white}{\large\text{知}}}}\kern-1pt \raisebox{-2pt}{\colorbox{#C5E0E8}{\color{#2C4A52}{\Large\text{路}}}} \quad \raisebox{-4pt}{\colorbox{#5BA88C}{\color{white}{\large\text{支}}}}\kern-2pt \raisebox{-1pt}{\colorbox{#4A90A4}{\color{white}{\Large\text{炉}}}}\kern-3pt \raisebox{-3pt}{\colorbox{#7BC4B5}{\color{white}{\normalsize\text{制}}}}\kern-1pt \raisebox{-5pt}{\colorbox{#A8D5E2}{\color{#2C4A52}{\large\text{麓}}}}\kern-2pt \raisebox{-2pt}{\colorbox{#C5E0E8}{\color{#2C4A52}{\Large\text{不}}}}\kern-3pt \raisebox{0pt}{\colorbox{#6B8E9F}{\color{white}{\normalsize\text{止}}}}\kern-1pt \raisebox{-3pt}{\colorbox{#B8E0D0}{\color{#2C4A52}{\large\text{漉}}}}

许可协议和侧栏插槽

由自编写的rehype-meta-slots插件实现，插槽必须是文章的直接子元素，内容已插入到文章末尾 ² 和目录侧栏。

mdc

---
aside: [toc, meta-aside-foo, meta-aside-bar]
---

::meta-aside-foo{title="从文章插入的组件" card}
展示remark插件能力，为用户自己编写插件提供实现思路。

虽然一般情况下， :blur[文章侧栏不需要组件]
::

:::meta-aside-bar
::link-card
---
title: MDC 基本语法（必读）
icon: https://v2.content.nuxt.com/favicon.ico
link: https://content.nuxt.com/docs/files/markdown#mdc-syntax
---
::
:::

::meta-copyright{title="本文章不保留版权"}
通过 [CC0 1.0](https://creativecommons.org/publicdomain/zero/1.0/deed.zh-hans){icon="ri:creative-commons-zero-line"} 贡献至公共领域。
::

乐谱渲染播放

由自编写的remark-music插件实现，必要时可用豆包等 AI 将乐谱识别为 ABC 记法。只在网络状态良好时加载播放能力。
编辑器、Cheat Sheet 和语法检查：https://editor.drawthedots.com/

自定义组件

可以通过 Vue 模板语法、MDC 语法使用的组件。

Alert

问题

默认插槽的超链接粗体 Inline code

自定义标题

默认插槽的超链接粗体 Inline code

卡片风格标题插槽的超链接粗体 Inline code

默认插槽的超链接粗体 Inline code

扁平风格标题插槽的超链接粗体 Inline code

默认插槽的超链接粗体 Inline code

Badge

鼠标悬浮时的动画 Emoji 📄🦌🙌🐟🏖️ 对应“纸鹿摸鱼处”的汉字，在 app.config.ts 中配置，字体由阿里妈妈方圆体分割而来。

# iconfont 网页版生成的字体子集在 Chrome 124 的版本无法解析，需要借助 fonttools 工具手动生成子集
pip install fonttools brotli
pyftsubset ./AlimamaFangYuanTi.ttf --text=Header文本 --flavor=woff2

Blur

CardList

给列表刷上了自定义样式，待完善。

无序列表项1
无序列表项2
- 无序列表项2-1
  - 无序列表项2-1-1
- 无序列表项2-2

Chat

2024-11-09 23:39:30
: 也许
: 我们可以聊聊天
纸鹿: 我还可以有名字
纸鹿撤回了一条消息
用户1: 有趣
我学到了。

Copy

$

rm -rf # 修改命令后再复制，也可撤销修改

不带提示符的命令，可以是 URL、单行代码

自定义命令提示符、高亮语言const customLang = 'js' // 滚动条、边缘羽化会出现，假如它特别特别特别特别特别特别特别特别长

自动推断语言

语言从 app/utils/str.ts 的 getPromptLanguage 里根据命令提示符前缀推断，使用 plain-shiki 高亮。和之前的 Markdown 代码块使用相同的高亮语言和高亮主题配置。

EmojiClock

现在几点了？

FeedCard 和 FeedGroup

用于在友链页面展示链接，由于友链页面的 Markdown 部分要可能会显示这个组件，就放在这个目录下大家都能调用了。去友链页面看看吧。

Folding

折叠组件，支持折叠和展开，可以嵌套使用。

可以通过标题插槽传值超链接粗体 Inline code

默认插槽的超链接粗体 Inline code

折叠还可以嵌套

默认展开的折叠。

在嵌套使用的组件内部使用 MDC 的 #slotname 插槽语法

必须缩进，否则会报错。

- 默认展开的折叠。

Key

按下键时会亮，可以通过 @press 配置触发事件，鼠标点击也会触发事件，博客全站搜索框的按键提示使用了这个组件。

纯 Code

Esc F2 Ctrl A Space Tab Enter

指定修饰符、图标、文本（macOS 自动使用图标）

⌃ ⌥ ⇧ 空格 ⇥ ↵

组合键

Ctrl+Shift+A Shift+Alt ⌃⌥⎋

~~热血组合技 ↑ ↑ ↓ ↓ ← → ← → B A~~

LinkCard

Pic

用于展示图片，支持说明文字、点击后打开灯箱缩放。

Poetry

在文章的 type 为 tech 或 story 时，它有不同的样式。

诗有诗的标题

一名作者

如你所见，我, 是一首—— 诗。

可选的落款

Quote

在文章的 type 为 tech 或 story 时，它有不同的样式。

ヾ(•ω•`)o

图标插槽也可以是 Emoji 或颜文字，或者英文装饰。

Tab

Timeline

前天: 看到了小兔
昨天: 是小鹿
今天: 是你。

今日无事
今日依旧无事
然后——: 一件事
两件事。; 再添一笔。

Tip

我是一条小提示，我没有图标， +v 点击就能复制，太方便了！

VideoEmbed

放点视频给你看。

组件使用方法

一是看开头提到的 MDC 文档，至关重要。二是看使用组件对应的源代码 (example.md)，也很重要。三是看我文章的调用方式，没有就慎用。

组件的不完美性

博客开发精力有限，常用的组件会仔细打磨，不常用的组件仅仅满足需求。

所以，少年，选择你的英雄吧！

README of micromark-extension-gfm-footnote ↩
文章末尾有特殊许可协议，还可从此处返回正文对插槽的讲解。 ↩

推荐订阅源

心记|Mood

在 Markdown 中使用组件

通过 CSS 类名控制样式

Markdown 语法组件

链接 ProseA

为更多站点匹配图标

代码 ProseCode

代码块 ProsePre

高亮和转换

为更多语言匹配图标

表格 ProseTable

脚注

数学公式

许可协议和侧栏插槽

乐谱渲染播放

自定义组件

Alert

Badge

Blur

CardList

Chat

Copy

自动推断语言

EmojiClock

FeedCard 和 FeedGroup

Folding

Key

LinkCard

Pic

Poetry

诗有诗的标题

Quote

Tab

Timeline

Tip

VideoEmbed

组件使用方法

组件的不完美性

链接 `ProseA`

代码 `ProseCode`

代码块 `ProsePre`

表格 `ProseTable`