# remark-emoticons

> This [remark][remark] plugin parses ASCII emoticons such as `:D` or shortcodes such as `:smiling-cat:`. It can be configured to parse any shortcode/emoticon you wish.

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

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.3.2 |
| Published | 2024-04-27 |
| First published | 2017-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.7 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-emoticons
- 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-emoticons

## Dependencies (1)

- [is-whitespace-character](https://npm.io/package/is-whitespace-character.md) ^1.0.4

## 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

- 2.3.2 (latest) — 2024-04-27
- 2.3.1 — 2021-02-14
- 2.3.0 — 2020-05-27
- 2.2.3 — 2020-04-16
- 2.2.2 — 2020-01-21
- 2.1.5 — 2019-07-27
- 2.1.4 — 2019-04-14
- 2.1.3 — 2019-02-04
- 2.1.2 — 2018-11-23
- 2.1.1 — 2018-10-04
- 2.1.0 — 2018-09-02
- 2.0.2 — 2018-08-09
- 2.0.1 — 2018-07-22
- 2.0.0 — 2018-07-20
- 1.1.1 — 2018-03-06
- … 26 more at https://npm.io/package/remark-emoticons/versions

## README

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

This [remark][remark] plugin parses ASCII emoticons such as `:D` or shortcodes such as `:smiling-cat:`. It can be configured to parse any shortcode/emoticon you wish.

It introduces a new [MDAST][mdast] node type: "emoticon".

This plugin is compatible with [rehype][rehype], turning the emoticons or shortcodes into HTML `<img>` tags with customizable classes.

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

```javascript
interface emoticon <: Node {
  type: "emoticon";
  value: string;
  data: {
    hName: "img";
    hProperties: {
      src: string;
      alt: string;
      className: string;
    }
  }
}
```

## Syntax

The following Markdown:

```markdown
:D
```

if you configured the plugin with:

```javascript
{
  emoticons: {
    ':D': '/static/smileys/happy.png',
  },
  classes: 'some-smiley foo',
}
```

will produce this AST node:

```javascript
{
  type: "emoticon",
  value: ":D",
  data: {
    hName: "img";
    hProperties: {
      src: '/static/smileys/happy.png';
      alt: ":D";
      className: "some-smiley foo";
    }
  }
}
```

If you use [rehype][rehype] stringifier it will output:

```html
<img src="/static/smileys/happy.png" alt=":D" class="some-smiley foo">
```

## Installation

[npm][npm]:

```bash
npm install remark-emoticons
```

## Usage

Dependencies:

```javascript
const unified = require('unified')
const remarkParse = require('remark-parse')
const stringify = require('rehype-stringify')
const remark2rehype = require('remark-rehype')

const remarkEmoticons = require('remark-emoticons')
```

Usage:

```javascript
unified()
  .use(remarkParse)
  .use(remarkEmoticons, {
   emoticons: {
     ':D': '/static/smileys/happy.png',
   },
   classes: 'some-class'
  })
  .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-emoticons/LICENSE-MIT

[zds]: https://zestedesavoir.com

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

[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-emoticons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._