DEV Community

Cover image for My little Markdown Parser
Frank Wisniewski
Frank Wisniewski

Posted on

My little Markdown Parser

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.

Frank Wisniewski on Github

<!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>
Enter fullscreen mode Exit fullscreen mode

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)