https://github.com/rubenarakelyan/rehype-custom-emoji
Rehype plugin to support custom emoji
https://github.com/rubenarakelyan/rehype-custom-emoji
javsscript rehype rehype-plugin
Last synced: about 2 months ago
JSON representation
Rehype plugin to support custom emoji
- Host: GitHub
- URL: https://github.com/rubenarakelyan/rehype-custom-emoji
- Owner: rubenarakelyan
- License: mit
- Created: 2024-07-03T13:23:44.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-07-03T13:47:54.000Z (11 months ago)
- Last Synced: 2025-03-28T19:19:17.912Z (2 months ago)
- Topics: javsscript, rehype, rehype-plugin
- Language: TypeScript
- Homepage:
- Size: 42 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @rubenarakelyan/rehype-custom-emoji
[![CI][ci-badge]][ci]
[![npm][npm-badge]][npm]
[@rubenarakelyan/rehype-custom-emoji][npm] is a [rehype](https://github.com/rehypejs/rehype) plugin to replace `:emoji:`
with custom-defined images.
Heavily inspired by [remark-emoji](https://github.com/rhysd/remark-emoji).
## Usage
```
rehype().use(emoji, options);
```
```javascript
import { rehype } from "rehype";
import customEmoji from "@rubenarakelyan/rehype-custom-emoji";
const doc = "Emojis in this text will be replaced: :dog:";
const processor = rehype().use(customEmoji, {
emoji: {
dog: "/images/dog.png"
}
});
const file = await processor.process(doc);
console.log(String(file));
// => Emojis in this text will be replaced: 
```
Remember to import the `global.css` stylesheet to apply some basic styling to your custom emoji. This mostly ensures that
the emoji are the same size as the surrounding text so they act like real emoji.
If you are using the TailwindCSS `typography` extension's `prose` styling, you will need some extra CSS to remove the top
and bottom margins it applies to all images.
## Options
### `options.emoji`
An object where the keys are the emoji shortcodes, and values are paths to the custom emoji images. For example,
```javascript
{
dog: "/images/dog.png"
}
```
will register the shortcode `:dog:`, which will be replaced with an HTML `![]()
` tag pointing to `/images/dog.png`.
## Licence
[MIT licence](LICENSE).
[ci-badge]: https://github.com/rubenarakelyan/rehype-custom-emoji/actions/workflows/ci.yml/badge.svg
[ci]: https://github.com/rubenarakelyan/rehype-custom-emoji/actions/workflows/ci.yml
[npm-badge]: https://badge.fury.io/js/rubenarakelyan%2Frehype-custom-emoji.svg
[npm]: https://www.npmjs.com/package/@rubenarakelyan/rehype-custom-emoji