If you need to write code to embed into your own HTML
,
We provide this option.
When you write call back function as markdown-it
's option argument object's render
property,
this plugin call the call-back funtion with argument (encoded url for kroki and alt-text).
For example, if you write call-back and markdown-it
's use()
method, like bellow.
const md = require('markdown-it');
const markdownItKroki = require('kazumatu981/markdown-it-kroki');
const urlMap = [];
function myRender(encodedUrl, altText) {
console.log(`URL: ${encodedUrl}`);
console.log(`param: ${altText}`);
urlMap.push({id: altText, url:encodedUrl});
return `<div id=${altText}></div>`
}
md.use(markdownItKroki, {
render: myRender
});
and, write markdown like this.
## This is test figure
```plantuml [figure-001]
skinparam ranksep 20
skinparam dpi 125
skinparam packageTitleAlignment left
rectangle "Main" {
(main.view)
(singleton)
}
rectangle "Base" {
(base.component)
(component)
(model)
}
rectangle "<b>main.ts</b>" as main_ts
(component) ..> (base.component)
main_ts ==> (main.view)
(main.view) --> (component)
(main.view) ...> (singleton)
(singleton) ---> (model)
```
then console results are like this.
URL: https://kroki.io/plantuml/svg/eNpljzEPgjAQhff-iguTDFQlcYMmuru5mwNO0tCWhjY6GP-7LRJTdHvv7r67d26QxuKEGiY0gyML5Y65b7GzEvblIalYbAfs6SK9oqOSvdFkPCi6ecYmaj2aXhFkZ5QmgycD2Ogg-V3SI4_OyTjgR5OzVwqc0NECNEHydtR2NGH3TK2dHjtSP3zViPmQd9W2ERmgg-iv3jGW4MC5-L-wTEJdi1XeRENRiFWOtMfnrclriQ5gJD-Z3x9beAM=
param: figure-001
function render(encodedUrl: string, altText: string): string;
name | type | value |
---|---|---|
encodedUrl |
string |
encoded url (include encoded and compressed textual diagram) for Kroki web service. |
altText |
string |
The text you have written in markdown as alt-text |
The fragment of html
you want to embed into render result as string
.