After trying out several Markdown parsers and realizing that the results were quite different at times, I decided to write my own parser from scratch.
The project can be viewed on GitHub and is pretty easy to integrate.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://frankwisniewski.github.io/mdparser/mini.css">
<script src="https://frankwisniewski.github.io/mdparser/mdparsershortmin.js"></script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
<script>
MathJax = {
tex: {
inlineMath: [['-$', '$-'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>
</head>
<body>
<div class=container id="markdownContainer"></div>
<script>
"use strict";
async function loadMD(fileName){
try {
const req = await fetch( fileName , {
method: 'get',
headers: {
'content-type': 'text/csv;charset=UTF-8'
}
});
if (req.status === 200){
let markDown = await req.text()
return markDown
}
} catch (err) {console.log(err)}
}
function process(md){
let mdToHtm = fhwMD( md, {autoid:true, mathjax:true} )
markdownContainer.innerHTML=mdToHtm;
}
loadMD("https://corsproxy.io?https://frankwisniewski.github.io/mdparser/beschreibung.md").then( (markdown) => process(markdown))
</script>
</body>
</html>
The function call is as follows: fhwMD( md, {autoid:true, mathjax:true} )
The minified JavaScript code is just under 14 kilobytes in size.
Top comments (0)