gatsby-transform-remark - emoji support

[nihgwu]

There are some emoji codes in my markdown file, like :white_check_mark is compiled to :white\n<em>check<\/em>\nmark:.
Right now I replace the compiled code to desired emoji, but I we should add support in remark transform, I want create a plugin to change the content from source-filesystem using node-emoji, then pass to transform-remark, but there is no updateNode action, so I need to delete the node then create a new one with the new content?

[markmichon]

There's a remark-emoji plugin for remark. Perhaps there's a way to incorporate that into a plugin similar to gatsby-remark-katex.
Edit: gatsby-remark-prismjs is probably a better example.

[nihgwu]

@markmichon gatsby-remark-prismjs use the parsed markdown content, I want to modify the content before parsing, or add a remark-emoji plugin to transform-remark to that job

[Rulikkk]

Hi @nihgwu !
Just published gatsby-remark-emoji — please give it a try. Should do just what you ask =)
Source: https://github.com/Rulikkk/gatsby-remark-emoji
NPM: https://www.npmjs.com/package/gatsby-remark-emoji

[nihgwu]

@Rulikkk Great works, how do you know there is mutateSource?

[Rulikkk]

Just checked remark transformer source code.

[nihgwu]

@Rulikkk 👍 really nice catch, I followed your code to write my own plugin, using node-emoji, great thanks

[matchilling]

I've created gatsby-remark-emojis, which inlines emojis as base64 images into the html.

npm install --save gatsby-remark-emojis

[marcinczenko]

Is there a way to use remark-emoji directly as a plugin for gatsby-transformer-remark?

I tried:

{
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
      {
        resolve: 'remark-emoji'
       }
      //...
}

but this does not seem to do anything...

On MDX we can use:

const emoji = require('remark-emoji')
// ...

{
  resolve: 'gatsby-plugin-mdx',
  options: {
    remarkPlugins: [emoji],
  }

and because I already use remark-emoji for MDX I would prefer to use the same for Gatsby-transformer-remark. The above mentioned gatsby-remark-emojis and gatsby-remark-emoji do not seem to use remark-emoji under the hood....

[Rulikkk]

@marcinczenko you can look here https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-remark/src/extend-node-type.js#L128 -- seems this has to be supported by transformer-remark itself... However, since you say this doesn't work, maybe it needs debugging.

Also: if you have MDX in your site -- why don't you just use it for all markdown files?

As for gatsby-remark-emoji not using remark-emoji under the hood -- this was a decision, since

• at development time, remark-emoji didn't support some emojis
• remark-emoji does only :emoji: -> utf conversion
• Emojione allows more conversion types, and more emojis, so I've selected it among multiple other choices

[marcinczenko]

@Rulikkk I appreciate your answer. The only reason I still use gatsby-transformer-remark next to MDX is the support for childMarkdownRemark via content attribute from the frontmatter. I know I can use regular javascript import in MDX, but I still did not have time to see how can I remove the default export at the end of the file being imported (the document I need to include in another document must be pure markdown). I mean this part:

<!-- This default export overrides the default layout ensuring -->
<!--  that the imported component isn't wrapped by other elements -->
export default ({ children }) => (
  <>
    {children}
  </>
)

I expect it is possible by doing something with layouts, but I still did not have time to check it out.

For the emoji, yes, it makes lots of sense to use emojione under the hood. I am currently using gatsby-remark-emoji in my setup. I found it better accommodating to line-height comparing to gatsby-remark-emojis where I have to specify classes, sizes, etc manually to make it looking good in my content - otherwise it works and is also a good option.

I do not have capacity at the moment to (further) debug the transformer - I already checked that the plugin is correctly loaded, and "used" but for some reason it does not render.

Thanks again for your explanation.