Markdown Parser

Live demo (GitHub pages): https://wdzajicek.github.io/markdown-parser/


Overview

An online markdown-to-HTML parser. Parses and renders markdown as HTML in a lightweight Bootstrap 5 website.

I'm creating this project because I wanted a lightweight JS markdown parser that supports custom classes, id's, and HTML attributes. Projects like marked are nice, however, it seems to have a lot of extra features and options that I don't want and no custom id's or classes (that I could find):

Example of markdown with custom id's classes and attributes:

# Heading
{: #heading-id .class1 }

![image alt text](./path/to/image.png){: height="90" width="160" .class2.class3 }

[My link](https://google.com){: #link-id .class3 }

Screenshot of the online markdown parser

Prerequisites

  • ruby-2.7.3 (for Jekyll v4)
  • Node Version Manager (NVM):
    • Install Node.js using nvm: nvm install v18.12.1 (check .nvmrc file to verify current version.)
    • bash function to look for .nvmrc files:
      ## Use a local .nvmrc file if present
      enter_directory() {
        if [[ $PWD == $PREV_PWD ]]; then
          return
        fi
      
        PREV_PWD=$PWD
        [[ -f ".nvmrc" ]] && nvm use
      }
      
      export PROMPT_COMMAND=enter_directory
      
  • OR, install the Nodejs version specified in .nvmrc file

Installation

Clone the repo and install the NPM & Gem dependencies:

git clone git@github.com:wdzajicek/markdown-parser.git
cd markdown-parser
npm i && bundle i

Dependencies include Jekyll (and its deps) plus (see package.json for full list):

  • DOMPurify - Sanitize input
  • webpack, babel, and corejs
  • Bootstrap 5 & popperjs
  • autoprefixer
  • sass
  • npm-run-all

Development Build

npm run development

A dev build creates a development webpack bundle (for easier debugging) and injects the compiled SASS into <style> elements in the document's <head> for quicker reloading.

A development build runs jekyll and webpack in parallel. A local server is created for previewing the build in your browser on localhost:3000. Project files are watched for changes and the commands need to be stopped with control + C.

Production Build

npm run production

A production build creates a minified production bundle and stylesheet.

Like the dev build, it also creates a server for previewing at localhost:3000. It watches for changes to project file so you should stop the running commands using control + C.

GitHub Pages

npm run gh-pages
npm run copy-gh

View the live markdown-parser on GitHub pages: https://wdzajicek.github.io/markdown-parser/

A production GitHub pages build is created using the gh-pages npm script.

After a successful build is run it gets copied into the docs/ directory using the copy-gh npm script.