DEV Community 👩‍💻👨‍💻

Casualwriter
Casualwriter

Posted on

casual-markdown: lightweight regexp-base markdown parser (+TOC, scrollspy and frontmatter)

Just release casual-markdown v0.85 - a super lightweight RegExp-based markdown parser, with TOC, scrollspy and frontmatter support

  • simple, super lightweight (less than 190 lines)
  • vanilla javascript, no dependence
  • support all browsers (IE9+, Chrome, Firefox, Brave, etc..)
  • straight-forward coding style, hopefully readable.
  • support basic syntax according Basic Markdown Syntax (markdownguide.org)
  • support subset of extended-syntax
  • table-of-content (TOC) and scrollspy support
  • auto highlight comment and keyword in code-block
  • frontmatter for simple YAML
  • extendable (by override md.before, md.after, md.formatCode, md.formatYAML)

Usage

just simply include casual-markdown.js
from local or CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/casualwriter/casual-markdown/dist/casual-markdown.css">
<script src="https://cdn.jsdelivr.net/gh/casualwriter/casual-markdown/dist/casual-markdown.js"></script>
Enter fullscreen mode Exit fullscreen mode

Then call markdown-parser by md.html(), or TOC by md.toc()

// get markdown source from element
var mdText = document.getElementById('source').innerHTML

// parse markdown, and render content
document.getElementById('content').innerHTML = md.html( mdText )

// render TOC, add scrollspy to document.body
md.toc( 'content', 'toc', { css:'h2,h3,h4', title:'Table of Contents', scrollspy:'body' } )

// render TOC, title=Index, add scrollspy to <div id=content>
md.toc( 'content', 'toc', { title:'Index', scrollspy:'content' } )
Enter fullscreen mode Exit fullscreen mode

Please visit github for more details, or check Supported Syntax of Casual-Markdown

a little rush work, please let me know if have any bug.

have a nice day,

Top comments (0)

Build Anything...


Use any Linode offering to create something for the DEV x Linode Hackathon 2022. A variety of prizes are up for grabs, inculding $1,000 USD. 👀

Join the Hackathon <-