JSFiddle - React, Tailwind, and code Playground

by Eugene Trounev

HTML

<main></main>

SCSS

.markdown {
	white-space-collapse: preserve;
	h1,h2,h3,h4,h5,h6,li {
		margin: 0;
	}
}

JavaScript

const md = `# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

**Bold** *Italic*

* One
* Two
* Three

## Subhead

One **two** three **four** five.

1. One
2. Two
3. Three

Plain link https://github.com/tlylt/rmark here <<<
[Link](https://github.com/tlylt/rmark)
![Image](https://raw.githubusercontent.com/tlylt/rmark/main/static/logo.svg)

This is **Bold** and this is *Italic*.

---------------------

I just love **bold text**.
Italicized text is the *cat's meow*.
This text is ***really important***.
Dorothy followed her through many of the \`beautiful\` rooms in her castle.
The Witch bade her clean the pots and [kettles](http://test.com) and sweep the floor and keep the fire fed with wood.
\`\`\`
var a = "test";
\`\`\`
`;

const inlinePatterns = [
    // Strong
    {
        pattern: /\*\*\s?([^\n]+)\*\*/gm,
        replacement: '<strong>$1</strong>',
    },
    // Emphasis
    {
        pattern: /\*\s?([^\n]+)\*/gm,
        replacement: '<em>$1</em>',
    },
    // Image
    {
        pattern: /!\[([^\[]+)\]\(([^\)]+)\)/gm,
        replacement: '<img src="$2" alt="$1">',
    },
    // Link
    {
        pattern: /\[([^\n]+)\]\(([^\n]+)\)/gm,
        replacement: '<a href="$2">$1</a>',
    },
    {
        pattern: /(?<!")(http[\d\w\/:\.]+)/gm,
        replacement: '<a href="$1">$1</a>',
    },
    // Code
    {
        pattern: /`{1}\n?(.+)\n?`{1}/gm,
        replacement: '<code>$1</code>',
    },
];

const blockPatterns = [
    // Header
    {
        pattern: /(#+)(.*)/gm,
        replacement: (m, g1, g2) => `<h${g1.length}>${g2.trim()}</h${g1.length}>`,
    },
    // List
    {
        pattern: /^(\s*)(\d+\.\s+)(.*)$/gm,
        replacement: '<li>$3</li>',
    },
    {
        pattern: /^(\s*)(\*+\s+)(.*)$/gm,
        replacement: '<li>$3</li>',
    },
    // Horizontal Rule
    {
        pattern: /^-{4,}\n/gm,
        replacement: '<hr>',
    },
    // Quote
    // {
    //     pattern: /^ {4,}\n*/,
    //     replacement:...