# remark-align

> This plugin parses custom Markdown syntax to center- or right-align elements.

Latest version **1.2.15** (published 2024-04-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install remark-align
pnpm add remark-align
yarn add remark-align
bun add remark-align
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.2.15 |
| Published | 2024-04-27 |
| First published | 2017-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 237 |
| Author | Sébastien |
| Maintainers | situphen, talone |
| Keywords | remark |

## Links

- npm: https://www.npmjs.com/package/remark-align
- Repository: https://github.com/zestedesavoir/zmarkdown.git#master
- Homepage: https://github.com/zestedesavoir/zmarkdown/tree/master#readme
- Issues: https://github.com/zestedesavoir/zmarkdown/issues
- npm.io page: https://npm.io/package/remark-align

## Dependencies (1)

- [space-separated-tokens](https://npm.io/package/space-separated-tokens.md) ^1.1.5

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.2.15 (latest) — 2024-04-27
- 1.2.14 — 2021-02-14
- 1.2.13 — 2020-02-03
- 1.2.12 — 2020-01-21
- 1.2.10 — 2020-01-21
- 1.2.9 — 2019-08-29
- 1.2.8 — 2019-07-27
- 1.2.7 — 2019-04-14
- 1.2.6 — 2019-02-04
- 1.2.5 — 2018-11-23
- 1.2.4 — 2018-10-04
- 1.2.3 — 2018-08-09
- 1.2.2 — 2018-07-22
- 1.2.1 — 2018-07-20
- 1.2.0 — 2018-03-06
- … 32 more at https://npm.io/package/remark-align/versions

## README

# remark-align [![Build Status][build-badge]][build-status] [![Coverage Status][coverage-badge]][coverage-status]

This plugin parses custom Markdown syntax to center- or right-align elements.

## AST node (see [mdast][mdast] specification)

It adds three new node types, described below, to the [mdast][mdast] produced by [remark][remark]:

### `LeftAligned`

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

### `CenterAligned`

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

### `RightAligned`

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

If you are using [rehype][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.

## Syntax

Alignment is done by wrapping something in arrows indicating the alignment:

```markdown
->paragraph<-

->paragraph->
```

produces:

```html
<div class="some-class"><p>paragraph</p></div>
<div class="some-other-class"><p>paragraph</p></div>
```

## Installation

[npm][npm]:

```bash
npm install remark-align
```

## Usage

Dependencies:

```javascript
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:

```javascript
unified()
  .use(remarkParse)
  .use(remarkAlign, {
    left: 'align-left',
    center: 'align-center',
    right: 'align-right',
  })
  .use(remark2rehype)
  .use(stringify)
```

## License

[MIT][license] © [Zeste de Savoir][zds]

<!-- Definitions -->

[build-badge]: https://img.shields.io/travis/zestedesavoir/zmarkdown.svg

[build-status]: https://travis-ci.org/zestedesavoir/zmarkdown

[coverage-badge]: https://img.shields.io/coveralls/zestedesavoir/zmarkdown.svg

[coverage-status]: https://coveralls.io/github/zestedesavoir/zmarkdown

[license]: https://github.com/zestedesavoir/zmarkdown/blob/master/packages/remark-align/LICENSE-MIT

[zds]: https://zestedesavoir.com

[npm]: https://www.npmjs.com/package/remark-align

[mdast]: https://github.com/syntax-tree/mdast/blob/master/readme.md

[remark]: https://github.com/remarkjs/remark

[rehype]: https://github.com/rehypejs/rehype

---
_Source: https://npm.io/package/remark-align · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._