mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Release 9.20 fixes of docsify

This commit is contained in:
Knut Sveidqvist 2022-10-14 15:05:00 +02:00
parent cc10e62ebd
commit fc8db95597
2 changed files with 72 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
docs/index.html
View File

@ -49,14 +49,39 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module"> <script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs'; // import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
// import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc6/dist/mermaid.esm.min.mjs';
import mermaid from 'http://localhost:9000/mermaid.esm.mjs';
console.log(mermaid); // eslint-disable-line
window.mermaid = mermaid; window.mermaid = mermaid;
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const conf = {
logLevel: 4,
startOnLoad: true,
themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
lazyLoadedDiagrams: [
// 'https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc5/dist/mermaid.esm.min.mjs',
'http://localhost:9000/mermaid-mindmap-detector.esm.mjs',
],
};
if (isDarkMode) conf.theme = 'dark';
async function loadMermaid() {
await mermaid.initialize(conf);
console.log('mermaid initialized'); // eslint-disable-line
}
mermaid.parseError = (e) => {
console.log('parse error', e); // eslint-disable-line
};
await loadMermaid();
</script> </script>
<script> <script>
let initEditor = exports.default; let initEditor = exports.default;
let parser = new DOMParser(); let parser = new DOMParser();
let currentCodeExample = 0; let currentCodeExample = 0;
let colorize = []; let colorize = [];
let num = 0;
function colorizeEverything(html) { function colorizeEverything(html) {
initEditor(monaco); initEditor(monaco);
@ -97,14 +122,12 @@
renderer: { renderer: {
code: function (code, lang) { code: function (code, lang) {
if (lang === 'mermaid-example') { if (lang === 'mermaid-example') {
console.log('An example'); // eslint-disable-line
currentCodeExample++; currentCodeExample++;
colorize.push(currentCodeExample); colorize.push(currentCodeExample);
return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>'; return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
} else if (lang === 'mermaid') { } else if (lang === 'mermaid') {
// TODO: This will need to be updated when render is async. return '<pre class="mermaid">' + code + '</pre>';
return (
'<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>'
);
} }
return this.origin.code.apply(this, arguments); return this.origin.code.apply(this, arguments);
}, },
@ -123,6 +146,10 @@
const editHtml = '[:memo: Edit this Page](' + url + ')\n'; const editHtml = '[:memo: Edit this Page](' + url + ')\n';
return editHtml + html; return editHtml + html;
}); });
// Invoked on each page load after new HTML has been appended to the DOM
hook.doneEach(function () {
window.mermaid.init();
});
hook.afterEach(function (html, next) { hook.afterEach(function (html, next) {
next(html); next(html);
@ -138,28 +165,17 @@
}, },
], ],
}; };
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const conf = {
logLevel: 4,
startOnLoad: false,
themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
};
if (isDarkMode) conf.theme = 'dark';
mermaid.initialize(conf);
</script> </script>
<script> <script>
window.onhashchange = function (a) { window.onhashchange = function (a) {
//code // if (location && ga) {
if (location) { // ga('send', 'pageview', location.hash);
ga('send', 'pageview', location.hash); // }
}
}; };
</script> </script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script> <!-- <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script> -->
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-coffeescript.min.js"></script> <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-coffeescript.min.js"></script>
</body> </body>
</html> </html>

56
packages/mermaid/src/docs/index.html
View File

@ -49,14 +49,39 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module"> <script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs'; // import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
// import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc6/dist/mermaid.esm.min.mjs';
import mermaid from 'http://localhost:9000/mermaid.esm.mjs';
console.log(mermaid); // eslint-disable-line
window.mermaid = mermaid; window.mermaid = mermaid;
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const conf = {
logLevel: 4,
startOnLoad: true,
themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
lazyLoadedDiagrams: [
// 'https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc5/dist/mermaid.esm.min.mjs',
'http://localhost:9000/mermaid-mindmap-detector.esm.mjs',
],
};
if (isDarkMode) conf.theme = 'dark';
async function loadMermaid() {
await mermaid.initialize(conf);
console.log('mermaid initialized'); // eslint-disable-line
}
mermaid.parseError = (e) => {
console.log('parse error', e); // eslint-disable-line
};
await loadMermaid();
</script> </script>
<script> <script>
let initEditor = exports.default; let initEditor = exports.default;
let parser = new DOMParser(); let parser = new DOMParser();
let currentCodeExample = 0; let currentCodeExample = 0;
let colorize = []; let colorize = [];
let num = 0;
function colorizeEverything(html) { function colorizeEverything(html) {
initEditor(monaco); initEditor(monaco);
@ -97,14 +122,12 @@
renderer: { renderer: {
code: function (code, lang) { code: function (code, lang) {
if (lang === 'mermaid-example') { if (lang === 'mermaid-example') {
console.log('An example'); // eslint-disable-line
currentCodeExample++; currentCodeExample++;
colorize.push(currentCodeExample); colorize.push(currentCodeExample);
return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>'; return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
} else if (lang === 'mermaid') { } else if (lang === 'mermaid') {
// TODO: This will need to be updated when render is async. return '<pre class="mermaid">' + code + '</pre>';
return (
'<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>'
);
} }
return this.origin.code.apply(this, arguments); return this.origin.code.apply(this, arguments);
}, },
@ -123,6 +146,10 @@
const editHtml = '[:memo: Edit this Page](' + url + ')\n'; const editHtml = '[:memo: Edit this Page](' + url + ')\n';
return editHtml + html; return editHtml + html;
}); });
// Invoked on each page load after new HTML has been appended to the DOM
hook.doneEach(function () {
window.mermaid.init();
});
hook.afterEach(function (html, next) { hook.afterEach(function (html, next) {
next(html); next(html);
@ -138,28 +165,17 @@
}, },
], ],
}; };
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const conf = {
logLevel: 4,
startOnLoad: false,
themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
};
if (isDarkMode) conf.theme = 'dark';
mermaid.initialize(conf);
</script> </script>
<script> <script>
window.onhashchange = function (a) { window.onhashchange = function (a) {
//code // if (location && ga) {
if (location) { // ga('send', 'pageview', location.hash);
ga('send', 'pageview', location.hash); // }
}
}; };
</script> </script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script> <!-- <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script> -->
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-coffeescript.min.js"></script> <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-coffeescript.min.js"></script>
</body> </body>
</html> </html>