mirror of
https://github.com/JonnyBro/JaBa.git
synced 2024-11-23 21:54:58 +05:00
209 lines
5.6 KiB
Markdown
209 lines
5.6 KiB
Markdown
|
## Configuration
|
||
|
|
|
||
|
|
### Default configs
|
||
|
|
|
||
|
|
Internally, `<zero-md>` uses the following defaults in its constructor:
|
||
|
|
|
||
|
|
```js
|
||
|
|
{
|
||
|
|
// 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:
|
||
|
|
|
||
|
|
```css
|
||
|
|
: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.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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,
|
||
|
|
|
||
|
|
```html
|
||
|
|
<zero-md src="example.md"></zero-md>
|
||
|
|
```
|
||
|
|
|
||
|
|
is semantically equivalent to this:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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:
|
||
|
|
|
||
|
|
```js
|
||
|
|
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)
|
||
|
|
```
|
||
|
|
|