DEV Community

Casualwriter
Casualwriter

Posted on

3 2

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)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more