<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