Convert Markdown to HTML and HTML to Markdown

npm install unified remark-parse remark-rehype rehype-stringify turndown turndown-plugin-gfm

yarn add unified remark-parse remark-rehype rehype-stringify turndown turndown-plugin-gfm

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import TurndownService from "turndown";
import { gfm } from "turndown-plugin-gfm";

/**
 * Convert Markdown → HTML (synchronous)
 */
const markdownToHtml = (markdown) => {
  const file = unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypeStringify)
    .processSync(markdown);
  return String(file);
};
/**
 * Convert HTML → Markdown
 */
const htmlToMarkdown = (html) => {
  const turndown = new TurndownService({
    headingStyle: "atx", // # Heading
    hr: "---", // Horizontal rule style
    codeBlockStyle: "fenced", // Use ```
    bulletListMarker: "-", // Bullet style
  });
  // Enable GitHub Flavored Markdown (tables, strikethrough, etc.)
  turndown.use(gfm);
  // Handle <pre><code class="language-xxx"> blocks
  turndown.addRule("fencedCodeBlock", {
    filter: (node) =>
      node.nodeName === "PRE" &&
      node.firstChild &&
      node.firstChild.nodeName === "CODE",
    replacement: (content, node) => {
      const className = node.firstChild.getAttribute("class") || "";
      const language = (className.match(/language-(\w+)/) || [])[1] || "";
      return `\n\n\`\`\`${language}\n${node.firstChild.textContent}\n\`\`\`\n\n`;
    },
  });
  return turndown.turndown(html);
};
export const MarkdownUtils = { markdownToHtml, htmlToMarkdown };

const html = markdownToHtml("# Hello World");
// Output: <h1>Hello World</h1>

const markdown = htmlToMarkdown("<h1>Hello</h1>");
// Output: "# Hello"

import { MarkdownUtils } from "./MarkdownUtils";

const md = `
# Sample Title
- List item
- Another item
\`\`\`js
console.log("Hello World");
\`\`\`
`;

const html = MarkdownUtils.markdownToHtml(md);
console.log("HTML Output:\n", html);

const markdownBack = MarkdownUtils.htmlToMarkdown(html);
console.log("Markdown Output:\n", markdownBack);