Core Plugins

Emoji

Comark plugin for converting emoji shortcodes like :smile: into emoji characters.

The comark/plugins/emoji plugin automatically converts emoji shortcodes (e.g., :smile:) into their corresponding emoji characters (😄). This provides a convenient way to include emojis in your markdown content using readable text-based names.

Basic Usage

The emoji plugin is included in comark core package and available under comark/plugins/emoji path.

Registering the Plugin

parse.ts

import { parse } from 'comark'
import emoji from 'comark/plugins/emoji'

const result = await parse(content, {
  plugins: [emoji()]
})

In Markdown

Simply use emoji shortcodes wrapped in colons:

I love using Comark :heart: :rocket:

Great job! :thumbsup: :tada:

Working hard :fire: :muscle:

I love using Comark ❤️ 🚀

Great job! 👍 🎉

Working hard 🔥 💪

Examples

Basic Emoji Usage

parse.ts

import { parse } from 'comark'
import emoji from 'comark/plugins/emoji'

const content = `
# Welcome :wave:

This plugin supports **200+ emojis** :sparkles:

- :white_check_mark: Easy to use
- :rocket: Fast parsing
- :heart: Community favorite
`

const result = await parse(content, {
  plugins: [emoji()]
})

// The AST will contain emoji characters instead of shortcodes

Common Emoji Categories

Smileys & People

:smile: :grin: :laughing: :wink: :heart_eyes: :thinking:

😄 😁 😆 😉 😍 🤔

Hand Gestures

:thumbsup: :thumbsdown: :clap: :pray: :muscle: :wave:

👍 👎 👏 🙏 💪 👋

Hearts & Symbols

:heart: :yellow_heart: :green_heart: :blue_heart: :purple_heart:

❤️ 💛 💚 💙 💜

Objects & Icons

:fire: :sparkles: :star: :zap: :rocket: :bulb:

🔥 ✨ ⭐ ⚡ 🚀 💡

Food & Drink

:pizza: :hamburger: :coffee: :beer: :cake: :apple:

🍕 🍔 ☕ 🍺 🍰 🍎

Animals & Nature

:dog: :cat: :bear: :panda_face: :tiger: :lion:

🐶 🐱 🐻 🐼 🐯 🦁

Activities & Sports

:soccer: :basketball: :trophy: :medal: :checkered_flag:

⚽ 🏀 🏆 🏅 🏁

Travel & Places

:airplane: :rocket: :car: :ship: :train:

✈️ 🚀 🚗 🚢 🚂

Symbols & Marks

:white_check_mark: :x: :warning: :question: :exclamation:

✅ ❌ ⚠️ ❓ ❗

Using with Vue

App.vue

<script setup lang="ts">
import { Comark } from '@comark/vue'
import emoji from 'comark/plugins/emoji'

const content = `
# Project Status :rocket:

- :white_check_mark: Tests passing
- :construction: Work in progress
- :sparkles: New features
`

const options = {
  plugins: [emoji()]
}
</script>

<template>
  <Comark :options="options">{{ content }}</Comark>
</template>

Using with React

App.tsx

import { Comark } from '@comark/react'
import emoji from 'comark/plugins/emoji'

const content = `
# Project Status :rocket:

- :white_check_mark: Tests passing
- :construction: Work in progress
- :sparkles: New features
`

const options = {
  plugins: [emoji()]
}

export default function App() {
  return <Comark options={options}>{content}</Comark>
}

Supported Emojis

The plugin supports 200+ popular emojis including:

Smileys & Emotions: :smile:, :heart_eyes:, :thinking:, :cry:, :joy:
People & Gestures: :thumbsup:, :clap:, :wave:, :muscle:, :pray:
Hearts: :heart:, :yellow_heart:, :blue_heart:, :purple_heart:, :broken_heart:
Animals: :dog:, :cat:, :lion:, :bear:, :penguin:, :fish:
Food: :pizza:, :hamburger:, :coffee:, :beer:, :cake:, :apple:
Activities: :soccer:, :basketball:, :trophy:, :guitar:, :art:
Travel: :airplane:, :rocket:, :car:, :train:, :ship:
Objects: :fire:, :sparkles:, :bulb:, :book:, :computer:, :phone:
Symbols: :white_check_mark:, :x:, :warning:, :star:, :100:
Nature: :tree:, :flower:, :sunflower:, :rainbow:, :sunny:

Emoji Aliases

Some emojis have multiple shortcodes:

:thumbsup: or :+1:      → 👍
:thumbsdown: or :-1:    → 👎
:satisfied: or :laughing: → 😆
:punch: or :facepunch:  → 👊

API Reference

`emoji(): ComarkPlugin`

Creates an emoji conversion plugin.

Parameters: None

Returns: A Comark plugin that converts emoji shortcodes to emoji characters.

Features:

Supports :emoji_name: syntax
O(1) emoji lookup using Map
200+ popular emojis
Emoji name validation (only allows a-z, A-Z, 0-9, _, -, +)
No false positives (validates complete syntax)

How It Works

Scans for : characters in the text
Extracts the emoji name between colons (e.g., :smile:)
Validates the emoji name format
Looks up the emoji character in a Map
Replaces the shortcode with the actual emoji character

The parser uses O(1) Map lookups for performance and simple string scanning without regex.

Use Cases

Documentation - Add visual markers to documentation

:white_check_mark: Completed
:construction: In Progress
:x: Blocked

Status Indicators - Show project status

Build Status: :white_check_mark:
Coverage: 95% :fire:

Social Content - Make content more engaging

Welcome to our community! :wave: :heart:

Task Lists - Enhance task list readability

- :white_check_mark: Setup project
- :construction: Write docs
- :bulb: Add examples

Guides & Tutorials - Add visual cues

:warning: **Important**: Always backup your data
:bulb: **Tip**: Use keyboard shortcuts
:rocket: **Pro Tip**: Try the advanced mode

Notes

Emoji shortcodes must be surrounded by colons (:name:)
Invalid emoji names are left as-is in the output
The plugin only recognizes exact emoji names (case-sensitive)
Emoji characters are inserted as Unicode text
Works seamlessly with other markdown features and plugins