920 字
5 分钟
Markdown 扩展与属性
属性字典（{} 大括号）在 Shirone 里有三种落点：指令/容器选项、代码围栏元信息、马克笔语义后缀。下面先演示三种都生效的写法，最后单独说明本仓实测未生效的那一类。
指令与容器选项
效果：容器/指令把自己的选项写在紧跟名字的 {} 里。
发布一篇草稿的三步
写完正文
把
draft置为false。本地预览
确认排版与图片无误。
提交推送
内容仓推送后自动触发站点重建。
源码
:::steps{title="发布一篇草稿的三步" start=1}1. **写完正文**
把 `draft` 置为 `false`。2. **本地预览**
确认排版与图片无误。3. **提交推送**
内容仓推送后自动触发站点重建。:::
:::grid{columns="3" aspect="16/9" fit="cover"}:::其它容器选项示例：
::github{repo="LyraVoid/Shirone"}
:::file-tree{title="目录结构" icon="simple"}
:::code-tree{title="组件封装" height="380px" entry="Button.svelte"}代码围栏元信息
效果：写在围栏首行、语言名之后，用来控制标题、行高亮、增删标记、折叠与行号。
export const siteConfig = { title: "KLucen 的启事录", themeColor: 345, language: "zh_CN",};源码
```typescript {2,4} title="src/config.ts" ins={4} showLineNumbersexport const siteConfig = { title: "KLucen 的启事录", themeColor: 345, language: "zh_CN",};```马克笔语义后缀
效果：==内容== 后面跟 {.取值}，切换高亮颜色的语义角色。
主题主色高亮、次级强调状态、警告与需要修正的条件、建议与辅助提示、三级调色板强调
源码
==主题主色高亮==
==次级强调状态=={.secondary}
==警告与需要修正的条件=={.error}
==建议与辅助提示=={.tip}
==三级调色板强调=={.tertiary}可选取值：primary（默认）、secondary、tertiary、error、tip。
原生 HTML 兜底
效果：Markdown 里可以直接嵌 HTML，class、id、style 都原样保留。
带自定义 class 的 span
居中的一段 HTML 文本
源码
<span class="probe-demo">带自定义 class 的 span</span>
<div style="text-align: center; opacity: .75;">居中的一段 HTML 文本</div>本仓实测：通用元素属性不生效
官方文档还描述了「给任意 Markdown 元素附加属性字典」的写法。在本站当前主题版本上逐条实测，这一类都不会生效，属性会原样留在页面上：
| 文档写法 | 本仓实测结果 |
|---|---|
## 标题 {#custom-id} | 锚点未生效，{#custom-id} 显示为标题的一部分 |
[链接](https://example.com){target="_blank"} | 链接正常，{target="_blank"} 显示为正文文字 |
`代码`{.custom-badge} | {.custom-badge} 显示为正文文字 |
- 列表项 {.some-class} | {.some-class} 显示为正文文字 |
:::tip[标题]{class="custom-box"} | 容器正常渲染，但 class 被丢弃（不报错） |
实测片段（下面这段在页面上会看到属性文字残留）：
## 标题甲 {#probe-h-space}
[链接甲](https://example.com){.probe-link-class}
`代码甲`{.probe-code-class}需要给元素加 class/id 时，本站可用的替代做法是直接写原生 HTML（见上一节），或改用主题自带的容器与围栏选项。
Markdown 扩展与属性
https://www.klucen.cn/posts/博客搭建/markdown-attributes/分享文章
生成精美分享图或复制链接，与更多人分享本文。
继续阅读
最后更新于 ，距今已过 301 天
部分内容可能已过时
评论