Custom section【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculumMarkdown links are desired in most cases这是规则鼓励的标准写法跳转到页面内标题锚点如 #custom-section时使用 [链接文本](#锚点名)。课程文档的 Lesson overview、Knowledge check 等小节中的页面内链接都应遵循此格式。 ### 2. 行内代码块中的锚点被忽略 markdown a href#custom-sectionAnchors inside an inline code block are ignored/a当整个a标签被反引号包裹作为行内代码展示时规则会将其视为代码示例而非真实链接因此不触发错误。3. 围栏代码块中的锚点被忽略html a href#custom-sectionAnchors inside fenced code blocks are ignored/a 在 fenced code block 围栏代码块内部出现的a标签同样属于代码示例规则通过 markdownit 解析出的fence类型 token 区间自动跳过详见下文实现分析。4. CodePen 嵌入中的锚点被豁免p classcodepen>const fencesLineRanges params.parsers.markdownit.tokens .filter((token) token.type fence) .map((token) token.map); const codepenLineRanges params.lines.reduce((lineRanges, currentLine, index) { const lineNumber index 1; const isCodepenOpeningTag currentLine.includes(classcodepen); const isCodepenClosingTag currentLine.trim().startsWith(/p) lineRanges.at(-1)?.length 2; if (isCodepenOpeningTag) { lineRanges.push([lineNumber]); } else if (isCodepenClosingTag) { lineRanges.at(-1).push(lineNumber); } return lineRanges; }, []);围栏代码块区间从 markdownit token 流中筛出type fence的 token取其map起始行、结束行作为忽略区间。CodePen 嵌入区间逐行扫描遇到包含classcodepen的行记录起始行号遇到以/p开头的行补全结束行号lineRanges.at(-1)?.length 2保证只有已开始未结束的区间才会被闭合。这正是valid_anchors.md中p classcodepen ...与/p配对被完整放行的原因。随后通过isWithinIgnoredLineRange统一判断某一行是否落在任一忽略区间内const isWithinIgnoredLineRange (lineNumber) { return [...fencesLineRanges, ...codepenLineRanges].some( (range) range[0] lineNumber lineNumber range[1] ); };注意这里是开区间而非即起始行与结束行本身不被豁免只有区间内部的行才跳过——这与valid_anchors.md中锚点位于p classcodepen和/p之间的行为一致。第二步用正则提取可判定的锚点const anchorsWithHrefRegex /(?!)a\s[^]*href[^].?\/a(?!)/g;该正则使用负向后行断言(?!)与负向前行断言(?!)从文本层面直接排除了被反引号包裹的锚点对应valid_anchors.md中的行内代码示例同时要求锚点必须携带href属性且同一行内的多个锚点均可被逐一匹配。随后借助两个辅助函数提取修复所需信息function extractHref(link) { // https://regexr.com/7v3ci to test this regex return link.match(/(?href(|))[^]/)?.[0]; } function extractLinkText(link) { const textStart link.indexOf() 1; const textEnd link.lastIndexOf(); return link.substring(textStart, textEnd); }extractHref通过 lookbehind 匹配href...或href...中的 URLextractLinkText取首尾尖括号之间的链接文本。源码注释还给出了两个正则的在线调试地址regexr.com便于开发者逐字符验证匹配行为。第三步触发 onError 并提供自动修复anchorsToFlag.forEach((anchor) { const replacementText ${anchor.text}; onError({ lineNumber: anchor.lineNumber, detail: \n Expected: ${replacementText}\n Actual: ${anchor.original}\n, fixInfo: { lineNumber: anchor.lineNumber, editColumn: anchor.columnNumber, deleteCount: anchor.length, insertText: replacementText, }, }); });每条违规都会生成一个错误报告其中Expected展示改写后的 Markdown 链接Actual展示原始锚点fixInfo记录列号、删除长度与插入文本使规则支持一键自动修复。修复结果就是把a hrefURL文本/a原样转换为文本。违规样例对照什么情况会被标记与valid_anchors.md相对的 anchors_in_markdown.md 集中构造了五类应当被标记的写法测试断言精确断言了每条错误的输出违规写法期望修复结果违规原因a href#custom-sectionLink should flag.../a[Link should flag...](#custom-section)页面内锚点使用了 HTML 锚点a href#custom-sectionWill flag/a同行多锚点[Will flag](#custom-section)同一行内多个锚点均被逐一标记a hrefhttps://codepen.io/TheOdinProjectExamplesTheOdinProjectExamples/a[TheOdinProjectExamples](https://codepen.io/TheOdinProjectExamples)位于p.codepen之外不属于嵌入豁免区域a classknowledge-check-link href#knowledge-checkFlags knowledge check anchors/a[Flags knowledge check anchors](#knowledge-check)Knowledge check 锚点必须去掉 class 改写成 Markdown 链接对应的修复基准文件 fixed_anchors_in_markdown.md 展示了执行自动修复后的标准结果测试通过fixLintErrors工具将修复输出与该文件逐字节比对确保修复行为稳定可复现。豁免与例外官方文档定义的边界规则文档 markdownlint/docs/TOP007.md 明确列出了仅有的两类豁免代码块内的任意锚点——无论是围栏代码块fenced code block还是行内代码inline code其中的a都属于代码示例CodePen 嵌入中的锚点——p classcodepen包裹的锚点无需转换。文档同时强调旧的knowledge-check-linkclass 已不再需要Knowledge check 链接应直接写成[Text](#link-here)形式而无须保留 class 属性。设计动机为什么锚点必须改写成 Markdown 链接规则文档的 Rationale 部分解释了这一强约束背后的三个技术原因让链接规则能够覆盖锚点markdownlint 无法用链接类规则如 TOP001 描述性链接文本检查 HTML 锚点将链接改写成 Markdown 形式后此类规则才能作用于它修复强调标记的漏检markdown 解析器在没有空行的场景下对 HTML 元素的分词方式特殊关联 TOP005 多行 HTML 标签周围空行导致锚点文本中的_下划线强调标记本应写作*无法触发错误改写成 Markdown 链接后可被正确校验安全属性的自动注入HTML 锚点除非手动添加否则不会自动带target_blank或relnoopener noreferrer而课程 Web 应用会将 Markdown 链接自动转换成同时携带这两个属性的锚点改写成 Markdown 链接即自动获得安全外链行为。本地验证运行 lint 与测试仓库根目录的 package.json 提供了三个相关脚本npm install # 安装 markdownlint-cli2 依赖 npm run lint # 对全部 Markdown 文档执行 lint含 TOP007 npm run fix # 自动修复所有可修复的违规markdownlint-cli2 --fix npm run test # 运行 Node 内置测试运行器执行全部 TOP 规则的测试针对本文涉及的 TOP007 测试可单独运行node --test markdownlint/TOP007_useMarkdownLinks/tests/TOP007.test.js【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Custom section
Custom section【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculumMarkdown links are desired in most cases这是规则鼓励的标准写法跳转到页面内标题锚点如 #custom-section时使用 [链接文本](#锚点名)。课程文档的 Lesson overview、Knowledge check 等小节中的页面内链接都应遵循此格式。 ### 2. 行内代码块中的锚点被忽略 markdown a href#custom-sectionAnchors inside an inline code block are ignored/a当整个a标签被反引号包裹作为行内代码展示时规则会将其视为代码示例而非真实链接因此不触发错误。3. 围栏代码块中的锚点被忽略html a href#custom-sectionAnchors inside fenced code blocks are ignored/a 在 fenced code block 围栏代码块内部出现的a标签同样属于代码示例规则通过 markdownit 解析出的fence类型 token 区间自动跳过详见下文实现分析。4. CodePen 嵌入中的锚点被豁免p classcodepen>const fencesLineRanges params.parsers.markdownit.tokens .filter((token) token.type fence) .map((token) token.map); const codepenLineRanges params.lines.reduce((lineRanges, currentLine, index) { const lineNumber index 1; const isCodepenOpeningTag currentLine.includes(classcodepen); const isCodepenClosingTag currentLine.trim().startsWith(/p) lineRanges.at(-1)?.length 2; if (isCodepenOpeningTag) { lineRanges.push([lineNumber]); } else if (isCodepenClosingTag) { lineRanges.at(-1).push(lineNumber); } return lineRanges; }, []);围栏代码块区间从 markdownit token 流中筛出type fence的 token取其map起始行、结束行作为忽略区间。CodePen 嵌入区间逐行扫描遇到包含classcodepen的行记录起始行号遇到以/p开头的行补全结束行号lineRanges.at(-1)?.length 2保证只有已开始未结束的区间才会被闭合。这正是valid_anchors.md中p classcodepen ...与/p配对被完整放行的原因。随后通过isWithinIgnoredLineRange统一判断某一行是否落在任一忽略区间内const isWithinIgnoredLineRange (lineNumber) { return [...fencesLineRanges, ...codepenLineRanges].some( (range) range[0] lineNumber lineNumber range[1] ); };注意这里是开区间而非即起始行与结束行本身不被豁免只有区间内部的行才跳过——这与valid_anchors.md中锚点位于p classcodepen和/p之间的行为一致。第二步用正则提取可判定的锚点const anchorsWithHrefRegex /(?!)a\s[^]*href[^].?\/a(?!)/g;该正则使用负向后行断言(?!)与负向前行断言(?!)从文本层面直接排除了被反引号包裹的锚点对应valid_anchors.md中的行内代码示例同时要求锚点必须携带href属性且同一行内的多个锚点均可被逐一匹配。随后借助两个辅助函数提取修复所需信息function extractHref(link) { // https://regexr.com/7v3ci to test this regex return link.match(/(?href(|))[^]/)?.[0]; } function extractLinkText(link) { const textStart link.indexOf() 1; const textEnd link.lastIndexOf(); return link.substring(textStart, textEnd); }extractHref通过 lookbehind 匹配href...或href...中的 URLextractLinkText取首尾尖括号之间的链接文本。源码注释还给出了两个正则的在线调试地址regexr.com便于开发者逐字符验证匹配行为。第三步触发 onError 并提供自动修复anchorsToFlag.forEach((anchor) { const replacementText ${anchor.text}; onError({ lineNumber: anchor.lineNumber, detail: \n Expected: ${replacementText}\n Actual: ${anchor.original}\n, fixInfo: { lineNumber: anchor.lineNumber, editColumn: anchor.columnNumber, deleteCount: anchor.length, insertText: replacementText, }, }); });每条违规都会生成一个错误报告其中Expected展示改写后的 Markdown 链接Actual展示原始锚点fixInfo记录列号、删除长度与插入文本使规则支持一键自动修复。修复结果就是把a hrefURL文本/a原样转换为文本。违规样例对照什么情况会被标记与valid_anchors.md相对的 anchors_in_markdown.md 集中构造了五类应当被标记的写法测试断言精确断言了每条错误的输出违规写法期望修复结果违规原因a href#custom-sectionLink should flag.../a[Link should flag...](#custom-section)页面内锚点使用了 HTML 锚点a href#custom-sectionWill flag/a同行多锚点[Will flag](#custom-section)同一行内多个锚点均被逐一标记a hrefhttps://codepen.io/TheOdinProjectExamplesTheOdinProjectExamples/a[TheOdinProjectExamples](https://codepen.io/TheOdinProjectExamples)位于p.codepen之外不属于嵌入豁免区域a classknowledge-check-link href#knowledge-checkFlags knowledge check anchors/a[Flags knowledge check anchors](#knowledge-check)Knowledge check 锚点必须去掉 class 改写成 Markdown 链接对应的修复基准文件 fixed_anchors_in_markdown.md 展示了执行自动修复后的标准结果测试通过fixLintErrors工具将修复输出与该文件逐字节比对确保修复行为稳定可复现。豁免与例外官方文档定义的边界规则文档 markdownlint/docs/TOP007.md 明确列出了仅有的两类豁免代码块内的任意锚点——无论是围栏代码块fenced code block还是行内代码inline code其中的a都属于代码示例CodePen 嵌入中的锚点——p classcodepen包裹的锚点无需转换。文档同时强调旧的knowledge-check-linkclass 已不再需要Knowledge check 链接应直接写成[Text](#link-here)形式而无须保留 class 属性。设计动机为什么锚点必须改写成 Markdown 链接规则文档的 Rationale 部分解释了这一强约束背后的三个技术原因让链接规则能够覆盖锚点markdownlint 无法用链接类规则如 TOP001 描述性链接文本检查 HTML 锚点将链接改写成 Markdown 形式后此类规则才能作用于它修复强调标记的漏检markdown 解析器在没有空行的场景下对 HTML 元素的分词方式特殊关联 TOP005 多行 HTML 标签周围空行导致锚点文本中的_下划线强调标记本应写作*无法触发错误改写成 Markdown 链接后可被正确校验安全属性的自动注入HTML 锚点除非手动添加否则不会自动带target_blank或relnoopener noreferrer而课程 Web 应用会将 Markdown 链接自动转换成同时携带这两个属性的锚点改写成 Markdown 链接即自动获得安全外链行为。本地验证运行 lint 与测试仓库根目录的 package.json 提供了三个相关脚本npm install # 安装 markdownlint-cli2 依赖 npm run lint # 对全部 Markdown 文档执行 lint含 TOP007 npm run fix # 自动修复所有可修复的违规markdownlint-cli2 --fix npm run test # 运行 Node 内置测试运行器执行全部 TOP 规则的测试针对本文涉及的 TOP007 测试可单独运行node --test markdownlint/TOP007_useMarkdownLinks/tests/TOP007.test.js【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考