remark-align

remark-align

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:

LeftAligned

interface LeftAligned <: Parent {
  type: "leftAligned";
  data: {
    hName: "div";
    hProperties: {
      class: string;
    }
  }
}

CenterAligned

interface CenterAligned <: Parent {
  type: "centerAligned";
  data: {
    hName: "div";
    hProperties: {
      class: string;
    }
  }
}

RightAligned

interface RightAligned <: Parent {
  type: "rightAligned";
  data: {
    hName: "div";
    hProperties: {
      class: string;
    }
  }
}

If you are using rehype, the stringified HTML result will be divs with configurable CSS classes.

It is up to you to have CSS rules producing the desired result for these three classes.

Syntax

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>

Installation

npm:

npm install remark-align

Usage

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)

License

MIT © Zeste de Savoir