@ebot7/marked

E-Bot7 Marked

The package includes a custom renderer for the most popular JavaScript Markdown library marked.js, so that it outputs Edem components like <ed-paragraph> rather than standard HTML tags like <p>.

Installation

As the first step, you will want to install Marked.js and Edem’s Markdown package. To do so, run the following commands in your terminal:

npm install marked
npm install @ebot7/marked

Usage

import marked from "marked";
import { createEdemMarkedRenderer } from "@ebot7/marked";

const renderer = createEdemMarkedRenderer();
marked.use({ renderer });

console.log(marked("# Welcome to Edem!"));

Optionally, you can supply an object which includes renderer methods like code, image, paragraph. Visit Marked.js to get more information.

Example

If you have followed along with the above, then the following input:

# Hello world

This is a paragraph containing [a link](https://e-bot7.com/).

## Sub-heading

* Here
* Is
* A
* List

1. Here
1. Is
1. An
1. Ordered
1. List

Should result in the following output:

<ed-text variant="h700" component="h1">Hello world</ed-text>
<ed-paragraph>
  This is a paragraph containing
  <a href="https://e-bot7.com/">a link</a>.
</ed-paragraph>
<ed-text variant="h600" component="h2">Sub-heading</ed-text>
<ul>
  <li><ed-text>Here</ed-text></li>
  <li><ed-text>Is</ed-text></li>
  <li><ed-text>A</ed-text></li>
  <li><ed-text>List</ed-text></li>
</ul>
<ol>
  <li><ed-text>Here</ed-text></li>
  <li><ed-text>Is</ed-text></li>
  <li><ed-text>An</ed-text></li>
  <li><ed-text>Ordered</ed-text></li>
  <li><ed-text>List</ed-text></li>
</ol>