MTH-HTM

Markdown to HTML & HTML to Markdown

dependencies:

1. node-html-markdown
2. unified
3. remark-parse
4. remark-gfm
5. remark-rehype
6. rehype-stringify

Install

npm i mth-htm  # https://www.npmjs.com/package/mth-htm

Markdown to HTML

import { markdownToHtml } from "mth-htm"; // Import 'markdownToHTML' function from 'mth-htm' library

// Example Markdown String.
const markdownString = `
# Hello world

This is my first Blog

## Heading 1: Setting up your Development Environment

One of the first steps in learning web development is setting up your local environment. This usually involves installing a text editor (like VS Code or Sublime Text), a web browser (like Chrome or Firefox), and potentially a local server environment if you're working with backend technologies. There are many great resources online to guide you through this process.

## Heading 2: Understanding Basic HTML Structure

HTML (HyperText Markup Language) provides the basic structure of a webpage. It uses elements, defined by tags, to create content. For example, the h1 tag creates a top-level heading, while the p tag creates a paragraph of text. These tags help browsers understand how to display the content.

* **Headings:** Used to structure content and improve readability (e.g., h1, h2, h3).
* **Paragraphs:** Used to group blocks of text (e.g., p).
* **Lists:** Used to present items in an ordered or unordered manner (e.g., ul, ol, li).
`;

const convertedHTML = await markdownToHtml(markdownString);

console.log(convertedHTML);

/*

<h1>Hello world</h1>
<p>This is my first Blog</p>
<h2>Heading 1: Setting up your Development Environment</h2>
<p>One of the first steps in learning web development is setting up your local environment. This usually involves installing a text editor (like VS Code or Sublime Text), a web browser (like Chrome or Firefox), and potentially a local server environment if you're working with backend technologies. There are many great resources online to guide you through this process.</p>
<h2>Heading 2: Understanding Basic HTML Structure</h2>
<p>HTML (HyperText Markup Language) provides the basic structure of a webpage. It uses elements, defined by tags, to create content. For example, the h1 tag creates a top-level heading, while the p tag creates a paragraph of text. These tags help browsers understand how to display the content.</p>
<ul>
<li><strong>Headings:</strong> Used to structure content and improve readability (e.g., h1, h2, h3).</li>
<li><strong>Paragraphs:</strong> Used to group blocks of text (e.g., p).</li>
<li><strong>Lists:</strong> Used to present items in an ordered or unordered manner (e.g., ul, ol, li).</li>
</ul>

*/

HTML to Markdown

import { htmlToMarkdown } from "mth-htm"; // Import 'htmlToMarkdown' function from 'mth-htm' library

// Example HTML string
const htmlString = `
<h1>Hello world</h1>
<p>This is my first Blog</p>
<h2>Heading 1: Setting up your Development Environment</h2>
<p>One of the first steps in learning web development is setting up your local environment. This usually involves installing a text editor (like VS Code or Sublime Text), a web browser (like Chrome or Firefox), and potentially a local server environment if you're working with backend technologies. There are many great resources online to guide you through this process.</p>
<h2>Heading 2: Understanding Basic HTML Structure</h2>
<p>HTML (HyperText Markup Language) provides the basic structure of a webpage. It uses elements, defined by tags, to create content. For example, the h1 tag creates a top-level heading, while the p tag creates a paragraph of text. These tags help browsers understand how to display the content.</p>
<ul>
<li><strong>Headings:</strong> Used to structure content and improve readability (e.g., h1, h2, h3).</li>
<li><strong>Paragraphs:</strong> Used to group blocks of text (e.g., p).</li>
<li><strong>Lists:</strong> Used to present items in an ordered or unordered manner (e.g., ul, ol, li).</li>
</ul>
`;

const convertedMarkdown = htmlToMarkdown(htmlString);

console.log(convertedMarkdown);

/*

# Hello world

This is my first Blog

## Heading 1: Setting up your Development Environment

One of the first steps in learning web development is setting up your local environment. This usually involves installing a text editor (like VS Code or Sublime Text), a web browser (like Chrome or Firefox), and potentially a local server environment if you're working with backend technologies. There are many great resources online to guide you through this process.

## Heading 2: Understanding Basic HTML Structure

HTML (HyperText Markup Language) provides the basic structure of a webpage. It uses elements, defined by tags, to create content. For example, the h1 tag creates a top-level heading, while the p tag creates a paragraph of text. These tags help browsers understand how to display the content.

* **Headings:** Used to structure content and improve readability (e.g., h1, h2, h3).
* **Paragraphs:** Used to group blocks of text (e.g., p).
* **Lists:** Used to present items in an ordered or unordered manner (e.g., ul, ol, li).

*/