https://github.com/posthtml/posthtml-markdownit
A PostHTML plugin to transform Markdown using markdown-it
https://github.com/posthtml/posthtml-markdownit
html markdown posthtml posthtml-plugin
Last synced: 10 months ago
JSON representation
A PostHTML plugin to transform Markdown using markdown-it
- Host: GitHub
- URL: https://github.com/posthtml/posthtml-markdownit
- Owner: posthtml
- License: mit
- Created: 2020-04-26T12:50:47.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-23T14:52:16.000Z (over 1 year ago)
- Last Synced: 2024-10-29T21:06:06.562Z (over 1 year ago)
- Topics: html, markdown, posthtml, posthtml-plugin
- Language: JavaScript
- Homepage:
- Size: 1.93 MB
- Stars: 8
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
posthtml-markdownit
Transform Markdown to HTML
[![Version][npm-version-shield]][npm]
[![Build][github-ci-shield]][github-ci]
[![License][license-shield]][license]
[![Downloads][npm-stats-shield]][npm-stats]
## Introduction
This PostHTML plugin compiles Markdown to HTML using [markdown-it](https://github.com/markdown-it/markdown-it).
Before:
```xml
# Heading 1
---
Paragraph with some text
_Italic_
**Bold**
- List item 1
- List item 2
- List item 3
```
After:
```html
Heading 1
Paragraph with some text
Italic
Bold
- List item 1
- List item 2
- List item 3
```
## Install
```
npm i -D posthtml posthtml-markdownit
```
## Usage
```js
import posthtml from 'posthtml'
import markdown from 'posthtml-markdownit'
posthtml([
markdown()
])
.process('# Test')
.then(result => console.log(result.html))
//
Test
```
### Importing files
You can import and render Markdown files:
Before:
```xml
# Imported
```
After:
```html
Imported
```
## Syntax
### Tags
Both `` and `` tags are supported.
Before:
```xml
# Heading 1
```
After:
```html
Heading 1
```
By default, the custom tags like `` are replaced with the compiled Markdown. See the [tag attribute](#tag) if you need a wrapping tag around your Markdown content.
### Attributes
You can also use the `markdown` or `md` attributes on an HTML element:
Before:
```html
# Heading 1
```
After:
```html
Heading 1
```
#### `tag`
You can use a `tag` attribute to wrap the resulting markup in a tag:
Before:
```xml
# Heading 1
```
After:
```html
Heading 1
```
#### `inline`
You can mark the content to be rendered inline. This is helpful if you're including a file that will be used as an inline element and don't want the enclosing `p` tags.
Before:
```xml
Imported
```
After:
```html
Imported
```
Instead of:
```html
Imported
```
## Options
### `root`
Type: `string`\
Default: `./`
A path relative to which Markdown files will be [imported](#importing-files).
### `encoding`
Type: `string`\
Default: `utf8`
Encoding for imported Markdown files.
### `markdownit`
Type: `object`\
Default: `{}`
Options passed to the `markdown-it` library. See the [available options](https://github.com/markdown-it/markdown-it#init-with-presets-and-options).
### `plugins`
Type: `array`\
Default: `[]`
Plugins for `markdown-it`.
Example:
```js
import {light as emoji} from 'markdown-it-emoji'
markdown({
plugins: [{
plugin: emoji,
options: {} // Options for markdown-it-emoji
}]
})
```
[npm]: https://www.npmjs.com/package/posthtml-markdownit
[npm-version-shield]: https://img.shields.io/npm/v/posthtml-markdownit.svg
[npm-stats]: http://npm-stat.com/charts.html?package=posthtml-markdownit
[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-markdownit.svg
[github-ci]: https://github.com/posthtml/posthtml-markdownit/actions/workflows/nodejs.yml
[github-ci-shield]: https://github.com/posthtml/posthtml-markdownit/actions/workflows/nodejs.yml/badge.svg
[license]: ./LICENSE
[license-shield]: https://img.shields.io/npm/l/posthtml-markdownit.svg