A Vanilla Web Component to bring native Markdown (w/ syntax highlighting) support to the browser

npm i @vanillawc/wc-markdown

Then import the index.js file at the root of the package.

<wc-markdown src="assets/sample.md"></wc-markdown>

<wc-markdown>
## Inline Markdown

This some sample markdown.
</wc-markdown>

Note: Since the content is contained within html both the opening < and closing > brackets need to be properly escaped.

<wc-markdown></wc-markdown>
<script>
window.onload = () => {;
  document.querySelector("wc-markdown").value = `
  ## Value Prop Markdown

  This sample is loaded from the \`value\` property of the \`&lt;wc-markdown&gt;\` tag
  `;
};
</script>

<wc-markdown src="assets/sample2.md" highlight></wc-markdown>

By default, even with highlight enabled the code will appear unstyled. To add style a theme needs to be imported globally. The themes can be found under dist/themes/.

<link rel="stylesheet" href="/node_modules/@vanillawc/wc-markdown/dist/themes/prism-okaidia.css">

The core of PrismJS included with this WC only supports the following languages [ html, xml, svg, mathml, css, javascript ]. Support for additional languages can be found in dist/components/.

<script src="/node_modules/@vanillawc/wc-markdown/dist/components/prism-typescript.min.js"></script>