rehype-slug
plugin to add `id` attributes to headings (by rehypejs)
rehype-autolink-headings
plugin to add links to headings in HTML (by rehypejs)
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
rehype-slug | rehype-autolink-headings | |
---|---|---|
3 | 4 | |
179 | 188 | |
2.2% | 4.3% | |
5.9 | 6.6 | |
8 months ago | 6 months ago | |
JavaScript | JavaScript | |
MIT License | MIT License |
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
rehype-slug
Posts with mentions or reviews of rehype-slug.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2023-11-14.
-
Building an Autolink Heading Component for React Navigation
I'm using the algorithm from github-slugger to create the header link and ID. It's the same one used by GitHub for their section headings and also by rehype-slug, the project I used as inspiration for this one.
-
MDX autolink headings
The heading component renders an a tag, with a href which points to the id which was generated by the rehype-slug and passed as prop to our component. The a tag uses the group class, this allows us to apply styling to children if the parent is hovered. Also we use the relative class, because we want to position an icon absolute to the left of the heading.
-
Creating my personal website with Astro, Tailwind CSS, and Nx
So to achieve my goals, I configured the rehype-slug and rehype-autolink-headings plugins to generate links to the headings in the blog post. I also configured the rehype-external-links plugin to add the target="_blank" and rel="nofollow noopener noreferrer" attributes to external links, as well as adding an icon to them.
rehype-autolink-headings
Posts with mentions or reviews of rehype-autolink-headings.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2023-11-14.
-
Building an Autolink Heading Component for React Navigation
This is how I created the first version of the Autolink Heading component to replicate the behavior of rehype-autolink-headings for React headings. It's a simple design that get's the job done. However, I'm sure it has a lot of room for improvement.
-
MDX autolink headings
We could use rehype-autolink-headings for this, but we want to do some styling with TailwindCSS. So we have to wrap the heading manually.
-
MDX Code Highlighting and Styling with Tailwind
rehype-autolink-headings
-
Creating my personal website with Astro, Tailwind CSS, and Nx
So to achieve my goals, I configured the rehype-slug and rehype-autolink-headings plugins to generate links to the headings in the blog post. I also configured the rehype-external-links plugin to add the target="_blank" and rel="nofollow noopener noreferrer" attributes to external links, as well as adding an icon to them.
What are some alternatives?
When comparing rehype-slug and rehype-autolink-headings you can also consider the following projects:
rehype-external-links - rehype plugin to add rel (and target) to external links
remark - markdown processor powered by plugins part of the @unifiedjs collective
Tailwind CSS - A utility-first CSS framework for rapid UI development.
rehype - HTML processor powered by plugins part of the @unifiedjs collective
rehype-sanitize - plugin to sanitize HTML
react-autolink-heading - A component that adds heading links (#heading-name) based on the heading text content ("Heading Name")
rehype-react - plugin to transform to preact, react, vue, etc
Visual Studio Code - Visual Studio Code
nx - Smart Monorepos · Fast CI
astro - The web framework for content-driven websites. ⭐️ Star to support our work!
rehype-slug vs rehype-external-links
rehype-autolink-headings vs remark
rehype-slug vs remark
rehype-autolink-headings vs Tailwind CSS
rehype-slug vs rehype
rehype-autolink-headings vs rehype-sanitize
rehype-slug vs react-autolink-heading
rehype-autolink-headings vs rehype-react
rehype-slug vs Visual Studio Code
rehype-autolink-headings vs rehype-external-links
rehype-slug vs nx
rehype-autolink-headings vs astro