推荐开源项目：rehype-slug - 自动添加HTML标题ID

最新推荐文章于 2024-08-30 08:30:51 发布
最新推荐文章于 2024-08-30 08:30:51 发布
阅读量339 收藏 7
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gitblog_00063/article/details/139385544
版权

推荐开源项目：rehype-slug - 自动添加HTML标题ID

rehype-slugplugin to add `id` attributes to headings项目地址:https://gitcode.com/gh_mirrors/re/rehype-slug

项目介绍

rehype-slug是一个基于unified和rehype的插件，专门设计用来为HTML文档中的标题元素（<h1>到<h6>）自动添加id属性。它的核心算法采用了与GitHub相匹配的方式，即github-slugger，确保了生成的ID符合标准且易于链接。

项目技术分析

  • 基于unified: unifed是一个强大的处理文本内容的框架，支持多种语言抽象语法树（AST），如Markdown和HTML。
  • rehype兼容: rehype是unified的一个扩展，专注于处理HTML内容的AST。
  • github-slugger算法: 这个插件采用的ID生成算法与GitHub一致，可以保证生成的ID符合开发者在GitHub上使用的习惯。

项目及技术应用场景

  • 长文档导航: 在编写长篇技术文档或文章时，可以通过rehype-slug为每个章节添加ID，方便读者直接跳转到特定部分。
  • SEO优化: 添加自定义ID有助于搜索引擎更好地理解页面结构，提高SEO效果。
  • 自动化构建工具集成: 可以将该插件集成到你的HTML预处理流程中，如Jekyll、Hugo等静态网站生成器。
  • 可链接的头部: 结合使用rehype-autolink-headings，可以在每个标题下方自动生成链接，增加文档的交互性。

项目特点

  1. 自动添加ID: 根据标题文本自动生成唯一的ID，无需手动操作。
  2. 可配置性: 提供前缀设置选项，可以根据需求自定义ID的前缀。
  3. ESM支持: 兼容Node.js 16+版本，并提供浏览器和Denno环境的导入方式。
  4. 安全考虑: 注意到DOM Clobbering的安全问题，建议配合使用rehype-sanitize进行防护。

使用方法

安装插件后，通过统一处理流程来应用rehype-slug，它可以轻松地与rehype生态系统中的其他插件一起工作，为你的HTML文件带来便利。

总结

rehype-slug是一个强大而实用的工具，它使HTML文档的标题管理变得简单，提高了阅读和导航体验。如果你正在处理大量HTML内容，或者希望提升你的项目文档质量，那么这个开源项目值得你尝试和加入到你的开发工具库中。

rehype-slugplugin to add `id` attributes to headings项目地址:https://gitcode.com/gh_mirrors/re/rehype-slug

任澄翊
关注
html5-slug:使用 canvas 和 javascript 复制 Metal Slug
07-07
HTML5 弹头 这是在 Javascript + PhaserJs 框架中完成的神话合金弹头游戏的副本。 小预览 安装 克隆 repo git clone git@github.com:zzarcon/html5-slug.git 进入repo目录cd html5-slug 安装 npm 依赖npm install 安装 bower 依赖bower install 运行服务器grunt :D
前端开源库-rehype-slug
08-30
rehype-slug是一款在前端开发领域广泛使用的开源库，它主要功能是为Markdown解析和转换提供服务，尤其在处理HTML时能自动为标题元素（如`<h1>`到`<h6>`）生成唯一的ID属性。这个特性使得在HTML文档中创建可点击的...
探索前沿HTML处理利器：rehype
gitblog_00043的博客
05-13 404
探索前沿HTML处理利器：rehype rehypeHTML processor powered by plugins part of the @unifiedjs collective项目地址:https://gitcode.com/gh_mirrors/re/rehype 在Web开发的海洋中，高效地管理和转换HTML代码是至关重要的。今天，我们有幸向您介绍一个强大的开源项目——rehype...
【总结】1569- 使用 Next.js 搭建 Monorepo 组件库文档
pingan8787
01-19 728
阅读本文你将：使用 pnpm 搭建一个 Monorepo 组件库使用 Next.js 开发一个组件库文档changesets 来管理包的 version 和生成 changelog使用 vercel 部署在线文档代码仓库：https://github.com/maqi1520/nextjs-components-docs前言组件化开发是前端的基石，正因为组件化，前端得以百花齐放，百家争鸣。我们每天...
什么是slug URL 中的 slug
weixin_30951231的博客
07-07 1102
How would you reference this object with a URL, with a meaningful name? You could use Article.id so the URL would look like this: www.example.com/article/23 Or, you could reference the title like ...
推荐项目：rehype-slug - 开源HTML头部ID自动化插件
gitblog_01009的博客
08-27 779
推荐项目：rehype-slug - 开源HTML头部ID自动化插件 rehype-slugplugin to add `id` attributes to headings项目地址:https://gitcode.com/gh_mirrors/re/rehype-slug 在创建丰富且可导航的网页内容时，为标题自动添加ID是一个非常实用的功能。今天，我们要介绍一个名为 rehype-slug ...
推荐开源项目：Node-Slug——打造完美URL的利器
gitblog_01082的博客
08-28 269
推荐开源项目：Node-Slug——打造完美URL的利器 node-slugslugifies even utf-8 chars!项目地址:https://gitcode.com/gh_mirrors/no/node-slug 在数字化的世界里，简洁、易读且标准的URL是任何网站或应用不可或缺的部分。今天，我们来探索一个开源宝藏——Node-Slug，它能将任何字符串转化为URL安全的形式，即便...
推荐项目：rehype-autolink-headings - 开启Markdown文档的高效导航新时代
gitblog_00048的博客
06-02 437
推荐项目：rehype-autolink-headings - 开启Markdown文档的高效导航新时代 rehype-autolink-headingsplugin to add links to headings in HTML项目地址:https://gitcode.com/gh_mirrors/re/rehype-autolink-headings 项目简介 rehype-autolin...
推荐项目：rehype-autolink-headings — 让文档导航更便捷！
gitblog_00369的博客
08-30 386
推荐项目：rehype-autolink-headings — 让文档导航更便捷！ rehype-autolink-headingsplugin to add links to headings in HTML项目地址:https://gitcode.com/gh_mirrors/re/rehype-autolink-headings 在长篇幅的技术文档或任何形式的详细内容中，能够方便地跳转到特...
rehype-slug 使用指南
gitblog_00725的博客
08-23 331
rehype-slug 使用指南 rehype-slugplugin to add `id` attributes to headings项目地址:https://gitcode.com/gh_mirrors/re/rehype-slug 项目介绍 rehype-slug 是一个用于 rehype 的插件，它自动为 markdown 文档中的 headings（标题）添加 id 属性。这一功能...
rehype-autolink-headings:插件以添加指向HTML标题的链接
04-30
插件可自动将链接添加到标题（h1-h6）。 安装 ： npm install rehype-autolink-headings 用 假设我们有以下文件fragment.html ： < h1> Lorem ipsum :sleepy_face: < h2> dolor—sit—amet < h3> consectetur ...
rehype-react:转换为React的插件
05-27
炒作React 插件转换为 。 安装 ： npm install rehype-react ...import slug from 'remark-slug' import toc from 'remark-toc' import github from 'remark-github' import remark2rehype from 'remar
gatsby-plugin-slug:将子弹字段添加到MarkdownRemark和Mdx节点
05-15
将slug字段添加到MarkdownRemark和Mdx节点。 默认情况下，gatsby通过以下目录结构生成url。 例如，以下目录结构生成路径URL mysite.com/2018/08/my-first-post 2018 ↳ 08 ↳ my-first-post 使用gatsby-...
slug-generator：PHP的Slug生成器库，基于Unicode的CLDR数据
02-03
子弹发生器库 该库提供了为URL，文件名或字符集受限的任何其他目标生成段的方法。... 用法 <?...use Ausi \ SlugGenerator \ SlugGenerator ; $ generator = new SlugGenerator ;...$ generator -> generate ( 'Hello Wö...
推荐开源项目：Slugify - 简洁高效的URL slug生成库
gitblog_00070的博客
06-24 420
推荐开源项目：Slugify - 简洁高效的URL slug生成库 slugifyAn Elixir library to convert strings in any language into slugs项目地址:https://gitcode.com/gh_mirrors/slugify/slugify 在构建Web应用时，我们经常需要将复杂或非英文的文本转化为简洁易读的URL slug。...
MATLAB公路裂缝检测系统面板GUI.zip
11-02
圣诞树
Flask-2.1.3.tar.zip
最新发布
11-02
Flask-2.1.3.tar.zip
markdown-navbar更改data-id
05-30
要更改 `markdown-navbar` 组件中生成的导航链接的 `data-id` 属性，你可以使用 `remark` 和 `remark-slug` 插件来为 markdown 中的标题添加自定义的 `slug`，然后在 `markdown-navbar` 中使用 `slug` 来覆盖默认的 `id` 和 `data-id` 属性。 以下是一个示例代码： ```jsx import React from 'react'; import ReactMarkdown from 'react-markdown'; import Navbar from 'markdown-navbar'; import 'markdown-navbar/dist/navbar.css'; import remarkSlug from 'remark-slug'; import unified from 'unified'; const MyMarkdown = ({ source }) => { const processor = unified().use(remarkSlug); const markdownAST = processor.parse(source); const headings = []; processor.runSync(markdownAST).children.forEach((node) => { if (node.type === 'heading') { // 获取自定义的 slug const slug = node.data?.hProperties?.slug; // 将 slug 覆盖默认的 id 和 data-id 属性 node.data = { hProperties: { id: slug, 'data-id': slug, }, }; headings.push({ level: node.depth, title: node.children[0].value, slug, }); } }); return ( <> <Navbar headings={headings} /> <ReactMarkdown astPlugins={[remarkSlug]}>{source}</ReactMarkdown> </> ); }; export default MyMarkdown; ``` 在这个示例中，我们使用 `unified` 和 `remark-slug` 插件为 markdown 中的标题添加了自定义的 `slug`，然后在 `MyMarkdown` 组件中将 `slug` 赋值给了标题节点的 `id` 和 `data-id` 属性。最后，我们将生成的导航栏和 markdown 内容渲染了出来。 需要注意的是，`data-id` 属性并非标准的 HTML 属性，如果你需要使用这个属性来进行一些操作，可能需要自己编写相应的 JavaScript 代码来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

任澄翊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值