Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/indoorequal/parcel-transformer-markdown-front-matter
📦@parcel-bundler plugin to load markdown files and YAML Front Matter
https://github.com/indoorequal/parcel-transformer-markdown-front-matter
markdown markdown-front parcel-bundler parcel-plugin parceljs
Last synced: about 2 months ago
JSON representation
📦@parcel-bundler plugin to load markdown files and YAML Front Matter
- Host: GitHub
- URL: https://github.com/indoorequal/parcel-transformer-markdown-front-matter
- Owner: indoorequal
- License: mit
- Created: 2022-02-24T15:58:08.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-10-21T18:58:54.000Z (3 months ago)
- Last Synced: 2024-10-23T08:19:57.015Z (2 months ago)
- Topics: markdown, markdown-front, parcel-bundler, parcel-plugin, parceljs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/parcel-transformer-markdown-front-matter
- Size: 6.16 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# parcel-transformer-markdown-front-matter
[](https://www.npmjs.com/package/parcel-transformer-markdown-front-matter)
[](https://github.com/indoorequal/parcel-transformer-markdown-front-matter/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/parcel-transformer-markdown-front-matter)
A [**`Parcel 2`**](https://parceljs.org/) plugin to load markdown file with YAML Front matter. It uses [Marked][] to render markdown.
## Usage
Install the plugin
```bash
npm install parcel-transformer-markdown-front-matter --save-dev
```
Add `parcel-transformer-markdown-front-matter` transformer to the `.parcelrc`
```js
{
"extends": "@parcel/config-default",
"transformers": {
"*.md": [ "parcel-transformer-markdown-front-matter" ]
}
}
```
`Markdown.md`:
```markdown
---
title: My title
---
# Markdown content
```
**Output HTML string**
Import your markdown file, and get the HTML content and the yaml front matter properties.
```js
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**
```js
// .markedrc
{
"marked": false
}
```
```js
import file from './Markdown.md';
console.log(file.__content) // => Output Markdown string.
document.body.innerHTML = file.__content;
```
## Configuration
[Marked](https://github.com/markedjs/marked) can be configured using a `.markedrc`, `.markedrc.js`, or `marked.config.js` file. See the [Marked API Reference](https://marked.js.org/using_advanced#options) 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.
```js
{
"marked": {
"breaks": true,
"pedantic": false,
"gfm": true
}
}
```
### Marked extensions
To use [marked extensions](https://marked.js.org/using_advanced#extensions), you must use a javascript configuration file. Install your extensions and instanciate in the configuration.
```javascript
/// .markedrc.js
const { gfmHeadingId } = require('marked-gfm-heading-id');
module.exports = {
extensions: [gfmHeadingId({ prefix: 'test-' })],
};
```
## License
MIT
© 2024 François de Metz
© 2022 [Kenny Wong](https://wangchujiang.com)
[marked]: https://marked.js.org/