This plugin parses custom Markdown syntax to center- or right-align elements.
AST node (see mdast specification)
It adds three new node types, described below, to the mdast produced by remark:
interface LeftAligned <: Parent {
type: "leftAligned";
data: {
hName: "div";
hProperties: {
class: string;
}
}
}
interface CenterAligned <: Parent {
type: "centerAligned";
data: {
hName: "div";
hProperties: {
class: string;
}
}
}
interface RightAligned <: Parent {
type: "rightAligned";
data: {
hName: "div";
hProperties: {
class: string;
}
}
}
If you are using rehype, the stringified HTML result will be div
s with configurable CSS classes.
It is up to you to have CSS rules producing the desired result for these three classes.
Alignment is done by wrapping something in arrows indicating the alignment:
->paragraph<-
->paragraph->
produces:
<div class="some-class"><p>paragraph</p></div>
<div class="some-other-class"><p>paragraph</p></div>
npm:
npm install remark-align
Dependencies:
const unified = require('unified')
const remarkParse = require('remark-parse')
const stringify = require('rehype-stringify')
const remark2rehype = require('remark-rehype')
const remarkAlign = require('remark-align')
Usage:
unified()
.use(remarkParse)
.use(remarkAlign, {
left: 'align-left',
center: 'align-center',
right: 'align-right',
})
.use(remark2rehype)
.use(stringify)