Nuemark 语法完全参考Nue 内容优先标记语言详解【免费下载链接】nueFastest way to build modern websites项目地址: https://gitcode.com/GitHub_Trending/nu/nueNuemark 是 Nue 项目中面向内容创作者的 Markdown 扩展格式它保留了标准 Markdown 的全部能力同时新增了区块sections、块blocks、标签tags、脚注与自定义组件等面向现代网页开发的语法结构。本文以仓库 packages/www/docs/nuemark-syntax.md 为骨架结合 packages/nuemark 包的真实源码与测试用例系统讲解 Nuemark 的每一种语法形态、其底层解析逻辑与最终 HTML 输出帮助你直接用 Markdown 写出结构清晰、组件化、可交互的内容页面。一、Nuemark 在项目中的位置Nuemark 是独立的核心包之一入口在 packages/nuemark/index.js。它对外暴露三个主要 APInuemark(content, opts)把一段 Markdown 字符串直接渲染成 HTMLparseNuemark(content)把文档解析为结构化的 ASTblocks、meta、headings、codeblocks等供程序化查询parseSize/renderIcon等工具函数。解析过程分为两段先由parseBlocks/parseDocument把文本拆成块级与行内 token再由renderBlocks/renderInline输出 HTML。整条管线不依赖任何运行时框架既可以在构建期渲染成静态页面也可以作为服务端 API 使用。如果你想先了解整体设计理念可阅读 Nuemark 介绍 与 项目 README。二、文件结构与 Front MatterNuemark 文件使用.md扩展名文件头部可以携带可选的 YAML front matter用于注入页面元数据--- title: My Page date: 2024-01-15 tags: [web, design] --- # Page content starts herefront matter 的元数据可以被布局、组件和构建系统读取。从源码实现看front matter 的提取与解析发生在 src/parse-document.js 的stripMeta函数中它扫描文件前几行找到成对的---定界符把中间内容拼接后交给nueyaml包的parseYAML解析因此所有标准 YAML 类型字符串、数字、布尔、数组、嵌套对象都受支持。stripMeta之后parseDocument还会自动做两件补充自动标题如果 front matter 没有title会从正文第一个h1或标签块内的标题提取标题自动描述如果 front matter 没有description会取第一个内容块的第一行作为描述。也就是说即使不写 front matter文档对象依然可以拿到meta.title与meta.description这对 SEO 和内容聚合非常友好。三、标准 Markdown 支持Nuemark 完整支持标准 Markdown 语法包括各级标题、段落、加粗/斜体/行内代码、无序/有序列表含嵌套、多行引用、链接、图片等# Heading 1 ## Heading 2 ### Heading 3 This is a paragraph with **bold** and *italic* text, plus inline code. - Unordered list item - Another item - Nested item 1. Ordered list 2. Second item Blockquote with multiple lines continues here [Link text](https://example.com) Alt text在块级解析src/parse-blocks.js中行首字符决定了块的类型#开头识别为标题、-/*/数字.开头识别为列表项、开头识别为引用、|...|识别为表格、识别为围栏代码块其余非空行按连续段落合并。引用与列表支持嵌套递归解析例如测试 test/block.test.js 验证了- item内再缩进- nested会生成多层ulli结构。另外代码解析器会跳过以开头的行和//开头的注释行这些内容不会进入输出。代码块与语法高亮围栏代码块通过语言标注启用高亮js function hello() { return Hello world }支持的常见语言包括 JavaScript、TypeScript、Python、HTML、CSS 等高亮由内置的 [Nueglow](https://link.gitcode.com/i/38444fd5df71280332ce4708b0a09eaf) 语法高亮引擎完成。从 [src/render-blocks.js](https://link.gitcode.com/i/dd3ada8164366ce38498805a0f122000) 的 renderCode 可以看到语言名会被存入 tag 的 name代码正文交给 glow(code, { language, numbered }) 处理因此你还可以 - 通过 numbered 数据项开启行号 - 通过 caption 或 _ 提供代码标题此时输出会包一层 figure figcaption - 为代码块指定 class用于定制样式。 ## 四、增强的格式化语法 在标准 Markdown 之外Nuemark 提供了一套紧凑的格式化标记其映射关系定义在 [src/parse-inline.js](https://link.gitcode.com/i/0501a45875e04569828684970540600a) 的 FORMATTING 表中 md **bold** or __bold__ → strongbold/strong *italic* or _italic_ → emitalic/em code → codecode/code ~strikethrough~ → sstrikethrough/s quoted text → qquoted text/q \|highlighted| → markhighlighted/mark特殊字符•bullet提供非语义的加粗•bold text• → bbold text/b格式化解析器有一些值得注意的细节均有测试覆盖***与___会生成emstrong嵌套格式化标记内部不允许首尾空白如果闭合标记后紧跟单词字符则不视为格式化避免误伤**x-bold**之类的英文连写反引号包裹的代码会转义、后再输出防止注入。五、标题与属性Nuemark 允许在标题末尾用花括号语法附加 id 和 class用于样式与锚点链接# Nuemark: Content-first web development { .heroic } ## Nuemark Introduction { #intro } ## How to use Nuemark { #howto.heroic }生成结果h1 classheroicNuemark: Content-first web development/h1 h2 idintroNuemark Introduction/h2 h2 idhowto classheroicHow to use Nuemark/h2行内解析器对{ #id.class }这种形态会生成is_attrtoken交给parseAttr提取 id 与 class见 src/parse-tag.js。如果渲染时传入heading_ids选项renderHeading还会为没有显式 id 的标题自动生成锚点 id规则见createHeadingId取前 32 个字符、去撇号、非单词字符转连字符、统一小写并包一个a href#id锚点链接。parseDocument返回的headings数组也会为每个标题补全id方便程序化生成目录TOC。六、变量插值用花括号嵌入动态值Current version: { version } Page title: { title } Author: { author }变量可以访问渲染上下文提供的数据opts.data以及 front matter 中定义的元数据。底层实现在 src/render-inline.js 的renderVariable它对表达式执行new Function(data, return data. expr)因此支持点号访问嵌套属性例如{ site.author.name }取值失败时静默返回空字符串不会中断渲染。需要说明的是花括号同时承担了“标题属性”语法{ #id.class }解析器会根据花括号内首字符是#/.还是普通变量名来区分两者。七、区块Sections与包装自动分节开启sections: true后Nuemark 会根据标题层级自动把内容包进语义化的section--- sections: true --- # Introduction First section content... ## Features Second section content... ## Technical Details Third section content...生成article section h1Introduction/h1 pFirst section content.../p /section section h2Features/h2 pSecond section content.../p /section section h2Technical Details/h2 pThird section content.../p /section /article分节算法在 src/parse-document.js 的sectionize中它寻找第一个h1–h3之间的标题或---分隔符作为切分依据若首个标题是h3则以每个h3为一节否则以h1/h2级别切分。完全没有标题或分隔符的文档不会产生 section。区块类名用数组形式为每个 section 依次指定 class--- sections: [hero, features, details] ---渲染时第 i 个 section 会带上classList[i]因此你可以对不同区块应用不同的背景、字号或网格样式。手动分节如果你希望完全控制切分点可以用三连短横线---显式分隔First section content... --- Second section content... --- Third section content...---在块级解析中被识别为is_separator注意它同时是水平线***/___等主题分隔符中的一种sectionize遇到分隔符必然开新节。区块包装通过section_wrapper可以给每个 section 内部再包一层容器便于控制内容的最大宽度--- section_wrapper: wrap ---生成section div classwrap !-- content here -- /div /section这对“通栏背景 居中内容”的版式非常实用section负责背景铺满.wrap通过max-width约束内容宽度从而实现更精细的设计控制。在源码中该选项名为content_wrapper见parseDocument的renderSections。八、块Blocks语法块语法用[.类名]把一段内容包进带指定 class 的div类名完全由你的设计系统决定[.note] ### Important Note This content is wrapped in a div with class note生成div classnote h3Important Note/h3 pThis content is wrapped in a div with class note/p /div任何类名都可以使用[.warning] → div classwarning.../div [.testimonial] → div classtestimonial.../div [.pricing-tier] → div classpricing-tier.../div [.photo-gallery] → div classphoto-gallery.../div实现上[.name]被解析为名为block的内置标签见 src/render-tag.js缩进的内容递归解析为子块attr.popover存在时甚至会输出dialog元素。自动嵌套 div块内部会根据第一个出现的标题级别自动分组生成嵌套 div。下面的例子中首个标题是h3所以每个h3都会开启一个新的嵌套 div[.features] ### Feature One First feature description ### Feature Two Second feature descriptiondiv classfeatures div h3Feature One/h3 pFirst feature description/p /div div h3Feature Two/h3 pSecond feature description/p /div /div也可以使用三连短横线---显式创建嵌套 div[.testimonials] Great product! - Sarah Chen --- Changed our workflow - Michael Parkdiv classtestimonials div pGreat product!/p p- Sarah Chen/p /div div pChanged our workflow/p p- Michael Park/p /div /div这正是sectionize在块级内容上的复用block标签渲染时对子块调用sectionize有多个分组时每组包一个div实现见 src/render-tag.js 的block()。常见模式类名随设计系统而定以下是两个常用模式网格布局——响应式多列[.grid] ### Feature One First feature description ### Feature Two Second feature description ### Feature Three Third feature description堆叠布局——纵向排列、间距一致[.stack] ### Design Focus on systematic design ### Engineering Built for performance ### Content Pure content structure这些模式之所以成立是因为你的 CSS 定义了.grid、.stack的行为Nuemark 只负责结构表现层完全交给设计系统内容里不会出现任何 div 堆叠或内联样式。嵌套块块可以无限嵌套自由组合[.feature] ## Main Feature Feature description [.grid] ### Sub-feature A Description A ### Sub-feature B Description B九、标签Tag语法标签tag用方括号扩展出富组件能力是 Nuemark 组件化的核心[tagname options]选项格式命名属性[image srcphoto.jpg altDescription loadingeager]纯值作为默认参数[image photo.jpg]**嵌套 YAML**把标签体作为 YAML 数据块解析源码中isYAML会识别key: value或列表形态[image] src: photo.jpg alt: Description caption: Photo captionID 与类名[image#hero.responsive photo.jpg]解析逻辑在 src/parse-tag.js 的parseTag中值得注意的规则属性值支持单引号/双引号valueGetter会把带空格的字符串保护起来id、class、hidden、disabled、popover等白名单属性ATTR以及data-*前缀的键会写入 HTML 属性其余键进入data组件数据纯值会存入_键即“默认参数”布尔值loop、muted这类无值的键等价于true字符串true/false/数字会自动转换类型parseValue以:开头的键如:rowspricing会被解析为数据绑定渲染时从全局数据中取值extractData。嵌套内容标签可以携带嵌套内容其中依然可以使用 Markdown[note] This is nested content that becomes part of the component. Markdown **works** here.嵌套内容与嵌套 YAML 的区别在于标签体若整体是合法的key: valueYAML 则作为数据否则作为 Markdown 内容递归解析见 src/parse-blocks.js 的processNestedBlocks。测试 test/block.test.js 对这两种形态都有断言。十、内置标签图片基本用法[image photo.jpg]带说明文字支持 Markdown[image photo.jpg] This is the image caption with **markdown** support响应式图片small/large分别用于移动端与桌面端[image] small: mobile.jpg large: desktop.jpg alt: Responsive image图片链接[image photo.jpg] href: /gallery/ caption: Click to view gallery从源码src/render-tag.js 的image()可以看到实现细节loading默认lazy提供了small时会输出picture 两个source分别带max-width/min-width媒体查询断点默认750px可用offset覆盖并补img兜底有href时整张图包进a有caption或嵌套内容时补figcaption最终始终包在figure中size400x300之类的尺寸会被parseSize解析为width/height属性帮助浏览器预留布局空间、避免 CLS。视频基本用法[video intro.mp4]带选项[video] src: intro.mp4 poster: thumbnail.jpg autoplay: true muted: true loop: truevideo()会依据文件扩展名推断 MIME 类型mp4/webm/mov 等映射表见MIME常量并透传autoplay controls loop muted poster preload src width这些原生属性嵌套内容可作为video的 fallback 文本。表格增强表格语法[table] Name | Email | Role Alice | aliceexample.com | Developer Bob | bobexample.com | Designer带标题、表头与表尾[table captionTeam Members] Name | Email | Role ------ Alice | aliceexample.com | Developer Bob | bobexample.com | Designer ------ Total: 2 team membersrenderTable会自动识别------分隔出的表头thead与表尾tfoot并处理单元格合并列数不足时自动colspancaption输出caption单元格内支持行内 Markdown。配合数据绑定你还可以用[table :rowsusers]直接渲染站点数据里的表格。内联 SVG把 SVG 图标内联进句子Continue reading [svg /icons/arrow-right.svg]svg()通过readIcon读取.svg文件路径省略扩展名时会自动补.svg并把根元素加上classicon后内联输出因此图标可以直接被 CSS 着色与缩放。另一个icon标签则支持 symbol 引用方式输出svg classicon icon-xxxuse href#xxx//svg。十一、手风琴Accordions手风琴非常适合 FAQ 或任何需要渐进式披露的内容[accordion] ## First Question Answer to the first question ## Second Question Answer to the second question ## Third Question Answer to the third question它生成使用原生details/summary的语义化 HTML无需任何 JavaScriptdiv details summaryFirst Question/summary pAnswer to the first question/p /details details summarySecond Question/summary pAnswer to the second question/p /details details summaryThird Question/summary pAnswer to the third question/p /details /div与块语法相同手风琴按遇到的第一个标题级别或---分隔符分组内部同样复用sectionize。手风琴选项name—— 给一组手风琴命名使同一时刻只展开一个[accordion namefaq]共享相同name的手风琴会自动联动打开一个会关闭组内其他项name会原样输出到details的 name 属性上。open—— 设置初始展开状态[accordion open] # First item open by default [accordion open2] # Second item open by default源码中open true i 0 || i open决定了第几项默认展开其中i是从 0 开始的序号。十二、脚注标准脚注语法This needs clarification[^1]. [^1]: This is the footnote content.命名脚注[Separation of Concerns][^soc] is fundamental. [^soc]: Keeping HTML, CSS, and JavaScript separate.脚注引用会渲染为带roledoc-noteref的上标序号文档末尾自动生成带roledoc-endnotes的ol列表实现见 src/parse-document.js 的renderFootnotes语义化与无障碍标准保持一致。你还可以用[define]标签配合带 id 的标题来定义术语生成dl描述列表并自动把这些 id 注册为可被[^term1]引用的脚注锚点[define] ## Term One { #term1 } Definition of term one ## Term Two { #term2 } Definition of term two十三、自定义组件Nuemark 的扩展性体现在开发者可以在 HTML 文件中定义自定义标签内容作者只需用自然语法调用。组件文件以!doctype html lib开头!doctype html lib !-- Button component -- a :isbutton classbutton { class } href{ href } { label || _ } /a !-- Card component -- div :iscard classcard { type } h3{ title }/h3 slot/ footer :iffooter{ footer }/footer /div在 Markdown 中使用[button Get Started href/docs/] [card typefeature] title: Key Feature footer: Learn more This is the card content with full **Markdown** support.组件属性组件标签在渲染时接收以下数据来源命名属性[card typefeature]中的type未命名属性通过_访问例如[button Get Started]中的文本Get Started嵌套 Markdown 作为 HTML通过slot/标签注入内容保持完整的 Markdown 渲染页面元数据来自 front matter站点数据通过 .yaml 文件提供可配合:keydata.path语法绑定全局数据。当某个标签没有对应的内置/自定义渲染函数时Nuemark 不会报错而是输出“客户端存根”见 src/render-tag.js 的renderIsland生成tagname nuetagname元素并内联一段application/json数据脚本交由客户端组件挂载从而实现 SSR 与交互组件islands的平滑过渡。十四、参考文件索引语法文档原文packages/www/docs/nuemark-syntax.mdNuemark 包入口与 APIpackages/nuemark/index.js块级解析packages/nuemark/src/parse-blocks.js文档级解析front matter、分节、脚注packages/nuemark/src/parse-document.js行内解析格式化、变量、链接、行内标签packages/nuemark/src/parse-inline.js块级渲染packages/nuemark/src/render-blocks.js内置标签渲染image/video/table/svg/accordion 等packages/nuemark/src/render-tag.js标签解析选项格式、数据绑定packages/nuemark/src/parse-tag.js测试用例packages/nuemark/test/block.test.js、packages/nuemark/test/tag.test.js、packages/nuemark/test/inline.test.js相关文档Nuemark 介绍、Nueglow 语法高亮、HTML 文件类型【免费下载链接】nueFastest way to build modern websites项目地址: https://gitcode.com/GitHub_Trending/nu/nue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Nuemark 语法完全参考：Nue 内容优先标记语言详解
Nuemark 语法完全参考Nue 内容优先标记语言详解【免费下载链接】nueFastest way to build modern websites项目地址: https://gitcode.com/GitHub_Trending/nu/nueNuemark 是 Nue 项目中面向内容创作者的 Markdown 扩展格式它保留了标准 Markdown 的全部能力同时新增了区块sections、块blocks、标签tags、脚注与自定义组件等面向现代网页开发的语法结构。本文以仓库 packages/www/docs/nuemark-syntax.md 为骨架结合 packages/nuemark 包的真实源码与测试用例系统讲解 Nuemark 的每一种语法形态、其底层解析逻辑与最终 HTML 输出帮助你直接用 Markdown 写出结构清晰、组件化、可交互的内容页面。一、Nuemark 在项目中的位置Nuemark 是独立的核心包之一入口在 packages/nuemark/index.js。它对外暴露三个主要 APInuemark(content, opts)把一段 Markdown 字符串直接渲染成 HTMLparseNuemark(content)把文档解析为结构化的 ASTblocks、meta、headings、codeblocks等供程序化查询parseSize/renderIcon等工具函数。解析过程分为两段先由parseBlocks/parseDocument把文本拆成块级与行内 token再由renderBlocks/renderInline输出 HTML。整条管线不依赖任何运行时框架既可以在构建期渲染成静态页面也可以作为服务端 API 使用。如果你想先了解整体设计理念可阅读 Nuemark 介绍 与 项目 README。二、文件结构与 Front MatterNuemark 文件使用.md扩展名文件头部可以携带可选的 YAML front matter用于注入页面元数据--- title: My Page date: 2024-01-15 tags: [web, design] --- # Page content starts herefront matter 的元数据可以被布局、组件和构建系统读取。从源码实现看front matter 的提取与解析发生在 src/parse-document.js 的stripMeta函数中它扫描文件前几行找到成对的---定界符把中间内容拼接后交给nueyaml包的parseYAML解析因此所有标准 YAML 类型字符串、数字、布尔、数组、嵌套对象都受支持。stripMeta之后parseDocument还会自动做两件补充自动标题如果 front matter 没有title会从正文第一个h1或标签块内的标题提取标题自动描述如果 front matter 没有description会取第一个内容块的第一行作为描述。也就是说即使不写 front matter文档对象依然可以拿到meta.title与meta.description这对 SEO 和内容聚合非常友好。三、标准 Markdown 支持Nuemark 完整支持标准 Markdown 语法包括各级标题、段落、加粗/斜体/行内代码、无序/有序列表含嵌套、多行引用、链接、图片等# Heading 1 ## Heading 2 ### Heading 3 This is a paragraph with **bold** and *italic* text, plus inline code. - Unordered list item - Another item - Nested item 1. Ordered list 2. Second item Blockquote with multiple lines continues here [Link text](https://example.com) Alt text在块级解析src/parse-blocks.js中行首字符决定了块的类型#开头识别为标题、-/*/数字.开头识别为列表项、开头识别为引用、|...|识别为表格、识别为围栏代码块其余非空行按连续段落合并。引用与列表支持嵌套递归解析例如测试 test/block.test.js 验证了- item内再缩进- nested会生成多层ulli结构。另外代码解析器会跳过以开头的行和//开头的注释行这些内容不会进入输出。代码块与语法高亮围栏代码块通过语言标注启用高亮js function hello() { return Hello world }支持的常见语言包括 JavaScript、TypeScript、Python、HTML、CSS 等高亮由内置的 [Nueglow](https://link.gitcode.com/i/38444fd5df71280332ce4708b0a09eaf) 语法高亮引擎完成。从 [src/render-blocks.js](https://link.gitcode.com/i/dd3ada8164366ce38498805a0f122000) 的 renderCode 可以看到语言名会被存入 tag 的 name代码正文交给 glow(code, { language, numbered }) 处理因此你还可以 - 通过 numbered 数据项开启行号 - 通过 caption 或 _ 提供代码标题此时输出会包一层 figure figcaption - 为代码块指定 class用于定制样式。 ## 四、增强的格式化语法 在标准 Markdown 之外Nuemark 提供了一套紧凑的格式化标记其映射关系定义在 [src/parse-inline.js](https://link.gitcode.com/i/0501a45875e04569828684970540600a) 的 FORMATTING 表中 md **bold** or __bold__ → strongbold/strong *italic* or _italic_ → emitalic/em code → codecode/code ~strikethrough~ → sstrikethrough/s quoted text → qquoted text/q \|highlighted| → markhighlighted/mark特殊字符•bullet提供非语义的加粗•bold text• → bbold text/b格式化解析器有一些值得注意的细节均有测试覆盖***与___会生成emstrong嵌套格式化标记内部不允许首尾空白如果闭合标记后紧跟单词字符则不视为格式化避免误伤**x-bold**之类的英文连写反引号包裹的代码会转义、后再输出防止注入。五、标题与属性Nuemark 允许在标题末尾用花括号语法附加 id 和 class用于样式与锚点链接# Nuemark: Content-first web development { .heroic } ## Nuemark Introduction { #intro } ## How to use Nuemark { #howto.heroic }生成结果h1 classheroicNuemark: Content-first web development/h1 h2 idintroNuemark Introduction/h2 h2 idhowto classheroicHow to use Nuemark/h2行内解析器对{ #id.class }这种形态会生成is_attrtoken交给parseAttr提取 id 与 class见 src/parse-tag.js。如果渲染时传入heading_ids选项renderHeading还会为没有显式 id 的标题自动生成锚点 id规则见createHeadingId取前 32 个字符、去撇号、非单词字符转连字符、统一小写并包一个a href#id锚点链接。parseDocument返回的headings数组也会为每个标题补全id方便程序化生成目录TOC。六、变量插值用花括号嵌入动态值Current version: { version } Page title: { title } Author: { author }变量可以访问渲染上下文提供的数据opts.data以及 front matter 中定义的元数据。底层实现在 src/render-inline.js 的renderVariable它对表达式执行new Function(data, return data. expr)因此支持点号访问嵌套属性例如{ site.author.name }取值失败时静默返回空字符串不会中断渲染。需要说明的是花括号同时承担了“标题属性”语法{ #id.class }解析器会根据花括号内首字符是#/.还是普通变量名来区分两者。七、区块Sections与包装自动分节开启sections: true后Nuemark 会根据标题层级自动把内容包进语义化的section--- sections: true --- # Introduction First section content... ## Features Second section content... ## Technical Details Third section content...生成article section h1Introduction/h1 pFirst section content.../p /section section h2Features/h2 pSecond section content.../p /section section h2Technical Details/h2 pThird section content.../p /section /article分节算法在 src/parse-document.js 的sectionize中它寻找第一个h1–h3之间的标题或---分隔符作为切分依据若首个标题是h3则以每个h3为一节否则以h1/h2级别切分。完全没有标题或分隔符的文档不会产生 section。区块类名用数组形式为每个 section 依次指定 class--- sections: [hero, features, details] ---渲染时第 i 个 section 会带上classList[i]因此你可以对不同区块应用不同的背景、字号或网格样式。手动分节如果你希望完全控制切分点可以用三连短横线---显式分隔First section content... --- Second section content... --- Third section content...---在块级解析中被识别为is_separator注意它同时是水平线***/___等主题分隔符中的一种sectionize遇到分隔符必然开新节。区块包装通过section_wrapper可以给每个 section 内部再包一层容器便于控制内容的最大宽度--- section_wrapper: wrap ---生成section div classwrap !-- content here -- /div /section这对“通栏背景 居中内容”的版式非常实用section负责背景铺满.wrap通过max-width约束内容宽度从而实现更精细的设计控制。在源码中该选项名为content_wrapper见parseDocument的renderSections。八、块Blocks语法块语法用[.类名]把一段内容包进带指定 class 的div类名完全由你的设计系统决定[.note] ### Important Note This content is wrapped in a div with class note生成div classnote h3Important Note/h3 pThis content is wrapped in a div with class note/p /div任何类名都可以使用[.warning] → div classwarning.../div [.testimonial] → div classtestimonial.../div [.pricing-tier] → div classpricing-tier.../div [.photo-gallery] → div classphoto-gallery.../div实现上[.name]被解析为名为block的内置标签见 src/render-tag.js缩进的内容递归解析为子块attr.popover存在时甚至会输出dialog元素。自动嵌套 div块内部会根据第一个出现的标题级别自动分组生成嵌套 div。下面的例子中首个标题是h3所以每个h3都会开启一个新的嵌套 div[.features] ### Feature One First feature description ### Feature Two Second feature descriptiondiv classfeatures div h3Feature One/h3 pFirst feature description/p /div div h3Feature Two/h3 pSecond feature description/p /div /div也可以使用三连短横线---显式创建嵌套 div[.testimonials] Great product! - Sarah Chen --- Changed our workflow - Michael Parkdiv classtestimonials div pGreat product!/p p- Sarah Chen/p /div div pChanged our workflow/p p- Michael Park/p /div /div这正是sectionize在块级内容上的复用block标签渲染时对子块调用sectionize有多个分组时每组包一个div实现见 src/render-tag.js 的block()。常见模式类名随设计系统而定以下是两个常用模式网格布局——响应式多列[.grid] ### Feature One First feature description ### Feature Two Second feature description ### Feature Three Third feature description堆叠布局——纵向排列、间距一致[.stack] ### Design Focus on systematic design ### Engineering Built for performance ### Content Pure content structure这些模式之所以成立是因为你的 CSS 定义了.grid、.stack的行为Nuemark 只负责结构表现层完全交给设计系统内容里不会出现任何 div 堆叠或内联样式。嵌套块块可以无限嵌套自由组合[.feature] ## Main Feature Feature description [.grid] ### Sub-feature A Description A ### Sub-feature B Description B九、标签Tag语法标签tag用方括号扩展出富组件能力是 Nuemark 组件化的核心[tagname options]选项格式命名属性[image srcphoto.jpg altDescription loadingeager]纯值作为默认参数[image photo.jpg]**嵌套 YAML**把标签体作为 YAML 数据块解析源码中isYAML会识别key: value或列表形态[image] src: photo.jpg alt: Description caption: Photo captionID 与类名[image#hero.responsive photo.jpg]解析逻辑在 src/parse-tag.js 的parseTag中值得注意的规则属性值支持单引号/双引号valueGetter会把带空格的字符串保护起来id、class、hidden、disabled、popover等白名单属性ATTR以及data-*前缀的键会写入 HTML 属性其余键进入data组件数据纯值会存入_键即“默认参数”布尔值loop、muted这类无值的键等价于true字符串true/false/数字会自动转换类型parseValue以:开头的键如:rowspricing会被解析为数据绑定渲染时从全局数据中取值extractData。嵌套内容标签可以携带嵌套内容其中依然可以使用 Markdown[note] This is nested content that becomes part of the component. Markdown **works** here.嵌套内容与嵌套 YAML 的区别在于标签体若整体是合法的key: valueYAML 则作为数据否则作为 Markdown 内容递归解析见 src/parse-blocks.js 的processNestedBlocks。测试 test/block.test.js 对这两种形态都有断言。十、内置标签图片基本用法[image photo.jpg]带说明文字支持 Markdown[image photo.jpg] This is the image caption with **markdown** support响应式图片small/large分别用于移动端与桌面端[image] small: mobile.jpg large: desktop.jpg alt: Responsive image图片链接[image photo.jpg] href: /gallery/ caption: Click to view gallery从源码src/render-tag.js 的image()可以看到实现细节loading默认lazy提供了small时会输出picture 两个source分别带max-width/min-width媒体查询断点默认750px可用offset覆盖并补img兜底有href时整张图包进a有caption或嵌套内容时补figcaption最终始终包在figure中size400x300之类的尺寸会被parseSize解析为width/height属性帮助浏览器预留布局空间、避免 CLS。视频基本用法[video intro.mp4]带选项[video] src: intro.mp4 poster: thumbnail.jpg autoplay: true muted: true loop: truevideo()会依据文件扩展名推断 MIME 类型mp4/webm/mov 等映射表见MIME常量并透传autoplay controls loop muted poster preload src width这些原生属性嵌套内容可作为video的 fallback 文本。表格增强表格语法[table] Name | Email | Role Alice | aliceexample.com | Developer Bob | bobexample.com | Designer带标题、表头与表尾[table captionTeam Members] Name | Email | Role ------ Alice | aliceexample.com | Developer Bob | bobexample.com | Designer ------ Total: 2 team membersrenderTable会自动识别------分隔出的表头thead与表尾tfoot并处理单元格合并列数不足时自动colspancaption输出caption单元格内支持行内 Markdown。配合数据绑定你还可以用[table :rowsusers]直接渲染站点数据里的表格。内联 SVG把 SVG 图标内联进句子Continue reading [svg /icons/arrow-right.svg]svg()通过readIcon读取.svg文件路径省略扩展名时会自动补.svg并把根元素加上classicon后内联输出因此图标可以直接被 CSS 着色与缩放。另一个icon标签则支持 symbol 引用方式输出svg classicon icon-xxxuse href#xxx//svg。十一、手风琴Accordions手风琴非常适合 FAQ 或任何需要渐进式披露的内容[accordion] ## First Question Answer to the first question ## Second Question Answer to the second question ## Third Question Answer to the third question它生成使用原生details/summary的语义化 HTML无需任何 JavaScriptdiv details summaryFirst Question/summary pAnswer to the first question/p /details details summarySecond Question/summary pAnswer to the second question/p /details details summaryThird Question/summary pAnswer to the third question/p /details /div与块语法相同手风琴按遇到的第一个标题级别或---分隔符分组内部同样复用sectionize。手风琴选项name—— 给一组手风琴命名使同一时刻只展开一个[accordion namefaq]共享相同name的手风琴会自动联动打开一个会关闭组内其他项name会原样输出到details的 name 属性上。open—— 设置初始展开状态[accordion open] # First item open by default [accordion open2] # Second item open by default源码中open true i 0 || i open决定了第几项默认展开其中i是从 0 开始的序号。十二、脚注标准脚注语法This needs clarification[^1]. [^1]: This is the footnote content.命名脚注[Separation of Concerns][^soc] is fundamental. [^soc]: Keeping HTML, CSS, and JavaScript separate.脚注引用会渲染为带roledoc-noteref的上标序号文档末尾自动生成带roledoc-endnotes的ol列表实现见 src/parse-document.js 的renderFootnotes语义化与无障碍标准保持一致。你还可以用[define]标签配合带 id 的标题来定义术语生成dl描述列表并自动把这些 id 注册为可被[^term1]引用的脚注锚点[define] ## Term One { #term1 } Definition of term one ## Term Two { #term2 } Definition of term two十三、自定义组件Nuemark 的扩展性体现在开发者可以在 HTML 文件中定义自定义标签内容作者只需用自然语法调用。组件文件以!doctype html lib开头!doctype html lib !-- Button component -- a :isbutton classbutton { class } href{ href } { label || _ } /a !-- Card component -- div :iscard classcard { type } h3{ title }/h3 slot/ footer :iffooter{ footer }/footer /div在 Markdown 中使用[button Get Started href/docs/] [card typefeature] title: Key Feature footer: Learn more This is the card content with full **Markdown** support.组件属性组件标签在渲染时接收以下数据来源命名属性[card typefeature]中的type未命名属性通过_访问例如[button Get Started]中的文本Get Started嵌套 Markdown 作为 HTML通过slot/标签注入内容保持完整的 Markdown 渲染页面元数据来自 front matter站点数据通过 .yaml 文件提供可配合:keydata.path语法绑定全局数据。当某个标签没有对应的内置/自定义渲染函数时Nuemark 不会报错而是输出“客户端存根”见 src/render-tag.js 的renderIsland生成tagname nuetagname元素并内联一段application/json数据脚本交由客户端组件挂载从而实现 SSR 与交互组件islands的平滑过渡。十四、参考文件索引语法文档原文packages/www/docs/nuemark-syntax.mdNuemark 包入口与 APIpackages/nuemark/index.js块级解析packages/nuemark/src/parse-blocks.js文档级解析front matter、分节、脚注packages/nuemark/src/parse-document.js行内解析格式化、变量、链接、行内标签packages/nuemark/src/parse-inline.js块级渲染packages/nuemark/src/render-blocks.js内置标签渲染image/video/table/svg/accordion 等packages/nuemark/src/render-tag.js标签解析选项格式、数据绑定packages/nuemark/src/parse-tag.js测试用例packages/nuemark/test/block.test.js、packages/nuemark/test/tag.test.js、packages/nuemark/test/inline.test.js相关文档Nuemark 介绍、Nueglow 语法高亮、HTML 文件类型【免费下载链接】nueFastest way to build modern websites项目地址: https://gitcode.com/GitHub_Trending/nu/nue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考