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

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

Markdown to HTML

1import { markdownToHtml } from "mth-htm"; // Import 'markdownToHTML' function from 'mth-htm' library
2
3// Example Markdown String.
4const markdownString = `
5# Hello world
6
7This is my first Blog
8
9## Heading 1: Setting up your Development Environment
10
11One 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.
12
13## Heading 2: Understanding Basic HTML Structure
14
15HTML (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.
16
17* **Headings:** Used to structure content and improve readability (e.g., h1, h2, h3).
18* **Paragraphs:** Used to group blocks of text (e.g., p).
19* **Lists:** Used to present items in an ordered or unordered manner (e.g., ul, ol, li).
20`;
21
22const convertedHTML = await markdownToHtml(markdownString);
23
24console.log(convertedHTML);
25
26/*
27
28<h1>Hello world</h1>
29<p>This is my first Blog</p>
30<h2>Heading 1: Setting up your Development Environment</h2>
31<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>
32<h2>Heading 2: Understanding Basic HTML Structure</h2>
33<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>
34<ul>
35<li><strong>Headings:</strong> Used to structure content and improve readability (e.g., h1, h2, h3).</li>
36<li><strong>Paragraphs:</strong> Used to group blocks of text (e.g., p).</li>
37<li><strong>Lists:</strong> Used to present items in an ordered or unordered manner (e.g., ul, ol, li).</li>
38</ul>
39
40*/

HTML to Markdown

1import { htmlToMarkdown } from "mth-htm"; // Import 'htmlToMarkdown' function from 'mth-htm' library
2
3// Example HTML string
4const htmlString = `
5<h1>Hello world</h1>
6<p>This is my first Blog</p>
7<h2>Heading 1: Setting up your Development Environment</h2>
8<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>
9<h2>Heading 2: Understanding Basic HTML Structure</h2>
10<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>
11<ul>
12<li><strong>Headings:</strong> Used to structure content and improve readability (e.g., h1, h2, h3).</li>
13<li><strong>Paragraphs:</strong> Used to group blocks of text (e.g., p).</li>
14<li><strong>Lists:</strong> Used to present items in an ordered or unordered manner (e.g., ul, ol, li).</li>
15</ul>
16`;
17
18const convertedMarkdown = htmlToMarkdown(htmlString);
19
20console.log(convertedMarkdown);
21
22/*
23
24# Hello world
25
26This is my first Blog
27
28## Heading 1: Setting up your Development Environment
29
30One 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.
31
32## Heading 2: Understanding Basic HTML Structure
33
34HTML (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.
35
36* **Headings:** Used to structure content and improve readability (e.g., h1, h2, h3).
37* **Paragraphs:** Used to group blocks of text (e.g., p).
38* **Lists:** Used to present items in an ordered or unordered manner (e.g., ul, ol, li).
39
40*/