分析以下html
使用这个js 实现markdown转
思维导图生成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;
}
html {
font-family
: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
#mindmap {
display
: block;
width
: 100vw;
height
: 100vh;
}
.markmap-dark {
background
: #27272a;
color
: white;
}
</style>
<link rel="stylesheet" href="https
://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.12/dist/style.
css">
<link rel="stylesheet" href="https
://cdn.jsdelivr.net/npm/katex@0.16.18/dist/katex.min.
css">
</head>
<body>
<svg id="mindmap"></svg>
<script src="https
://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
<script src="https
://cdn.jsdelivr.net/npm/markmap-view@0.18.12/dist/browser/index.js"></script>
<script src="https
://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.12/dist/index.js"></script>
<script>
(e=>{window.WebFontConfig={custom
:{families
:["KaTeX_AMS","KaTeX_Caligraphic
:n
4,n7","KaTeX_Fraktur
:n
4,n7","KaTeX_Main
:n
4,n7,i
4,i7","KaTeX_Math
:i
4,i7","KaTeX_Script","KaTeX_SansSerif
:n
4,n7,i
4","KaTeX_Size1","KaTeX_Size2","KaTeX_Size3","KaTeX_Size
4","KaTeX_Typewriter"]},active
:()=>{e
().refreshHook.call
()}}}
)(()=>window.markmap
)</script><script src="https
://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.js" defer></script><script>
(()=>{setTimeout
(()=>{const{markmap
:S,mm
:Q}=window,$=new S.Toolbar;$.attach
(Q
);const I=$.render
();I.setAttribute
("style","position
:absolute;bottom
:20px;right
:20px"
),document.body.append
(I
)}
)}
)()</script>
<script>
((l,U,M,R
)=>{const N=l
();window.mm=N.Markmap.create
("svg#mindmap",
(U||N.deriveOptions
)(R
),M
),window.matchMedia
("
(prefers-color-scheme
: dark
)"
).matches&&document.documentElement.classList.add
("markmap-dark"
)}
)(()=>window.markmap,null,{"content"
:"markmap","children"
:[{"content"
:"Links","children"
:[{"content"
:"<a href=\"https
://markmap.js.org/\">Website</a>","children"
:[],"payload"
:{"tag"
:"li","lines"
:"8,9"}},{"content"
:"<a href=\"https
://github.com/gera2ld/markmap\">GitHub</a>","children"
:[],"payload"
:{"tag"
:"li","lines"
:"9,11"}}],"payload"
:{"tag"
:"h2","lines"
:"6,7"}},{"content"
:"Related Projects","children"
:[{"content"
:"<a href=\"https
://github.com/gera2ld/coc-markmap\">coc-markmap</a> for Neovim","children"
:[],"payload"
:{"tag"
:"li","lines"
:"13,1
4"}},{"content"
:"<a href=\"https
://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode\">markmap-vscode</a> for VSCode","children"
:[],"payload"
:{"tag"
:"li","lines"
:"1
4,15"}},{"content"
:"<a href=\"https
://github.com/emacs-eaf/eaf-markmap\">eaf-markmap</a> for Emacs","children"
:[],"payload"
:{"tag"
:"li","lines"
:"15,17"}}],"payload"
:{"tag"
:"h2","lines"
:"11,12"}},{"content"
:"Features","children"
:[{"content"
:"Lists","children"
:[{"content"
:"<strong>strong</strong> <s>del</s>
italic <mark>highlight</mark>","children"
:[],"payload"
:{"tag"
:"li","lines"
:"23,2
4"}},{"content"
:"<code>inline code</code>","children"
:[],"payload"
:{"tag"
:"li","lines"
:"2
4,25"}},{"content"
:"<svg width=\"16\" height=\"16\" viewBox=\"0 -3 2
4 2
4\"><path d=\"M19 3H5a2 2 0 0 0-2 2v1
4a2 2 0 0 0 2 2h1
4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-9 1
4-5-5 1.
41-1.
41L10 1
4.17l7.59-7.59L19 8z\"/></svg> checkbox","children"
:[],"payload"
:{"tag"
:"li","lines"
:"25,26"}},{"content"
:"Katex
: <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http
://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>x</mi><mo>=</mo><mfrac><mrow><mo>−</mo><mi>b</mi><mo>±</mo><msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>
4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow><mrow><mn>2</mn><mi>a</mi></mrow></mfrac></mrow><annotation encoding=\"application/x-tex\">x = {-b \\pm \\sqrt{b^2-
4ac} \\over 2a}</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height
:0.
4306em;\"></span><span class=\"mord mathnormal\">x</span><span class=\"mspace\" style=\"margin-right
:0.2778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right
:0.2778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height
:1.38
45em;vertical-align
:-0.3
45em;\"></span><span class=\"mord\"><span class=\"mord\"><span class=\"mopen nulldelimiter\"></span><span class=\"mfrac\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height
:1.0395em;\"><span style=\"top
:-2.655em;\"><span class=\"pstrut\" style=\"height
:3em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\"><span class=\"mord mtight\">2</span><span class=\"mord mathnormal mtight\">a</span></span></span></span><span style=\"top
:-3.23em;\"><span class=\"pstrut\" style=\"height
:3em;\"></span><span class=\"frac-line\" style=\"border-bottom-width
:0.0
4em;\"></span></span><span style=\"top
:-3.39
4em;\"><span class=\"pstrut\" style=\"height
:3em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\"><span class=\"mord mtight\">−</span><span class=\"mord mathnormal mtight\">b</span><span class=\"mbin mtight\">±</span><span class=\"mord sqrt mtight\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height
:0.9221em;\"><span class=\"svg-align\" style=\"top
:-3em;\"><span class=\"pstrut\" style=\"height
:3em;\"></span><span class=\"mord mtight\" style=\"padding-left
:0.833em;\"><span class=\"mord mtight\"><span class=\"mord mathnormal mtight\">b</span><span class=\"msupsub\"><span class=\"vlist-t\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height
:0.7
463em;\"><span style=\"top
:-2.786em;margin-right
:0.071
4em;\"><span class=\"pstrut\" style=\"height
:2.5em;\"></span><span class=\"sizing reset-size3 size1 mtight\"><span class=\"mord mtight\">2</span></span></span></span></span></span></span></span><span class=\"mbin mtight\">−</span><span class=\"mord mtight\">
4</span><span class=\"mord mathnormal mtight\">a</span><span class=\"mord mathnormal mtight\">c</span></span></span><span style=\"top
:-2.8821em;\"><span class=\"pstrut\" style=\"height
:3em;\"></span><span class=\"hide-tail mtight\" style=\"min-width
:0.853em;height
:1.08em;\"><svg xmlns=\"http
://www.w3.org/2000/svg\" width=\"
400em\" height=\"1.08em\" viewBox=\"0 0
400000 1080\" preserveAspectRatio=\"xMinYMin slice\"><path d=\"M95,702\nc-2.7,0,-7.17,-2.7,-13.5,-8c-5.8,-5.3,-9.5,-10,-9.5,-1
4\nc0,-2,0.3,-3.3,1,-
4c1.3,-2.7,23.83,-20.7,67.5,-5
4\nc
44.2,-33.3,65.8,-50.3,66.5,-51c1.3,-1.3,3,-2,5,-2c
4.7,0,8.7,3.3,12,10\ns173,378,173,378c0.7,0,35.3,-71,10
4,-213c68.7,-1
42,137.5,-285,206.5,-
429\nc69,-1
44,10
4.5,-217.7,106.5,-221\nl0 -0\nc5.3,-9.3,12,-1
4,20,-1
4\nH
400000v
40H8
45.272
4\ns-225.272,
467,-225.272,
467s-235,
486,-235,
486c-2.7,
4.7,-9,7,-19,7\nc-6,0,-10,-1,-12,-3s-19
4,-
422,-19
4,-
422s-65,
47,-65,
47z\nM83
4 80h
400000v
40h-
400000z\"/></svg></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height
:0.1179em;\"><span></span></span></span></span></span></span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height
:0.3
45em;\"><span></span></span></span></span></span><span class=\"mclose nulldelimiter\"></span></span></span></span></span></span>","children"
:[{"content"
:"<a href=\"#?d=gist
:af76a
4c2
45b302206b16aec503dbe07b
:katex.md\">More Katex Examples</a>","children"
:[],"payload"
:{"tag"
:"li","lines"
:"27,28"}}],"payload"
:{"tag"
:"li","lines"
:"26,28","fold"
:1}},{"content"
:"Now we can wrap very very very very long text with the <code>maxWidth</code> option","children"
:[],"payload"
:{"tag"
:"li","lines"
:"28,29"}},{"content"
:"Ordered list","children"
:[{"content"
:"1. item 1","children"
:[],"payload"
:{"tag"
:"li","lines"
:"30,31","listIndex"
:1}},{"content"
:"2. item 2","children"
:[],"payload"
:{"tag"
:"li","lines"
:"31,33","listIndex"
:2}}],"payload"
:{"tag"
:"li","lines"
:"29,33"}}],"payload"
:{"tag"
:"h3","lines"
:"21,22"}},{"content"
:"Blocks","children"
:[{"content"
:"<pre data-lines=\"35,38\"><code class=\"language-js\"><span class=\"hljs-variable language_\">console</span>.<span class=\"hljs-title function_\">log</span>
(<span class=\"hljs-string\">'hello, JavaScript'</span>
)\n</code></pre>","children"
:[],"payload"
:{"tag"
:"pre","lines"
:"35,38"}},{"content"
:"<table data-lines=\"39,
43\">\n<thead data-lines=\"39,
40\">\n<tr data-lines=\"39,
40\">\n<th>Products</th>\n<th>Price</th>\n</tr>\n</thead>\n<tbody data-lines=\"
41,
43\">\n<tr data-lines=\"
41,
42\">\n<td>Apple</td>\n<td>
4</td>\n</tr>\n<tr data-lines=\"
42,
43\">\n<td>Banana</td>\n<td>2</td>\n</tr>\n</tbody>\n</table>","children"
:[],"payload"
:{"tag"
:"table","lines"
:"39,
43"}},{"content"
:"<img src=\"https
://markmap.js.org/favicon.png\" alt>","children"
:[],"payload"
:{"tag"
:"img","lines"
:"
44,
45"}}],"payload"
:{"tag"
:"h3","lines"
:"33,3
4"}}],"payload"
:{"tag"
:"h2","lines"
:"17,18"}}]},{"colorFreezeLevel"
:2}
)</script>
</body>
</html>
作者利用间隙时间学习CSS基础知识，虽主要从事后台开发，但认为系统学习CSS基础很有必要，还展示了学习时做的思维导图，参考资料为《CSS设计指南(第二版)》。
扫一扫
672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
