| .. | ||
| index.html | ||
| readme.md | ||
Configuration
Default configs
Internally, <zero-md> uses the following defaults in its constructor:
{
// URLs of Marked and Prism libraries
markedUrl: 'https://cdn.jsdelivr.net/gh/markedjs/marked@3/marked.min.js',
// URLs in an array are loaded in the prescribed order
prismUrl: [
// Add `data-manual` attribute to its `<script>` tag
['https://cdn.jsdelivr.net/gh/PrismJS/prism@1/prism.min.js', 'data-manual'],
'https://cdn.jsdelivr.net/gh/PrismJS/prism@1/plugins/autoloader/prism-autoloader.min.js'
],
// External stylesheets are loaded in the prescribed order
cssUrls: [
'https://cdn.jsdelivr.net/gh/sindresorhus/github-markdown-css@4/github-markdown.min.css',
'https://cdn.jsdelivr.net/gh/PrismJS/prism@1/themes/prism.min.css'
],
// Host styles that apply to each instance
hostCss: ':host{display:block;position:relative;contain:content;}:host([hidden]){display:none;}'
}
markedUrl and prismUrl can either be a string, or an array of strings, and are automatically
loaded into the document via <script> tags upon element initialisation. If defined as an array,
the scripts are guaranteed to load sequentially.
Host styles
By default, each instance of <zero-md> has the following host styles applied onto itself:
:host {
display: block;
position: relative;
contain: content;
}
:host([hidden]) {
display: none;
}
These are sensible defaults that help normalise behaviour across browsers and should be apt for most use-cases. If need be, you can easily override these styles from outside the element.
<style>
#foo {
display: inline-block;
contain: none;
}
</style>
...
<zero-md id="foo" src="example.md"></zero-md>
Marked and Prism libraries
Upon initialisation, <zero-md> first checks if the Marked and Prism libraries are already loaded.
If not, <zero-md> then load the libraries from their respective CDN locations specified
in markedUrl and prismUrl. This only happens once; multiple instances of <zero-md> that are
declared in the same document should not cause "double-loading".
The recommended way to override the default CDN locations is to load the libraries yourself before
loading <zero-md>. For example:
<head>
<!-- Load Marked and Prism yourself -->
<script defer src="/lib/marked.js"></script>
<script defer src="/lib/prism.js"></script>
<!-- Then load `<zero-md>` -->
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js"></script>
</head>
Default style template
By default, each instance of <zero-md> applies the external stylesheets defined in cssUrls. Internally,
<zero-md src="example.md"></zero-md>
is semantically equivalent to this:
<zero-md src="example.md">
<template>
<style>
:host {
display: block;
position: relative;
contain: content;
}
:host([hidden]) {
display: none;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sindresorhus/github-markdown-css@4/github-markdown.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/PrismJS/prism@1/themes/prism.min.css">
</template>
</zero-md>
You can override the default style template by passing in a new one.
<zero-md src="example.md">
<!-- This overrides the default template -->
<template>
<link rel="stylesheet" href="/custom-styles.css">
</template>
</zero-md>
Global config object
To override the default configs globally to all instances of <zero-md>, a ZeroMdConfig object
hoisted to the global window scope can be defined. For example:
<head>
<!-- Define globals first -->
<script>
window.ZeroMdConfig = {
markedUrl: '/lib/marked.js',
prismUrl: '/lib/prism.js',
cssUrls: [
'/styles/markdown.css',
'/styles/highlight.css'
],
hostCss: ':host{display:inline-block;}'
}
</script>
<!-- Then load `<zero-md>` -->
<script type="module" src="/lib/zero-md.min.js"></script>
</head>
<body>
...
<!-- New configs apply to all instances of `<zero-md>` -->
<zero-md src="example.md"></zero-md>
</body>
Change default style template globally
By default, <zero-md> uses a Github-themed stylesheet paired with a light-themed one for code blocks.
To update the default external stylesheets globally, define a global config object.
<head>
<script>
window.ZeroMdConfig = {
// Use these stylesheets in default template
cssUrls: [
'/styles/markdown.css',
'/styles/highlight.css'
]
}
</script>
<script type="module" src="/lib/zero-md.min.js"></script>
</head>
<body>
...
<!-- Now, every instance of `<zero-md>` -->
<zero-md src="example.md"></zero-md>
...
<!-- Is semantically equivalent to this -->
<zero-md src="example.md">
<template>
<link rel="stylesheet" href="/styles/markdown.css">
<link rel="stylesheet" href="/styles/highlight.css">
</template>
</zero-md>
</body>
Change globals in web project
If you're using <zero-md> in a web project with a bundler, something like this should work:
import ZeroMd from 'zero-md'
// Define a new custom class
class ZeroMdCustom extends ZeroMd {
constructor () {
// Call `super()` with new configs
super({
markedUrl: '/lib/marked.js',
prismUrl: '/lib/prism.js',
cssUrls: [
'/styles/markdown.css',
'/styles/highlight.css'
],
hostCss: ':host{display:inline-block;}'
})
}
}
// Register the element with custom class
customElements.define('zero-md', ZeroMdCustom)