markdown-it usage

index.html

<!-- better include github md style for table format  -->
<!-- Styles -->
<link rel="stylesheet" href="./github-md-style.css">
<main>
</main>

markdown-it.js

var hljs = window.hljs;
var markdownittable = window.markdownittable;

var md = window.markdownit({
  html: true,
  linkify: true,
  typographer: true,
  breaks: true,
  table: true,
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre class="hljs"><code>' +
          hljs.highlight(str, {
            language: lang,
            ignoreIllegals: true
          }).value +
          '</code></pre>';
      } catch (__) { }
    }

    return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
  },
});
// render markdown fromr file in public folder
await fetch("https://raw.githubusercontent.com/JebLee-OasisStudio/HTC-Api-documentation/main/api-keys-documentation.md")
  .then(response => response.text())
  .then(text => {
    document.querySelector("main").innerHTML = md.render(text);
  });