matchilling / gatsby-remark-emojis Goto Github PK

View Code? Open in Web Editor NEW

30.0 3.0 16.0 23.25 MB

:rocket: Processes emoji in markdown and inlines <img> tags with the corresponding base64 representation of the image.

Home Page: https://www.gatsbyjs.org/

License: GNU General Public License v3.0

JavaScript 95.61% Shell 4.39%

gatsbyjs gatsby-plugin gatsby-transformer markdown emoji

gatsby-remark-emojis's Introduction

Gatsby Remark Emojis

🚀 Processes emoji in markdown and inlines tags with the corresponding base64 representation of the image.

See all available emoji

Install

npm install --save gatsby-remark-emojis

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      // In your gatsby-transformer-remark plugin array
      plugins: [{
        resolve: 'gatsby-remark-emojis',
        options: {
          // Deactivate the plugin globally (default: true)
          active : true,
          // Add a custom css class
          class  : 'emoji-icon',
          // In order to avoid pattern mismatch you can specify
          // an escape character which will be prepended to the
          // actual pattern (e.g. `#:poop:`).
          escapeCharacter : '#', // (default: '')
          // Select the size (available size: 16, 24, 32, 64)
          size   : 64,
          // Add custom styles
          styles : {
            display      : 'inline',
            margin       : '0',
            'margin-top' : '1px',
            position     : 'relative',
            top          : '5px',
            width        : '25px'
          }
        }
      }]
    }
  }
]

License

This distribution is covered by the GNU GENERAL PUBLIC LICENSE, Version 3, 29 June 2007.

Support & Contact

Having trouble with this repository? Check out the documentation at the repository's site or contact [email protected] and we’ll help you sort it out.

Happy Coding

✌️

gatsby-remark-emojis's People

Contributors

Stargazers

Watchers

Forkers

ahmattox crashedmind baobabkoodaa vnys mingry rahuldkjain antonyjm462 madisonkanna dementeey liuweiyibai shan-hua minji1289 jskim096 agne6ka malouloumz

gatsby-remark-emojis's Issues

where's LLAP?

🖖 missing, :spock-hand: on slack, :vulcan_salute: here.

Add flag of the european union

Hey!
Just noticed that :eu: is not supported. If you can let me know whats the source of the existing emojis, I can add it :)

gatsby-remark-emojis for gatsby pages

Can I use this plugin for Gatsby Pages?

Current case

I use your plugin for remark emojis in .md source files and it works awesome 👍!

Using with Gatsby Pages

Here's the deal:

In Gatsby project I have src/pages/ folder structure with pages in it, like index.js, about.js, wroted with jsx syntax.
And if I type some text content like :smiley: it'll render as :smiley: rather then 😃
So, the question is: how we can work with gatsby pages using this plugin?
Maybe it's possible to do that?

I can help with trying to make this feature works. Feel free to get in touch ☺️

alt text missing from the emoji img tags

When the emoji img tags are embedded there is no alt text included. The alt could be set to the code for the emoji, eg. alt=":smile:", or alt="smile emjoi".

Does gatsby-remark-emojis work with gatsby-plugin-mdx?

Hi, I am struggling to get this plugin working with gatsby-plugin-mdx.

Is this option actually supported?

const gatsbyRemarkPlugins = [
  {
    resolve: `gatsby-remark-katex`,
    options: { macros, throwOnError: false },
  },
  `gatsby-remark-images`,
  {
    resolve: `gatsby-remark-emojis`,
    options: {
      // Deactivate the plugin globally (default: true)
      active: true,
      // Add a custom css class
      class: "emoji-icon",
      // Select the size (available size: 16, 24, 32, 64)
      size: 64,
      // Add custom styles
      styles: {
        display: "inline",
        margin: "0",
        "margin-top": "1px",
        position: "relative",
        top: "5px",
        width: "25px",
      },
    },
  },
]

...

module.exports = {
...
  plugins: [
...
   {
      resolve: `gatsby-plugin-mdx`,
      options: {
        defaultLayouts: {
          default: require.resolve(`./src/components/layout.jsx`),
        },
        gatsbyRemarkPlugins,
      },
    },
...
  ],
}

Thanks.