/asciidoctor-emoji

Asciidoctor.js extension to add emoji in your document!

Primary LanguageJavaScriptMIT LicenseMIT

🚀 Asciidoctor Emoji Extension

Travis build status npmjs version

An extension for Asciidoctor.js that turns emoji:heart[] into ❤️ !

Install

Node.js

Install the dependencies:

$ npm install asciidoctor.js asciidoctor-emoji

Create a file named emoji.js with following content and run it:

const asciidoctor = require('asciidoctor.js')()
const emoji = require('asciidoctor-emoji')

const input = 'I emoji:heart[1x] Asciidoctor.js!'

emoji.register(asciidoctor.Extensions)
console.log(asciidoctor.convert(input)) // (1)

const registry = asciidoctor.Extensions.create()
emoji.register(registry)
console.log(asciidoctor.convert(input, {'extension_registry': registry})) // (2)
  1. Register the extension in the global registry

  2. Register the extension in a dedicated registry

Browser

Install the dependencies:

$ npm install asciidoctor.js asciidoctor-emoji

Create a file named emoji.html with the following content and open it in your browser:

<html>
  <head>
    <script src="node_modules/asciidoctor.js/dist/browser/asciidoctor.js"></script>
    <script src="node_modules/asciidoctor-emoji/dist/browser/asciidoctor-emoji.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script>
      var input = 'I emoji:heart[1x] Asciidoctor.js!'

      var asciidoctor = Asciidoctor()
      var emoji = AsciidoctorEmoji

      const registry = asciidoctor.Extensions.create()
      emoji.register(registry)
      var result = asciidoctor.convert(input, {'extension_registry': registry})
      document.getElementById('content').innerHTML = result
    </script>
  </body>
</html>
  1. Register the extension in the global registry

  2. Register the extension in a dedicated registry

Usage

Use emoji: followed by the name of your emoji (and don’t forget the square brackets). For instance wink:

emoji:wink[]

Additionally you can configure the size of an emoji. By default, the size is 24px but you can use one of the following:

  • 1x (17px)

  • lg (24px)

  • 2x (34px)

  • 3x (50px)

  • 4x (68px)

  • 5x (85px)

If you want a really big 🐻, use:

emoji:bear[5x]

You can also specify a size in pixel 🎉

emoji:tada[42px]

How ?

This extension is using Twemoji from Twitter. The emoji inline macro is converted into an <image> that points to a remote SVG:

emoji:beetle[]
<img class="emoji" draggable="false" height="24px" width="24px" src="https://twemoji.maxcdn.com/2/svg/1f41e.svg" />