JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/markty@0.0.3/dist/markty.umd.js"></script>
<div id="result"></div>

CSS

body {padding: 0 20px;}

JavaScript

let myString = `

A First Level Header
====================

A Second Level Header
---------------------

*   Candy.
*   Gum.
*   Booze.

1.  Red
2.  Green
3.  Blue

* * *

***

*****

- - -

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

This is an [example link](http://example.com/ "With a Title").

![alt text](/path/to/img.jpg "Title")

I strongly recommend against using any \`blink\` tags.

    <blockquote>
        <p>For example.</p>
    </blockquote>

The quick brown fox jumped over the lazy
dog's back.

### Header 3

> This is a blockquote.
> 
> This is the second paragraph in the blockquote.
>
> ## This is an H2 in a blockquote`

// ============================
// rules
// ============================

const code_block = '^(?: {4,}|\\t)(.+(?:\\n^(?: {4,}|\\t).+)+)'
const header_underline ='^(.+)\\n([=-]{3,})'
const header = '(?:^(#{1,6})(?=\\s)(.*?)(?: +#*)? *$)'
const hr = '(?:^([_*-]) *\\6(?: *\\6)+ *$)'
const blockquotes = '((?:^>.*$)(?:(?:\\n(?!\\n|([_*-]) *\\8(?: *\\8)+ *$|(?:\\d+[.)/]|[-+*]|#{1,6})(?=\\s|$)|`{3,})).*$)*)'
const paragraphs = '(?!^(?: *$)| *<| *&lt;)^(.*)'


const tokenizer = new RegExp(`${code_block}|${header_underline}|${header}|${hr}|${blockquotes}|${paragraphs}`, 'gm');

let result = markty(myString, tokenizer, (s, m) => {
	let [token, code_b, h_u_1, h_u_2, h_1, h_2, hr_1, bq_1, bq_2, p_1] = m
  
  if (code_b) {
    code_b = code_b.replace(/^( |\t)*/gm, '')
    code_b = code_b.replace(/(<)|(>)|(")]/gm, (s, g_1, g_2, g_3) => {
    	if (g_1) return '&lt;'
    	else if (g_2) return '&gt;'
    	else if (g_3) return '&quote;'       
    })    
  	return `<pre><code>${code_b}</code></pre>`
  }

  else if (h_u_1) return `<h${h_u_2[0] === '='?'1':'2'}>${h_u_1}</h${h_u_2[0] === '='?'1':'2'}>`
  else if (h_1) return `<h${h_1.length}>${h_2}</h${h_1.length}>`
  else if (hr_1) return `<hr />`
  else if (p_1) return `<p>${p_1}</p>`
  else if (bq_1) {
    bq_1 = bq_1.replace(/^> */gm, '')
  	return `<blockquote>\n${bq_1}\n</blockquote>`
  }
},...