remark-parse is a general-purpose Markdown parser that does not specifically handle frontmatter. However, it can be extended with plugins to parse frontmatter if needed.

remark-gfm does not provide frontmatter support, as it focuses on enhancing Markdown parsing with GitHub Flavored features like tables and strikethroughs.

remark-mdx does not handle frontmatter directly, but it allows for the integration of frontmatter in MDX files. You can use other tools or plugins alongside MDX to manage frontmatter data.

remark-frontmatter provides dedicated support for parsing frontmatter sections in Markdown files. It extracts metadata from YAML or TOML blocks, making it easy to access and use this information in your application.

remark-html does not handle frontmatter. It is primarily concerned with converting Markdown content to HTML, leaving frontmatter processing to other tools or plugins.

remark-parse is a basic Markdown parser that does not include GFM support by default. However, it can be extended with plugins like remark-gfm to add GFM features during the parsing process.

remark-gfm is specifically designed to add GitHub Flavored Markdown (GFM) compatibility to your Markdown processing. It includes support for GFM features like tables, strikethroughs, and task lists, making it the go-to choice for GFM rendering.

remark-mdx does not focus on GFM compatibility, but it allows for the use of GFM features within MDX files. You can integrate GFM support by using remark-gfm alongside remark-mdx in your processing pipeline.

remark-frontmatter does not handle GFM features, as its primary focus is on parsing frontmatter sections in Markdown. It does not interfere with GFM compatibility, so you can use it alongside GFM-supporting plugins.

remark-html does not provide GFM support by itself, but it can be used in conjunction with remark-gfm to render GFM features in HTML. You would need to include remark-gfm as a plugin to enable GFM features during the parsing process.

remark-parse does not convert Markdown to HTML. It parses the Markdown text and generates an Abstract Syntax Tree (AST), which can then be processed by other tools or plugins for HTML conversion.

remark-gfm does not perform HTML conversion. It is a plugin that enhances Markdown parsing with GFM features, but you will need to use remark-html or another HTML conversion tool to render the output.

remark-mdx allows for HTML conversion of MDX content, including any embedded React components. However, it does not handle the conversion itself; you will need to use a compatible renderer that supports both Markdown and JSX.

remark-frontmatter does not handle HTML conversion. It focuses on parsing frontmatter in Markdown, leaving the rendering of the content to other tools.

remark-html is the standard package for converting Markdown content into HTML. It ensures that the Markdown is rendered correctly and safely for use in web applications.

remark-parse is a general-purpose Markdown parser that does not support MDX. However, it can parse the Markdown portion of MDX files; you will need additional tools to handle the JSX elements.

remark-gfm does not provide MDX support, as it focuses on enhancing Markdown with GitHub Flavored features. It can be used alongside MDX, but it does not interact with the JSX elements in any way.

remark-mdx is specifically designed to support MDX (Markdown + JSX), allowing you to write Markdown content alongside React components. It enables a seamless integration of JSX within Markdown files, making it ideal for projects that require interactive or component-based content.

remark-frontmatter does not handle MDX content. It is focused on parsing frontmatter in Markdown files and does not interact with JSX or component-based content.

remark-html does not support MDX natively. However, it can be used in conjunction with remark-mdx to render MDX content after it has been processed. You will need to handle the JSX conversion separately, typically using a React renderer.

Markdown Parsing Example with remark-parse

import { unified } from 'unified';
import remarkParse from 'remark-parse';

const markdown = `# Hello World
This is a sample Markdown.`;

unified()
  .use(remarkParse)
  .process(markdown)
  .then((file) => {
    console.log(file.contents);
  });

GFM Example with remark-gfm

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkGfm from 'remark-gfm';
import remarkHtml from 'remark-html';

const markdown = `# Task List
- [ ] Item 1
- [x] Item 2

| Header 1 | Header 2 |
| -------- | -------- |
| Row 1    | Data 1   |
| Row 2    | Data 2   |
`;

unified()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkHtml)
  .process(markdown)
  .then((file) => {
    console.log(String(file));
  });

MDX Example with remark-mdx

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkMdx from 'remark-mdx';

const mdx = `# Hello MDX

<MyComponent />
`;

unified()
  .use(remarkParse)
  .use(remarkMdx)
  .process(mdx)
  .then((file) => {
    console.log(String(file));
  });

Frontmatter Example with remark-frontmatter

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkFrontmatter from 'remark-frontmatter';

const markdown = `---
title: My Post
---

# Hello World
`;

unified()
  .use(remarkParse)
  .use(remarkFrontmatter)
  .process(markdown)
  .then((file) => {
    console.log(String(file));
  });

HTML Conversion Example with remark-html

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkHtml from 'remark-html';

const markdown = `# Hello World
This is a sample Markdown.`;

unified()
  .use(remarkParse)
  .use(remarkHtml)
  .process(markdown)
  .then((file) => {
    console.log(String(file));
  });