Extend Markdown capabilities on static sites with simple, inline JavaScript apps (using Hexo & Vue.js).
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Markdown Components

Extend Markdown capabilities on static sites with simple, inline JavaScript apps (using Hexo & Vue.js).

Live Demo and Tutorial

Here's a blog post on how we use Markdown Components for our static docs, including examples of live code snippets.


Static site generators are fantastic, but migrating an existing site from CMS system does come at the cost of some classic front-end components. For instance, WordPress has a thriving plugin ecosystem which allows simple custom strings to be inserted into posts which are hooks for adding things like embedded YouTube videos, lightboxes for images and a host of other cool dynamic components that spice up your site. When everything is written in Markdown, this simple functionality isn't really possible outside of raw HTML or raw JavaScript.

The Markdown Components repo aims to meet in the middle.

It provides components that are injected via Markdown syntax before the static site generator processes the Markdown. The components that are created consist of a placeholder

where the component will be inserted along with small snippets of Javascript which provide the functionality that can't normally be created in a Markdown document.


Each component contains a README.md with an explanation of what it does and how to add it to your static site.

Component Source Demo
Run Javascript
A live, runnable, copyable code snippet.
Source https://flexiodata.github.io/markdown-components/run-js/
Organize content in tabs.
Source https://flexiodata.github.io/markdown-components/tabs/


Have a component you'd like to add? Submit a PR or open an issue.