madiodio / remark-twemoji

Remark plugin to replace your emoji by using Twemoji.

remark-twemoji

Remark plugin to replace your emoji by using twemoji.

Install

Note: Although it is marked as a peerDependency, twemoji is required to work with this module.

npm install --dev remark-twemoji twemoji 

Usage

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

1. Basic usage

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

const doc = "😂";
remark()
  .use(twemoji)
  .process(doc, function(err, file) {
    console.log(String(file));
  });
// => <img class="emoji" draggable="false" alt="😂" src="https://twemoji.maxcdn.com/2/128x128/1f602.png" title="😂"/>

2. Usage with mdx (basically what this plugin has been for):

Somewhere in your webpack config file:

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

  {
    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.

Inspirations

• gatsby-remark-twemoji
• remark-emoji

License

MIT

remark-twemoji's Issues

remark-twemoji is not installed?

I'm trying to use remark-twemoji in my Nuxt.js project. However, I'm getting a warning in the console during yarn generate, even after I installed remark-twemoji. No other Remark plugins I installed give errors.

Steps to reproduce:

1. yarn add --dev remark-twemoji
   Output:

   [...]
   success Saved lockfile.
   success Saved 1 new dependency.
   info Direct dependencies
   └─ [email protected]
   info All dependencies
   └─ [email protected]
   Done in 62.47s.
   

2. yarn generate

    WARN  remark-twemoji is not installed
   

Relevant part of my package.json after install:

{
    "devDependencies": {
    "remark-twemoji": "^0.1.1"
  }
}

Relevant part of my nuxt.config.js:

   content: {
        markdown: {
            plugins: [
                'remark-twemoji',
            ],
        },
    },

Running dir node_modules\remark-twemoji gives:

31.05.2020.  13:28    <DIR>          .
31.05.2020.  13:28    <DIR>          ..
31.05.2020.  13:09             1.489 index.js
31.05.2020.  13:27    <DIR>          node_modules
31.05.2020.  13:09             1.125 package.json
31.05.2020.  13:09             2.781 readme.md

Getting an undefined wrapper

No extra settings. How to I remove that?

Using remark-twemoji with gatsby mdx

I'm trying to use this plugin with gatsby-plugin-mdx
Here's what tha portion of the gatsby-config.js looks like:

    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        defaultLayouts: {
          default: path.resolve("src/templates/md.js"),
          posts: path.resolve("src/templates/post.js"),
        },
        gatsbyRemarkPlugins: [
          `gatsby-remark-images`,
          `gatsby-remark-prismjs`,
        ],
        remarkPlugins: [require(`remark-twemoji`)],
      },
    },

And... well it works... sorta.

The images are far too large for the size of the text.
For some extra context, here's what a pseudo paragraph looks like:

remark@next (13)

Hi!

remark is switching to a new parser internally (micromark, see remarkjs/remark#536 for more info).
From a quick glance at the code, it seems this plugin should be fine. However, it would be good to check that in the future (there is 13.0.0-alpha.0 published now, and one or two more will come before the release)