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,

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs