Yank Note 元素属性Element Attributes语法完全指南用{.class}与{style...}精确控制 Markdown 渲染【免费下载链接】ynA highly extensible Markdown editor featuring version control, AI Copilot, document annotations, mind maps, document encryption, executable code snippets, chart embedding, HTML applets, plugins, and macro replacement. Its integrated sidebar terminal makes working with AI faster and more convenient.项目地址: https://gitcode.com/GitHub_Trending/yn/yn本文基于仓库中的功能测试文档 test/md/attributes.md 展开并结合 Yank Note 渲染服务、样式表与导出链路的源码实现进行纵深解析。你将掌握元素属性语法如何为任意 Markdown 元素追加 class、style、idYank Note 内置的十余个 CSS 类对齐、边框、打印控制、暗色降亮、点击复制等分别由哪些源码规则支撑以及这些属性在打印、导出与预览中的真实行为边界。一、什么是元素属性语法Markdown 本身是内容与样式分离的轻量标记语言标准语法无法为单个段落、加粗文本或图片指定 CSS 类、内联样式或锚点 id。Yank Note 通过 markdown-it 插件生态中的markdown-it-attributes仓库依赖版本为^1.2.0见 package.json在渲染管线中引入了{.class} {style...} {#id}这类后缀属性语法。从源码看该插件在 Markdown 解析器构建阶段被注册为全局规则services/markdown.ts 中的markdown.use(MarkdownItAttributes)与MarkdownItSub、MarkdownItSup、MarkdownItMark等插件并列意味着所有文档默认启用该语法无需在 front-matter 中单独开关。同时该文件顶部确认了import MarkdownItAttributes from markdown-it-attributesservices/markdown.ts渲染前还会根据设置动态启用/禁用部分规则如 sup、sub、wiki-links 等而 attributes 规则始终生效。This paragraph has a custom class.{.custom-class}渲染结果等价于p classcustom-classThis paragraph has a custom class./p——这正是 attributes.md 中Basic Attributes一节的测试语义。二、基础属性class、style 与 id2.1 class 属性在元素行尾追加{.类名}可为块级元素或行内元素附加自定义类This paragraph has a custom class.{.custom-class} **Bold text with class**{.highlight}第一行为段落附加custom-class类第二行为加粗文本strong附加highlight类。2.2 style 属性使用{style...}注入内联 CSS直接作用于目标元素**Red colored text**{stylecolor: red;} *Blue italic text*{stylecolor: blue; font-size: 1.2em;}红色加粗文本color: red;蓝色斜体文本color: blue; font-size: 1.2em;内联样式优先级高于全局样式表适合需要一次性微调的场合多个 CSS 声明以分号分隔。2.3 id 属性使用{#id}为元素生成锚点#### Section with ID {#my-section}文档内可通过#my-section链接定位到该小节例如You can link to this section using #my-section.2.4 多重属性组合class、style、id 可同时书写属性间以空格分隔**Styled text**{.custom-class stylecolor: green; font-weight: bold; idstyled-element}该行会生成同时携带custom-class、内联样式与styled-elementid 的加粗元素。结合源码 services/markdown.ts 的注册方式可以推断属性解析发生在 markdown-it token 生成阶段因此对绝大多数标准元素段落、强调、标题、链接、图片、代码、引用、列表均生效。三、Yank Note 内置 CSS 类详解markdown-it-attributes只负责把属性挂到元素上真正让.text-center、.skip-print这些类产生视觉效果的是 Yank Note 内置样式。这些类集中定义于 styles/index.scss部分行为如打印、导出过滤则由渲染/导出服务实现。以下按功能分组逐一说明。3.1 显示模式控制.inline与.bgw{.inline} {.bgw}类名源码规则效果.inlinestyles/index.scssdisplay: inline !important;将元素强制改为行内显示常用于让图片与文本同行排列.bgwstyles/index.scssbackground-color: #fff !important;为透明背景图片如 PNG、SVG铺设白色底避免在暗色主题下看不清样式表同时定义了对称的.block { display: block !important; }styles/index.scss可作为.inline的反向控制。3.2 文本对齐This is centered text.{.text-center} This is right-aligned text.{.text-right} This is left-aligned text.{.text-left}对应源码规则styles/index.scss类名源码规则.text-lefttext-align: left;.text-centertext-align: center;.text-righttext-align: right;注意对齐类作用于所在块级容器因此对段落、标题、表格等均有效。3.3 边框{.with-border}.with-borderstyles/index.scss为元素添加 1px 边框与圆角.with-border { border: 1px solid var(--g-color-80); border-radius: var(--g-border-radius); }边框颜色使用 CSS 变量--g-color-80会随主题自动适配明暗背景。3.4 打印与导出控制这是本套内置类中行为由源码逻辑驱动而非纯 CSS的一组也是原文档测试用例最丰富的部分This content will not appear in print/PDF.{.skip-print} This content will not appear in HTML export.{.skip-export} Start a new page before this in print.{.new-page} Avoid breaking this across pages.{.avoid-page-break}.skip-print打印/PDF 时隐藏由 styles/index.scss 的media print媒体查询驱动media print { html { background: #fff !important; } .skip-print { display: none !important; } }即仅在打印介质含 PDF 导出下隐藏屏幕预览不受影响。.skip-exportHTML 导出时移除与.skip-print不同.skip-export不是在 CSS 层面隐藏而是在取 HTML 内容时直接从 DOM 树中删除节点。见 services/view.tsif (node.classList.contains(DOM_CLASS_NAME.SKIP_PRINT) || node.classList.contains(DOM_CLASS_NAME.SKIP_EXPORT)) { node.remove() return }该过滤逻辑位于getContentHtml的filterHtml内部会在遍历每个节点时递归处理同时触发VIEW_ON_GET_HTML_FILTER_NODE钩子允许插件扩展。测试用例 services/tests/view.ts 验证了这一点输入包含span classskip-exporthidden/span的 HTML 后getContentHtml()的返回结果不再包含skip-export。因此该属性可放心用于仅供屏幕查看、不希望进入复制/导出 HTML的批注或辅助内容。.new-page与.avoid-page-break打印分页控制分别对应 styles/index.scss.avoid-page-break { page-break-inside: avoid; } .new-page { page-break-before: always; }.new-page在打印/PDF 中强制该元素前分页.avoid-page-break防止元素如代码块、表格在页面间被截断。3.5 暗色主题降亮.reduce-brightnessThis image has reduced brightness in dark mode.{.reduce-brightness}实现位于 DefaultPreviewerRender.ce.vue 的暗色主题样式中.markdown-body { .reduce-brightness, img { transition: all .1s ease-in-out; filter: brightness(84%); :hover { filter: none; } } }从源码结构看该规则仅在暗色主题include dark-theme下生效图片默认降为 84% 亮度以缓解暗色背景下的刺眼感鼠标悬停时恢复原亮度。该特性主要面向大面积白色或高亮的图片避免暗色阅读时的视觉冲击。3.6 点击复制.copy-inner-textClick to copy this text.{.copy-inner-text}由插件 plugins/copy-text.ts 实现当Ctrl/Cmd 鼠标点击命中带.copy-inner-text类的元素时将该元素的innerText复制到剪贴板// copy content. if (target.classList.contains(copy-inner-text) hasCtrlCmd(e)) { copyText(target.innerText) return preventEvent() }同类插件还支持.copy-text读取data-text属性复制。这使点击复制代码/命令/邮箱的交互无需 JS 即可由 Markdown 声明式触发。四、属性在不同元素上的应用原文档的Attributes on Different Elements一节验证了属性语法在六类元素上的通用性以下全部继承并给出等价渲染说明。4.1 标题#### Custom Heading {.text-center stylecolor: purple;}标题同时居中并变为紫色可替代手动包裹 HTML。4.2 链接[Styled link](https://example.com){stylecolor: orange; text-decoration: none;}为链接注入内联样式覆盖全局链接样式。4.3 图片{stylewidth: 100px; border-radius: 8px;}图片尺寸与圆角通过内联样式控制。若只需控制尺寸Yank Note 另有更简洁的图片增强语法见 image-enhancements.md元素属性适合需要同时叠加多个样式或类的场景。4.4 行内代码highlighted code{stylebackground: yellow; color: black;}为code元素覆盖背景色与文字色。4.5 引用块引用块属性书写在引用结束后的下一行 This blockquote has a custom style. {styleborder-left-color: green;}4.6 列表- Item 1 - Item 2 - Item 3 {.custom-list}整组列表ul获得自定义类。五、实战建议与注意事项类名无前缀要求.custom-class这类自定义类名不会默认产生任何样式需配合自定义 CSSYank Note 支持自定义样式扩展才会生效而.text-center、.skip-print等内置类开箱即用。区分.skip-print与.skip-export前者是纯 CSS 的打印媒体隐藏复制/导出 HTML 时内容仍在后者会在 services/view.ts 的 HTML 过滤阶段被直接删除复制与导出均不可见。测试 services/tests/view.ts 也验证了skip-print节点在 HTML 过滤中的保留行为。属性与 front-matter 无关attributes 语法由 services/markdown.ts 全局注册任何文档都可直接使用无需在 YAML front-matter见 front-matter.md中声明。打印排版组合拳长文档导 PDF 时可用{.new-page}控制章节分页、{.avoid-page-break}防止表格/代码被切断、{.skip-print}隐藏屏幕辅助元素三者均为 styles/index.scss 中可直接引用的内置类。复制交互{.copy-inner-text}需要按住Ctrl/Cmd再点击纯点击不会触发复制避免与正常选中文本冲突。通过 attributes.md 的完整测试样例你可以在 Yank Note 中验证上述全部行为——这是一份可运行的语法清单也是理解Markdown 声明式样式控制的最佳入口。【免费下载链接】ynA highly extensible Markdown editor featuring version control, AI Copilot, document annotations, mind maps, document encryption, executable code snippets, chart embedding, HTML applets, plugins, and macro replacement. Its integrated sidebar terminal makes working with AI faster and more convenient.项目地址: https://gitcode.com/GitHub_Trending/yn/yn创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Yank Note 元素属性（Element Attributes）语法完全指南：用 `{.class}` 与 `{style=“...“}` 精确控制 Markdown 渲染
Yank Note 元素属性Element Attributes语法完全指南用{.class}与{style...}精确控制 Markdown 渲染【免费下载链接】ynA highly extensible Markdown editor featuring version control, AI Copilot, document annotations, mind maps, document encryption, executable code snippets, chart embedding, HTML applets, plugins, and macro replacement. Its integrated sidebar terminal makes working with AI faster and more convenient.项目地址: https://gitcode.com/GitHub_Trending/yn/yn本文基于仓库中的功能测试文档 test/md/attributes.md 展开并结合 Yank Note 渲染服务、样式表与导出链路的源码实现进行纵深解析。你将掌握元素属性语法如何为任意 Markdown 元素追加 class、style、idYank Note 内置的十余个 CSS 类对齐、边框、打印控制、暗色降亮、点击复制等分别由哪些源码规则支撑以及这些属性在打印、导出与预览中的真实行为边界。一、什么是元素属性语法Markdown 本身是内容与样式分离的轻量标记语言标准语法无法为单个段落、加粗文本或图片指定 CSS 类、内联样式或锚点 id。Yank Note 通过 markdown-it 插件生态中的markdown-it-attributes仓库依赖版本为^1.2.0见 package.json在渲染管线中引入了{.class} {style...} {#id}这类后缀属性语法。从源码看该插件在 Markdown 解析器构建阶段被注册为全局规则services/markdown.ts 中的markdown.use(MarkdownItAttributes)与MarkdownItSub、MarkdownItSup、MarkdownItMark等插件并列意味着所有文档默认启用该语法无需在 front-matter 中单独开关。同时该文件顶部确认了import MarkdownItAttributes from markdown-it-attributesservices/markdown.ts渲染前还会根据设置动态启用/禁用部分规则如 sup、sub、wiki-links 等而 attributes 规则始终生效。This paragraph has a custom class.{.custom-class}渲染结果等价于p classcustom-classThis paragraph has a custom class./p——这正是 attributes.md 中Basic Attributes一节的测试语义。二、基础属性class、style 与 id2.1 class 属性在元素行尾追加{.类名}可为块级元素或行内元素附加自定义类This paragraph has a custom class.{.custom-class} **Bold text with class**{.highlight}第一行为段落附加custom-class类第二行为加粗文本strong附加highlight类。2.2 style 属性使用{style...}注入内联 CSS直接作用于目标元素**Red colored text**{stylecolor: red;} *Blue italic text*{stylecolor: blue; font-size: 1.2em;}红色加粗文本color: red;蓝色斜体文本color: blue; font-size: 1.2em;内联样式优先级高于全局样式表适合需要一次性微调的场合多个 CSS 声明以分号分隔。2.3 id 属性使用{#id}为元素生成锚点#### Section with ID {#my-section}文档内可通过#my-section链接定位到该小节例如You can link to this section using #my-section.2.4 多重属性组合class、style、id 可同时书写属性间以空格分隔**Styled text**{.custom-class stylecolor: green; font-weight: bold; idstyled-element}该行会生成同时携带custom-class、内联样式与styled-elementid 的加粗元素。结合源码 services/markdown.ts 的注册方式可以推断属性解析发生在 markdown-it token 生成阶段因此对绝大多数标准元素段落、强调、标题、链接、图片、代码、引用、列表均生效。三、Yank Note 内置 CSS 类详解markdown-it-attributes只负责把属性挂到元素上真正让.text-center、.skip-print这些类产生视觉效果的是 Yank Note 内置样式。这些类集中定义于 styles/index.scss部分行为如打印、导出过滤则由渲染/导出服务实现。以下按功能分组逐一说明。3.1 显示模式控制.inline与.bgw{.inline} {.bgw}类名源码规则效果.inlinestyles/index.scssdisplay: inline !important;将元素强制改为行内显示常用于让图片与文本同行排列.bgwstyles/index.scssbackground-color: #fff !important;为透明背景图片如 PNG、SVG铺设白色底避免在暗色主题下看不清样式表同时定义了对称的.block { display: block !important; }styles/index.scss可作为.inline的反向控制。3.2 文本对齐This is centered text.{.text-center} This is right-aligned text.{.text-right} This is left-aligned text.{.text-left}对应源码规则styles/index.scss类名源码规则.text-lefttext-align: left;.text-centertext-align: center;.text-righttext-align: right;注意对齐类作用于所在块级容器因此对段落、标题、表格等均有效。3.3 边框{.with-border}.with-borderstyles/index.scss为元素添加 1px 边框与圆角.with-border { border: 1px solid var(--g-color-80); border-radius: var(--g-border-radius); }边框颜色使用 CSS 变量--g-color-80会随主题自动适配明暗背景。3.4 打印与导出控制这是本套内置类中行为由源码逻辑驱动而非纯 CSS的一组也是原文档测试用例最丰富的部分This content will not appear in print/PDF.{.skip-print} This content will not appear in HTML export.{.skip-export} Start a new page before this in print.{.new-page} Avoid breaking this across pages.{.avoid-page-break}.skip-print打印/PDF 时隐藏由 styles/index.scss 的media print媒体查询驱动media print { html { background: #fff !important; } .skip-print { display: none !important; } }即仅在打印介质含 PDF 导出下隐藏屏幕预览不受影响。.skip-exportHTML 导出时移除与.skip-print不同.skip-export不是在 CSS 层面隐藏而是在取 HTML 内容时直接从 DOM 树中删除节点。见 services/view.tsif (node.classList.contains(DOM_CLASS_NAME.SKIP_PRINT) || node.classList.contains(DOM_CLASS_NAME.SKIP_EXPORT)) { node.remove() return }该过滤逻辑位于getContentHtml的filterHtml内部会在遍历每个节点时递归处理同时触发VIEW_ON_GET_HTML_FILTER_NODE钩子允许插件扩展。测试用例 services/tests/view.ts 验证了这一点输入包含span classskip-exporthidden/span的 HTML 后getContentHtml()的返回结果不再包含skip-export。因此该属性可放心用于仅供屏幕查看、不希望进入复制/导出 HTML的批注或辅助内容。.new-page与.avoid-page-break打印分页控制分别对应 styles/index.scss.avoid-page-break { page-break-inside: avoid; } .new-page { page-break-before: always; }.new-page在打印/PDF 中强制该元素前分页.avoid-page-break防止元素如代码块、表格在页面间被截断。3.5 暗色主题降亮.reduce-brightnessThis image has reduced brightness in dark mode.{.reduce-brightness}实现位于 DefaultPreviewerRender.ce.vue 的暗色主题样式中.markdown-body { .reduce-brightness, img { transition: all .1s ease-in-out; filter: brightness(84%); :hover { filter: none; } } }从源码结构看该规则仅在暗色主题include dark-theme下生效图片默认降为 84% 亮度以缓解暗色背景下的刺眼感鼠标悬停时恢复原亮度。该特性主要面向大面积白色或高亮的图片避免暗色阅读时的视觉冲击。3.6 点击复制.copy-inner-textClick to copy this text.{.copy-inner-text}由插件 plugins/copy-text.ts 实现当Ctrl/Cmd 鼠标点击命中带.copy-inner-text类的元素时将该元素的innerText复制到剪贴板// copy content. if (target.classList.contains(copy-inner-text) hasCtrlCmd(e)) { copyText(target.innerText) return preventEvent() }同类插件还支持.copy-text读取data-text属性复制。这使点击复制代码/命令/邮箱的交互无需 JS 即可由 Markdown 声明式触发。四、属性在不同元素上的应用原文档的Attributes on Different Elements一节验证了属性语法在六类元素上的通用性以下全部继承并给出等价渲染说明。4.1 标题#### Custom Heading {.text-center stylecolor: purple;}标题同时居中并变为紫色可替代手动包裹 HTML。4.2 链接[Styled link](https://example.com){stylecolor: orange; text-decoration: none;}为链接注入内联样式覆盖全局链接样式。4.3 图片{stylewidth: 100px; border-radius: 8px;}图片尺寸与圆角通过内联样式控制。若只需控制尺寸Yank Note 另有更简洁的图片增强语法见 image-enhancements.md元素属性适合需要同时叠加多个样式或类的场景。4.4 行内代码highlighted code{stylebackground: yellow; color: black;}为code元素覆盖背景色与文字色。4.5 引用块引用块属性书写在引用结束后的下一行 This blockquote has a custom style. {styleborder-left-color: green;}4.6 列表- Item 1 - Item 2 - Item 3 {.custom-list}整组列表ul获得自定义类。五、实战建议与注意事项类名无前缀要求.custom-class这类自定义类名不会默认产生任何样式需配合自定义 CSSYank Note 支持自定义样式扩展才会生效而.text-center、.skip-print等内置类开箱即用。区分.skip-print与.skip-export前者是纯 CSS 的打印媒体隐藏复制/导出 HTML 时内容仍在后者会在 services/view.ts 的 HTML 过滤阶段被直接删除复制与导出均不可见。测试 services/tests/view.ts 也验证了skip-print节点在 HTML 过滤中的保留行为。属性与 front-matter 无关attributes 语法由 services/markdown.ts 全局注册任何文档都可直接使用无需在 YAML front-matter见 front-matter.md中声明。打印排版组合拳长文档导 PDF 时可用{.new-page}控制章节分页、{.avoid-page-break}防止表格/代码被切断、{.skip-print}隐藏屏幕辅助元素三者均为 styles/index.scss 中可直接引用的内置类。复制交互{.copy-inner-text}需要按住Ctrl/Cmd再点击纯点击不会触发复制避免与正常选中文本冲突。通过 attributes.md 的完整测试样例你可以在 Yank Note 中验证上述全部行为——这是一份可运行的语法清单也是理解Markdown 声明式样式控制的最佳入口。【免费下载链接】ynA highly extensible Markdown editor featuring version control, AI Copilot, document annotations, mind maps, document encryption, executable code snippets, chart embedding, HTML applets, plugins, and macro replacement. Its integrated sidebar terminal makes working with AI faster and more convenient.项目地址: https://gitcode.com/GitHub_Trending/yn/yn创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考