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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay