a docsify plugin to render nomnoml code fences
npm install docsify-nomnoml> _a docsify plugin to render nomnoml code fences_
Add the following scripts to the docsify index.html file - note that the
peer-dependencies, nomnoml and graphre must be loaded before the plugin.
``html`
To render a block, specify the code fence language as nomnoml or noml for shortrenderSvg
followed by a instruction or render for short.
``none`nomnoml renderSvg`
[Foo] -> [Bar]
_or_
``none`noml render`
[Foo] -> [Bar]
Some optional attributes may be specified after the render instruction:
- title - text to be rendered in the SVG
- additionally set as the aria-label
- class - custom CSS class added to the SVG in addition to the default
- width - a width can be added to the SVG
- height - a height can be added to the SVGnone
`nomnoml renderSvg width=100% class=my-class title="My Diagram"
[Foo] -> [Bar]
`
Theming
By default the plugin will try to match the
and fill colors of the rendered SVG
to the current theme. This may be overridden by explicity declaring custom CSS rules.`css
:root {
--nomnoml-svg-stroke: ;
--nomnoml-svg-fill-1: ;
--nomnoml-svg-fill-2: ;
}
`Alternatively, the theming can be completely disabled by setting:
js
window.$docsify = {
// ...
nomnoml: {
autotheme: false,
},
}
`Directives
While directives may ordinarily be specified in nomnoml syntax, it may be preferable to define
some of them globally such that they are consistently applied throughout a docsify instance.
For example:
noml render
#fontSize: 14
#arrowSize: 1.5
[Foo] -> [Bar]
`
Which can instead be specified on the
configuration object.`js
window.$docsify = {
// ...
nomnoml: {
directives: {
fontSize: 14,
arrowSize: 1.5,
},
},
}
``