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.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay