markdown-it tutorial (pure javascript only)

markdown-it.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.3.2/markdown-it.min.js"
        integrity="sha512-TIDbN32lXOg2Mw1VcnKrQLZgfALryJogWCu/NHWtlMCR1jget+mOwMtdehBBZz2f9PKeK2AQPwVxkbl4u/1H5g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.14.0/mermaid.js"></script>

<div data-com="markdown-it">
  # [Markdown-it](https://github.com/markdown-it/markdown-it#plugins-load) USAGE

  ## Table
  | Name | desc |
  |:----: | ---- |
  Hi | 1234
  cls | clear

  ## utils
  - `code`
  - **bold**
  - *italic*


  ## Image
  [![Build Status](https://travis-ci.org/markdown-it/markdown-it.svg)](https://travis-ci.org/markdown-it/markdown-it)

  ```go
  package main

  import (
  "fmt"
  "log"
  )

  func main() {
  }
  ```

  ## mermaid test

  <div class="mermaid">
    flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
  </div>
</div>

<script>
  mermaid.initialize({
    theme: 'forest', // forest dark, base, default
    logLevel: "fatal", // debug, fatal
    securityLevel: 'loose', // strict, loose, antiscript, sandbox // https://github.com/mermaid-js/mermaid/blob/b141f24068e9c5f6979706383a29db6380ffdf31/docs/usage.md?plain=1#L114-L117
    flowchart: {curve: 'basis'},
  })
  window.onload = () => {
    document.querySelectorAll(`[data-com="markdown-it"]`).forEach(elem => {
      if (elem.dataset.com === undefined) {
        return
      }
      const md = window.markdownit({
        html: true,
        linkify: true,
        typographer: true
      })
      elem.outerHTML = md.render(elem.innerHTML)
    })
  }
</script>

output: