markmap: Insert the mindmap to the HTML
I wanted to use a mindmap on Hugo, and markmap was exactly what I wanted. But I'm very unfamiliar with its syntax. (see below code-block) I don't even know what language it is (is it typescript-arrow-function?)
((e,t)=>{
const{Markmap:r}=e();
window.mm=r.create("svg#mindmap-other",null,t)
})(
()=>window.markmap, /* parameter e */
{} /* parameter t */
);
I hope I can integrate the bottom two scripts into one; these two are very similar. Please help me or tell me where to find the grammar document, thanks!
You can try it by yourself on this site
and I provide my version as below.
my question is: How can I merge the last two scripts into one to make the code beautiful?)
<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>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-view@0.2.0"></script>
<style>
* {
margin: 0;
padding: 0;
}
.mindmap {
display: block;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<svg id="mindmap-lang" class="mindmap"></svg>
<svg id="mindmap-other" class="mindmap"></svg>
</body>
<script>
/* script-Lang */
((e,t)=>{
const{Markmap:r}=e();
window.mm=r.create("svg#mindmap-lang",null,t)
})(
()=>window.markmap,{
"t":"root","d":0,"v":"Lang","c":
[
{"t":"heading","d":1,"v":"Lang", "c":[
{"t":"heading","d":2,"v":"<a href=\"https://www.python.org/\">Python</a>"},
{"t":"heading","d":2,"v":"JS", "c":[
{"t": "heading", "d":3, "v":"jquery"},
{"t": "heading", "d":3, "v":"d3js"}
]
}
]},
{"t":"heading","d":1,"v":"News", "c":[]}
]}
);
</script>
<script>
/* script-Other */
((e,t)=>{
const{Markmap:r}=e();
window.mm=r.create("svg#mindmap-other",null,t)
})(
()=>window.markmap,{
"t":"heading","d":0,"v":"Other", "c":
[
{"t":"heading","d":1,"v":"H1"},
{"t":"heading","d":1,"v":"H1", "c":[
{"t": "heading", "d":2, "v":"H2"},
{"t": "heading", "d":2, "v":"H2"}
]
}
]}
);
</script>It's wonderful if you can explain what is going on below:
((e,t)=>{
const{Markmap:r}=e();
window.mm=r.create("svg",null,t)
})(
()=>window.markmap, /* parameter e */
{} /* parameter t */
);
above code have two scripts script-Lang and script-Other
in order to avoid confusion, I decided to post the results image below
Here's what I did on my Hugo site. I provided it under below, for someone who wants it.
Here is I am trying to embed the markmap to Hugo so far. (demo)
I want to add another SVG(mind-map) of the date site under the section, so I will need multiple SVG on the same page, which is why I need to integrate the above code together.
