Remark-align NPM

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)