parcel-transformer-markdown-front-matter-highlighted

A Parcel 2 plugin to load markdown file with YAML Front matter and code whitch is want to highlighted. It uses [Marked][https://www.npmjs.com/package/marked] and Prism.js to render markdown.

Demonstration

npm i yarn # If you don't have
git cline git@github.com:synquery/parcel-transformer-markdown-front-matter-highlighted.git
cd parcel-transformer-markdown-front-matter-highlighted
yarn install
yarn build
yarn serve-example # => http://localhost:1234 provides the transform result of example/web3js_quickstart.md .

Usage

Install the plugin

npm i @synquery/parcel-transformer-markdown-front-matter-highlighted --save-dev

yarn add @synquery/parcel-transformer-markdown-front-matter-highlighted --dev

Add @synquery/parcel-transformer-markdown-front-matter-highlighted transformer to the .parcelrc

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

!! CAUTION !! Parcel2 should specify multiple extentions if you set key with bracket: "{ }".

❌ Not working

  "transformers": {
    "*.{md}": [ "@synquery/parcel-transformer-markdown-front-matter-highlighted" ]
  }

⭕️ working

  "transformers": {
    "*.{md,markdown}": [ "@synquery/parcel-transformer-markdown-front-matter-highlighted" ]
  }

mydoc.md:

---
title: Web3.js
sidebar_position: 1
sidebar_label: 'Mastering Providers'
---
\`\`\`typescript title='IPC, HTTP and WS provider'
import { Web3 } from 'web3';
import { IpcProvider } from 'web3-providers-ipc';

// highlight-next-line
// IPC provider
const web3 = new Web3(new IpcProvider('/Library/Ethereum/geth.ipc'));
\`\`\`

Output HTML string

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

import file from './mydoc.md';
document.body.innerHTML = file.__content;

Output Markdown string

// .markedrc
{
  "marked": false
}

import file from './mydoc.md';
document.body.innerHTML = file.__content; // => Output Markdown string.

Configuration

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
  }
}

Marked extensions

To use marked extensions, you must use a javascript configuration file. Install your extensions and instanciate in the configuration.

/// .markedrc.js
const { gfmHeadingId } = require('marked-gfm-heading-id');

module.exports = {
 extensions: [gfmHeadingId({ prefix: 'test-' })],
};

License

MIT