Top 12 JavaScript Rehype Projects
-
SSG-based blogs almost always have you add content mainly through use of Markdown, so how a platform handles that is particularly important. Astro incorporates both the well-known Remark Markdown parser and rehype tool, and uses plugins from both. Some Remark plugins aren’t compatible with the latest version but, often, a rehype plugin can make up for that. Be sure to check for your specific use case. Also, notably, Astro allows you to put components in the Markdown (I’ll get to components further down). For example, if you’ve already imported an ImageBox.astro component as ImageBox, you could have Markdown like this:
-
import React from 'react' import { graphql } from 'gatsby' import RehypeReact from 'rehype-react' const MyGatsbyPage = ({ data }) => { /* AST renderer we use at Anvil: https://github.com/rehypejs/rehype-react */ const renderAst = new RehypeReact({ createElement: React.createElement, }).Compiler return (
) } export default MyGatsbyPage export const pageQuery = graphql` query BlogPostByPath($slug: String!) { site { siteMetadata { siteName title description keywords } } markdownRemark(frontmatter: { path: { eq: $slug } }) { htmlAst frontmatter { date title summary author image { publicURL childImageSharp { gatsbyImageData } } } } } `{data.frontmatter.title}
{data.frontmatter.date}
By ${data.frontmatter.author}
{data.frontmatter.summary}
{renderAst(data.htmlAst)} -
Appwrite
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
-
The trouble is when i use use remark-rehype each item from the frontmatter gets converted to either a
-
Here is an example of a plugin to highlight code: rehype-highlight.
-
⚠️ 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.
-
append-editor
Append to your notes @StandardNotes with GitHub Flavored Markdown via CodeMirror, Rich Markdown, and Monaco | https://appendeditor.com
Project mention: Should any of the Markdown editors allow me to make internal links? | reddit.com/r/StandardNotes | 2022-01-18Append Editor uses Remark TOC. If you add a section #TOC, the rendered pane will have autogenerated table of contents with local links.
-
Project mention: Creating my personal website with Astro, Tailwind CSS, and Nx | dev.to | 2022-01-25
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.
-
SonarLint
Deliver Cleaner and Safer Code - Right in Your IDE of Choice!. SonarLint is a free and open source IDE extension that identifies and catches bugs and vulnerabilities as you code, directly in the IDE. Install from your favorite IDE marketplace today.
-
Project mention: Creating my personal website with Astro, Tailwind CSS, and Nx | dev.to | 2022-01-25
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.
-
⚠️ 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.
-
remark-a11y-emoji
Remark Plugin to make Emoji in Markdown accessible. Wraps Emoji in a <span>-Tag with role and aria-label attributes.
The coolest thing is that MDSveX hooks into remark and rehype, which provides a whole ecosystem of plugins to choose from.
-
The coolest thing is that MDSveX hooks into remark and rehype, which provides a whole ecosystem of plugins to choose from.
-
Project mention: Creating my personal website with Astro, Tailwind CSS, and Nx | dev.to | 2022-01-25
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.
JavaScript Rehype related posts
Index
What are some of the best open-source Rehype projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | rehype | 967 |
| 2 | rehype-react | 260 |
| 3 | remark-rehype | 119 |
| 4 | rehype-highlight | 97 |
| 5 | rehype-sanitize | 64 |
| 6 | append-editor | 62 |
| 7 | rehype-autolink-headings | 60 |
| 8 | rehype-slug | 58 |
| 9 | rehype-raw | 44 |
| 10 | remark-a11y-emoji | 25 |
| 11 | rehype-toc | 21 |
| 12 | rehype-external-links | 12 |
Are you hiring? Post a new remote job listing for free.
