Parcel 2 plugin to load markdown file and YAML Front matter

Install the plugin

npm install parcel-transformer-markdown-front-matter --save-dev

.parcelrc

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.md": [ "parcel-transformer-markdown-front-matter" ]
  }
}

Markdown.md:

---
title: My title
---

# Markdown content

Output HTML string

Import your markdown file, and get the HTML content and the yaml front matter properties.

import file from './Markdown.md';

console.log(file.__content) // => Output HTML string.
console.log(file.title) // output title property
document.body.innerHTML = file.__content;

Output Markdown string

// .markedrc
{
  "marked": false
}

import file from './Markdown.md';

console.log(file.__content) // => Output Markdown string.
document.body.innerHTML = file.__content;

Marked can be configured using a .markedrc, .markedrc.js, or marked.config.js file. See the Marked API Reference for details on the available options.

Note: .markedrc.js and marked.config.js are supported for JavaScript-based configuration, but should be avoided when possible because they reduce the effectiveness of Parcel's caching. Use a JSON based configuration format (e.g. .markedrc) instead.

There is a marked configuration that converts markdown to HTML. Otherwise just read the markdown string.

{
  "marked": {
    "breaks": true,
    "pedantic": false,
    "gfm": true,
    "tables": true,
    "sanitize": false,
    "smartLists": true,
    "smartypants": false,
    "xhtml": false
  }
}

MIT

© 2024 François de Metz © 2022 Kenny Wong