Our great sponsors
|6 months ago||21 days ago|
|Apache License 2.0||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.
Best way to store blog post content (React/MongoDB)?
5 projects | /r/reactjs | 26 May 2021
I'm using React Markdown with remark-gfm, remark-math, react-mathjax, and MDX.
Build a blog app with new Next.js 13 app folder and Contentlayer
2 projects | dev.to | 5 Apr 2023
Markdown, Asciidoc, or reStructuredText - a tale of docs-as-code
23 projects | dev.to | 10 Jan 2023
Last, but certainly not least, among my favorite frameworks is the family of frameworks based on MDX. Before that, let’s understand what is MDX and how does it vary from MD.
Blogging with Next.js and MDX: The ultimate combination for dynamic content
3 projects | dev.to | 9 Jan 2023
Are you a developer looking to create a blog or personal website that is both easy to maintain and visually appealing? Look no further than using Next.js and MDX!
Contentlayer with next/image
11 projects | dev.to | 4 Jan 2023
My first reaction was to use MDX and use next/image just as in the example. But that means that we can't use normal markdown images and it turns out that this won't work with contentlayer. This wont work, because Next.js does some magic on the import of the static image. The object which gets returned by the import, contains not only a path to the image, it contains also the width and height, plus a very small version of the image for the blurred placeholder. This magic does not work if the MDX file is loaded with contentlayer, because contentlayer uses its own bundler, which does not know about the import magic for images.
MDX autolink headings
5 projects | dev.to | 4 Jan 2023
And that's it, we can now hover over our MDX headings and should see a hash to the left. If we click a heading, we should see the id appended to the url in the browser address bar.
Using Code Hike within the app directory
2 projects | dev.to | 6 Dec 2022
I'm using MDX, with Contentlayer and for the code listing I'm using the wonderful Code Hike library.
Want to create attractive, interactive docs? Use these amazing documentation tools and examples
11 projects | dev.to | 2 Dec 2022
There is a rise in markdown-based formats to bring capacity for integrating interactive content into documents, namely using web components in markdown. MDX enables using JSX with markdown, the chief aim to bring React components to markdown. Mdsvex brings svelte components to markdown.
Migrating my website from Gatsby to Astro
13 projects | dev.to | 25 Nov 2022
Since I was going to write blog posts using MDX, needed good SEO, along with PWA (why not) and with the above mentioned stack, I needed a lot of plugins and by lot I mean A LOT.
MDX Code Highlighting and Styling with Tailwind
4 projects | dev.to | 14 Nov 2022
2 projects | dev.to | 12 Nov 2022
If you opt for Markdown files as your data source for your Gatsby site, you’ll have the option of embedding JSX reusable components into the text using gatsby-plugin-mdx, a Gatsby plugin that adds MDX support to your site. Here are the benefits:
What are some alternatives?
remark-gfm - remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists)
next-mdx-remote - Load mdx content from anywhere through getStaticProps in next.js
astro - The all-in-one web framework designed for speed. ⭐️ Star to support our work!
eleventy 🕚⚡️ - A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
emoji-shortcodes-for-markdown - 1000+ Emoji Finder app for Markdown, GitHub, Campfire, Slack, Discord and more...
pandoc - Universal markup converter
mdx-bundler - 🦤 Give me MDX/TSX strings and I'll give you back a component you can render. Supports imports!
remark-math - plugins to support math
Hugo - The world’s fastest framework for building websites.
SvelteKit - web development, streamlined
remark-html - plugin to add support for serializing HTML
Tailwind CSS - A utility-first CSS framework for rapid UI development.