https://github.com/madiodio/remark-twemoji

Remark plugin to replace your emoji by using Twemoji.
https://github.com/madiodio/remark-twemoji

emoji mdx remark remark-plugin remark-twemoji twemoji

Last synced: 2 months ago
JSON representation

Remark plugin to replace your emoji by using Twemoji.

• Host: GitHub
• URL: https://github.com/madiodio/remark-twemoji
• Owner: madiodio
• Created: 2018-05-15T00:01:50.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-08-05T05:23:48.000Z (over 1 year ago)
• Last Synced: 2024-10-01T05:21:43.482Z (3 months ago)
• Topics: emoji, mdx, remark, remark-plugin, remark-twemoji, twemoji
• Language: JavaScript
• Homepage:
• Size: 107 KB
• Stars: 10
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# remark-twemoji

[![prettier][prettier-image]][prettier-url]

[![npm][npm-image]][npm-url]

[![travis][travis-image]][travis-url]

[prettier-image]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square

[prettier-url]: https://github.com/prettier/prettier

[npm-image]: https://img.shields.io/npm/v/remark-twemoji.svg

[npm-url]: https://npmjs.org/package/remark-twemoji

[travis-url]: https://travis-ci.org/madiodio/remark-twemoji

[travis-image]: https://img.shields.io/travis/madiodio/remark-twemoji/master.svg

Remark plugin to replace your emoji by using [twemoji](https://github.com/twitter/twemoji).

## Install

> Note: Although it is marked as a [peerDependency](https://docs.npmjs.com/files/package.json#peerdependencies), [twemoji](https://github.com/twitter/twemoji) is required to work with this module.

```bash

npm install --dev remark-twemoji twemoji 

```

## Usage

```js

remark().use(remarkTwemoji, { options });

```

1.  Basic usage

```js

const remark = require("remark");

const twemoji = require("remark-twemoji");

const doc = "😂";

remark()

  .use(twemoji)

  .process(doc, function(err, file) {

    console.log(String(file));

  });

// => 

```

2.  Usage with [mdx](https://github.com/mdx-js/mdx) (basically what this plugin has been for):

Somewhere in your webpack config file:

```js

const webpack = require("webpack");

const twemoji = require("remark-twemoji");

...{

  test: /\.md$/,

  exclude: /node_modules/,

  use: [

    "babel-loader",

    {

      loader: "@mdx-js/loader",

      options: {

        mdPlugins: [twemoji],

        isReact: true

      }

    }

  ]

},...

```

For more informations, check [this section](https://github.com/mdx-js/mdx#plugins) on the mdx docs.

## Options

### `options.isReact` (boolean)

When using this plugin in a React setup, Twemoji will parse a dom node containing the attribute `class` instead of `className` which causes a warning at runtime. So if you're using React in your setup, use this to instruct the plugin to replace `class` by `className` in the final node, eg: ...`[twemoji, { isReact: true }]`...

## Other options

### `Object`

```js

  {

    callback: Function,   // default the common replacer

    attributes: Function, // default returns {}

    base: string,         // default MaxCDN

    ext: string,          // default ".png"

    className: string,    // default "emoji"

    size: string|number,  // default "36x36"

    folder: string        // in case it's specified

                          // it replaces .size info, if any

  }

```

These are the options you can pass to this plugin as the twemoji options, you can read more about them [here](https://github.com/twitter/twemoji#object-as-parameter).

## Inspirations

* [gatsby-remark-twemoji](https://github.com/btnwtn/gatsby-remark-twemoji)

* [remark-emoji](https://github.com/rhysd/remark-emoji/)

## License

MIT