rehype-autolink-headings
rehype-sanitize
| rehype-autolink-headings | rehype-sanitize | |
|---|---|---|
| 4 | 1 | |
| 188 | 129 | |
| 5.3% | 6.2% | |
| 6.6 | 5.9 | |
| 6 months ago | 7 months ago | |
| JavaScript | JavaScript | |
| MIT License | MIT License |
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-autolink-headings
-
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.
rehype-sanitize
-
My first post
⚠️ HTML in markdown is quite unsafe, but if you want to support it, you can use rehype-raw. You should probably combine it with rehype-sanitize.
What are some alternatives?
remark - markdown processor powered by plugins part of the @unifiedjs collective
react-markdown - Markdown component for React
rehype-slug - plugin to add `id` attributes to headings
rehype-raw - plugin to parse the tree again
Tailwind CSS - A utility-first CSS framework for rapid UI development.
remark-toc - plugin to generate a table of contents (TOC)
rehype-react - plugin to transform to preact, react, vue, etc
rehype-highlight - plugin to highlight code blocks
rehype-external-links - rehype plugin to add rel (and target) to external links
commonmark-spec - CommonMark spec, with reference implementations in C and JavaScript
astro - The web framework for content-driven websites. ⭐️ Star to support our work!
rehype-starry-night - Rehype plugin to highlight code with Starry Night