Skip to main content

Top level navigation menu

  • home
  • archive
  • tags
  • about
  • feed

custom emoji shortcodes in 11ty with a plugin

posted:
2025.05.18
modified:
2025.05.19
tags:
  • 11ty
  • blog
  • markdown
  • obsidian
  • plugin
  • emoji

hey emoji: neocat_peek i did a thing, here markdown-it-emoji-customizer

it's a plugin for 11ty, as a helper module for markdown-it-emoji, so it's possible to easily have custom emoji/icon shortcodes! emoji: neocat_3c

it:

  • takes in your md library from 11ty
  • scans a dir for custom emoji images
  • makes the definitions (the shortcodes and info about what image the shortcode refers to)
  • optionally also converts shortcodes for standard unicode emoji to their unicode equivalent
  • makes an <img> with custom attributes for the custom emoji, wrapped in a <span> with a custom class (specific to these custom emoji image spans)
  • wraps the unicode emoji that were converted from shortcode (if any) in a <span> with a custom class name (specific to these unicode emoji spans)
  • also includes some (optional) basic css snippet to try to make the custom emoji and unicode emoji a bit more uniform in appearance (at least on my site, on my device lol)
  • returns the modified md library

so when the site is built, if you have some markdown like:
:cat: :arrow_left: *unicode!*
:neocat: *custom!*
you'll get something like:

🐱 ⬅️ unicode!
emoji: neocat custom!

Heart

much thanks and shoutout and meowing to volpeon for making custom emoji sets that are so good i was compelled to create this plugin to use them here! emoji: neocat_heart
(neocat emoji license: CC-BY-NC-SA-4.0)

  • ← previous
    blog - obsidian templates and use

built with Eleventy v3.0.0