Styleable Markdown To HTML Renderer In JavaScript – md-block

Preview:

Description:

md-block is a markdown-to-HTML web component that streamlines the process of writing for the web.

You can create beautiful websites without having to write any code, all you need is your words and some simple Markdown formatting rules.

Supports both external Markdown files or inline Markdown content. Built with Custom Element.

How to use it:

1. Install and import the md-block.

# NPM
$ npm i md-block

import {MarkdownBlock, MarkdownSpan, MarkdownElement} from "md-block";

// Browser
<script type="module" src="/path/to/md-block.js"></script>

2. Add your markdown content to the <md-block> custom element.

<md-block>
  ... Markdown Content Here
</md-block>

3. It also supports inline content.

<md-span>
  ... Markdown Content Here
</md-span>

4. Load Markdown from an external file.

<md-block src="/path/to/markdown.md">
  ... placeholder text ...
</md-block>

5. Set the minimum heading level.

<md-block hmin="3">
  # Heading 3
  ## Heading 4
  ### Heading 5
  #### Heading 6
  ##### Still heading 6
</md-block>

6. Determine whether to linkify headings.

<md-block hlinks>
  # Heading 1
  ## Heading 2
  ### Heading 3
</md-block>
<md-block hlinks="§">
  # Heading 1
  ## Heading 2
  ### Heading 3
</md-block>

7. Apply your own styles to the HTML rendered.

md-block:not([rendered]) { 
  /* your styles */
}
md-block[rendered] { 
  /* your styles */
}