JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quilljs-markdown@latest/dist/quilljs-markdown.js"></script>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/quilljs-markdown@latest/dist/quilljs-markdown-common-style.css" rel="stylesheet">




<div class="main container">

<div id="editor">
  <h1>Markdown support</h1>
</div>

</div>

CSS

html,body {
  color: #454545;
}

.main.container {
  margin-top: 2%;
}

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  var quill = new Quill("#editor", {
    theme: "snow",
  })
  var markdownOptions = {
    ignoreTags: ["strikethrough"], // @option - if you need to ignore some tags.

    tags: {
      // @option if you need to change for trigger pattern for some tags.
      blockquote: {
        pattern: /^(\|){1,6}\s/g,
      },
      bold: {
        pattern: /^(\|){1,6}\s/g,
      },
      italic: {
        pattern: /(\_){1}(.+?)(?:\1){1}/g,
      },
    },
  }
  new QuillMarkdown(editor, markdownOptions)
})