@gabio/markdown-transpiler

⚙️ An extensible and easy-to-use markdown transpiler!

Why?

What most transpilers do :

• Transpile at runtime, which takes time and delays your page loading 🙄
• Only transform to basic HTML that you need to style with global HTML tag selectors 🤮
• Offer no way to extend their code for adding new transpiling strategies or supporting new file types 😑
• Do not permit the usage of components 😳

Description

This tool will read markdown files and transform them into the appropriate file type. In order to achieve such a task, three interfaces each play a different role in the process:

1. A MarkdownParser, used to transform markdown files into HTML or components
2. An ImportsCreator, used to generate the appropriate import section inside the <script> tag
3. A FileCreator, used to wrap the parsed content and define the <script> section

The MarkdownTranspiler will take an implementation from each of these interfaces and output the resulting file. Some implementations are already offered to you, but you can always provide your own!

Installation

yarn add --dev @gabio/markdown-transpiler

or

npm install --save-dev @gabio/markdown-transpiler

Usage

A usage example can be found here.

Implementing a MarkdownParser

As stated above, you can provide your own version of any parts of the transpiler. However, the most common interface to be implemented is the MarkdownParser. Here is an example for transpiling to a Svelte component library.

For other interfaces, you can look at the source code for a good idea on how they can be implemented.

Documentation

Future work

• Adding more options to transpiler (formatting, minifying, etc.)
• Adding more file types (Vue2 basic, Vue3, React, etc.)