shynode-markdown-preview v0.1.0

shynode-markdown-preview

Introduction

This is an opinioned markdown preview library which accepts markdown text and output html string.

const instance = new MarkdownPreview()
document.getElementById('target').innerHtml = instance.parse(`# header`)

Features

1. opened for different highlight.js styles
2. opened for some css level change (using CSS variables)
3. can be fully customized with marked and highlight.js
4. sanitize html ouput

Installation

npm install shynode-markdown-preview --save

Usage

import MarkdownPreview from 'shynode-markdown-preview'

// optional
const options = {
  rootClass: 'a-custom-class',
  markedOptions: {}
}

// initialize instance, this should be saved for future usage
const instance = new MarkdownPreview(options)

const markdownText = '# header'

const html = instance.parse(markdownText)

// or parse it asynchronously
instance.parse(markdownText).then((html) => {
  // do something...
})

Theming

Customizing

This library uses CSS Variables in order to make customization work. And theming does not require a re-parse.

const defaultTheme = instance.getDefaultTheme()

// merging from the default theme
const customTheme = {...defaultTheme, 'header-anchor': '%'}

// apply the theme
instance.setTheme(customTheme)

Here is the default theme:

this._defaultTheme = {
  'line-height': '1.6',
  'font-family': 'inherit',
  'font-size': 'inherit',
  'code-font-size': '0.8em',
  'code-font-family': 'Menlo, Monaco, Consolas, "Courier New", monospace',
  'default-color': 'inherit',
  'primary-color': 'rgb(16, 110, 190)',
  'background-color-pre': 'rgba(0, 0, 0, 0.05)',
  'background-color-blockquote': 'rgba(0, 0, 0, 0.05)',
  'header-anchor': '"#"',
}

Code Highlight

You can import any highlight.js styles to override default highlight style (xcode).

Dependencies

1. marked
2. highlight.js
3. dompurify

Inspiration and Stories

I want to build my own blog website by creating few systems.

• CMS admin.
• Blog client site.
• CMS backend.

And I will make a markdown editor (or use some third party lib) in admin which 1. can be previewed 2. can be rendered in the same style as my client site.

But I haven't decide which framework I'm going to use. Since html is the most common language, I will not be hesitated to make it a Vue Component or React Component.

And this is what I come up with.

Use this in caution

:)