<wc-markdown> Markdown with Syntax Highlighing

Setup

Install and import from NPM

npm i @vanillawc/wc-markdown

<script type="module" src="[node_modules]/@vanillawc/wc-markdown/index.js"></script>

Import from SkyPack CDN

<script type="module" src="https://cdn.skypack.dev/@vanillawc/wc-markdown"></script>

Demo

Try it on WebComponents.dev

Usage

Attributes

• src - load an external source file
• highlight - when present, syntax highlighting is applied to code

Properties

• value - get/set the source code

External Source

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

Inline Source

<wc-markdown>
  <script type="wc-content">
    ## Inline Markdown

    This some sample markdown.
  </script>
</wc-markdown>

Note: The </script> word cannot be used inside here, you'll have to use the escaped </script> version instead, you may also use <script> for the opening <script> tag if you wish to

Syntax Highlighting

To apply syntax highlighting, add the highlight attribute.

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

Syntax Highlighting - Theming

Highlighting requires the import of a CSS theme. Themes can be found under themes/.

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

Syntax Highlighting - Languages

The PrismJS core includes the following languages [html, xml, svg, mathml, css, javascript].

Additional language modules can be imported from components/.

<script type="module" src="/node_modules/@vanillawc/wc-markdown/index.js"></script>
<script type="module" src="/node_modules/@vanillawc/wc-markdown/components/prism-typescript.js"></script>

Some languages extend others. Ex, C++ extends C so both need to be imported in the correct order.

<script type="module" src="/node_modules/@vanillawc/wc-markdown/index.js"></script>
<script type="module" src="/node_modules/@vanillawc/wc-markdown/components/prism-c.js"></script>
<script type="module" src="/node_modules/@vanillawc/wc-markdown/components/prism-cpp.js"></script>

Contributing

See CONTRIBUTING.md

Similar Projects

• <zero-md> - Ridiculously simple zero-config markdown displayer