db-tutorial/markmap/01.html

114 lines
3.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Markmap</title>
<style>
* {
margin: 0;
padding: 0;
}
#mindmap {
display: block;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<svg id="mindmap"></svg>
<script src="https://cdn.jsdelivr.net/npm/d3@5"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-lib@0.8.0/dist/browser/view.min.js"></script>
<script>
;((a, t, e, n) => {
const { Markmap: s, loadPlugins: o } = window.markmap
;(t ? t(o, e, n) : Promise.resolve()).then(() => {
window.mm = s.create('svg#mindmap', null, a)
})
})(
{
t: 'heading',
d: 1,
p: {},
v: 'markmap-lib',
c: [
{
t: 'heading',
d: 2,
p: {},
v: 'Links',
c: [
{
t: 'list_item',
d: 3,
p: {},
v:
'<a href="https://markmap.js.org/" target="_blank" rel="noopener noreferrer">https://markmap.js.org/</a>'
},
{
t: 'list_item',
d: 3,
p: {},
v:
'<a href="https://github.com/gera2ld/markmap-lib" title="" target="_blank" rel="noopener noreferrer">GitHub</a>'
}
]
},
{
t: 'heading',
d: 2,
p: {},
v: 'Related',
c: [
{
t: 'list_item',
d: 3,
p: {},
v:
'<a href="https://github.com/gera2ld/coc-markmap" title="" target="_blank" rel="noopener noreferrer">coc-markmap</a>'
},
{
t: 'list_item',
d: 3,
p: {},
v:
'<a href="https://github.com/gera2ld/gatsby-remark-markmap" title="" target="_blank" rel="noopener noreferrer">gatsby-remark-markmap</a>'
}
]
},
{
t: 'heading',
d: 2,
p: {},
v: 'Features',
c: [
{ t: 'list_item', d: 3, p: {}, v: 'links' },
{ t: 'list_item', d: 3, p: {}, v: '<strong>inline</strong> <del>text</del> <em>styles</em>' },
{ t: 'list_item', d: 3, p: {}, v: 'multiline<br/>text' },
{ t: 'list_item', d: 3, p: {}, v: '<code>inline code</code>' },
{
t: 'list_item',
d: 3,
p: {},
v: '<pre><code class="language-js">console.log(\'code block\');\n</code></pre>'
},
{
t: 'list_item',
d: 3,
p: {},
v: 'MathJax - <code>\\(x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}\\)</code>'
}
]
}
]
},
(a, t, e) => a(t, e),
['mathJax', 'prism'],
{ mathJax: true, prism: true }
)
</script>
</body>
</html>