Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ashur/eleventy-plugin-emoji-shortcodes

Transform emoji shortcodes to accessible elements
https://github.com/ashur/eleventy-plugin-emoji-shortcodes

eleventy eleventy-plugin emoji

Last synced: 11 days ago
JSON representation

Transform emoji shortcodes to accessible elements

Awesome Lists containing this project

README

        

# eleventy-plugin-emoji-shortcodes

Transform [emoji shortcodes](https://emojipedia.org/shortcodes/) to accessible elements.

For example, the following Markdown:

```markdown
who called them “dad jokes” instead of “popcorn”? :drum:
```

would be rendered as:

```html

who called them “dad jokes” instead of “popcorn”? 🥁


```

Transformation happens after templates are rendered to HTML, so all Eleventy template syntaxes are supported.

> See the [gemoji project](https://github.com/wooorm/gemoji/blob/7.1.0/index.js#L14570) for details on supported shortcode strings.

## Usage

To install this plugin, run the following command at the root of your Eleventy project:

```shell
npm install --save @aaashur/eleventy-plugin-emoji-shortcodes
```

Next, include the following in your [Eleventy config file](https://www.11ty.dev/docs/config/):

```javascript
const emojiShortcodes = require("@aaashur/eleventy-plugin-emoji-shortcodes");

module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(emojiShortcodes);
};
```

## Plugin Options

| Option | Type |
| :-- | :-- |
| `class` | string |

To set a class name (or names), set the `class` option when registering the plugin:

```javascript
eleventyConfig.addPlugin(emojiShortcodes, { class: 'emoji' });
```

```
:popcorn:
```

```html
🍿
```