{"id":28255161,"url":"https://github.com/actuallysomecat/markdown-it-emoji-customizer","last_synced_at":"2026-04-11T08:06:14.816Z","repository":{"id":294094523,"uuid":"985917721","full_name":"actuallysomecat/markdown-it-emoji-customizer","owner":"actuallysomecat","description":"A helper module for markdown-it-emoji (as used in 11ty) that enables the use of custom emoji shortcodes defined by scanning a path for emoji images, definition merging or overwriting, custom attributes, and configurable rendering options.","archived":false,"fork":false,"pushed_at":"2025-05-18T22:02:15.000Z","size":89,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-18T23:19:25.529Z","etag":null,"topics":["11ty","eleventy","emoji","markdown","markdown-it","markdown-it-plugins"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/actuallysomecat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-18T19:36:57.000Z","updated_at":"2025-05-18T22:02:18.000Z","dependencies_parsed_at":"2025-05-18T23:30:04.850Z","dependency_job_id":null,"html_url":"https://github.com/actuallysomecat/markdown-it-emoji-customizer","commit_stats":null,"previous_names":["actuallysomecat/markdown-it-emoji-customizer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/actuallysomecat/markdown-it-emoji-customizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actuallysomecat%2Fmarkdown-it-emoji-customizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actuallysomecat%2Fmarkdown-it-emoji-customizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actuallysomecat%2Fmarkdown-it-emoji-customizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actuallysomecat%2Fmarkdown-it-emoji-customizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/actuallysomecat","download_url":"https://codeload.github.com/actuallysomecat/markdown-it-emoji-customizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actuallysomecat%2Fmarkdown-it-emoji-customizer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260114276,"owners_count":22960866,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty","eleventy","emoji","markdown","markdown-it","markdown-it-plugins"],"created_at":"2025-05-19T21:12:46.418Z","updated_at":"2026-04-11T08:06:09.789Z","avatar_url":"https://github.com/actuallysomecat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Markdown-It-Emoji Customizer\n\n- [Installation](#installation)\n- [Options](#options)\n- [Options Details \u0026 Examples](#options-details-and-examples)\n- [Scanning for Custom Emoji Images](#scanning-for-custom-emoji-images)\n- [My Use with Obsidian](#my-use-with-obsidian)\n- [Credits](#credits)\n\n---\n\nThis is a helper module for [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji), designed primarily as an [11ty](https://11ty.dev) plugin, that enhances functionality by enabling the use of custom emoji shortcodes, defined by scanning a path for emoji images and building the definitions, emoji definition merging/overwriting/selection (integrating custom emoji definitions with the standard unicode sets from `markdown-it-emoji` if desired), and options for customizing the generated custom emoji and unicode emoji HTML elements.\n\nIn practice, it can [scan a provided path for custom emoji](#scanning-for-custom-emoji-images) and build the definitions, lets you configure the [`\u003cimg\u003e` attributes for the custom emoji](#customemojiimgattributes), configure class names for both the [custom emoji `\u003cspan\u003e` class](#customemojispanclass) and the [unicode emoji `\u003cspan\u003e` class](#unicodeemojispanclass) (all of which can help with [styling](#styling)), and more! It's also intended to be compatible with the Obsidian plugin [obsidian-icon-shortcodes](https://github.com/aidenlx/obsidian-icon-shortcodes) (see [my use with Obsidian](#my-use-with-obsidian) for more info!)\n\nThis plugin includes a variety of [options](#options) for flexibility, all with sensible defaults. See [Options Details and Examples](#options-details-and-examples) for more info.\n\n---\n\n## Demo\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./_README_images/demo.png\" alt=\"demo of what the plugin does, showing source markdown with raw shortcodes (custom and unicode) and the built page with rendered emoji (custom and unicode)\"/\u003e\n\u003c/p\u003e\n\n\u003e [!IMPORTANT]\n\u003e - This plugin **does not** include any custom emoji images!\n\u003e   - (see [scanning for custom emoji images](#scanning-for-custom-emoji-images))\n\n### Rendered HTML\nThe rendered HTML from this plugin (with default [options](#options)) for unicode and custom emoji shortcodes is like:\n```html\n\u003cspan class=\"unicode-emoji--span\"\u003e🐱\u003c/span\u003e\n\u003cspan class=\"custom-emoji--span\"\u003e\u003cimg src=\"/img/emoji/neocat.png\" alt=\"emoji: neocat\" class=\"custom-emoji--img\" /\u003e\u003c/span\u003e\n```\n\n---\n\n## Installation\n\u003e **Note**: This project declares `markdown-it-emoji` as a peer dependency, so be sure to have it installed in your project!\n\u003e\n\u003e The first installation method below installs `markdown-it-emoji` along with this plugin, if needed.\n\nInstall this plugin (along with [`markdown-it-emoji`](https://github.com/markdown-it/markdown-it-emoji)) in your project with:\n```bash\nnpm install markdown-it-emoji github:actuallysomecat/markdown-it-emoji-customizer\n```\n*or* add it manually to your `package.json` dependencies: \n```json\n{\n  \"dependencies\": {\n    \"markdown-it-emoji-customizer\": \"github:actuallysomecat/markdown-it-emoji-customizer\"\n  }\n}\n```\nthen run `npm install` in your project directory.\n\n\u003e [!WARNING]\n\u003e If installing manually (the second method, adding it to `package.json`), ensure that `markdown-it-emoji` is installed in your project as well! You don't need to import `markdown-it-emoji` or apply it in your markdown `.use()` chain in the 11ty config, this plugin will just automatically make use of the installed `markdown-it-emoji`.\n\n### 11ty config (using `addPlugin`)\nIn your 11ty config (`eleventy.config.js`), where you set up your markdown-it chain and library, add this plugin (with `addPlugin()`) **before** setting the library with `setLibrary()`, like:\n```js\nimport MarkdownIt from 'markdown-it'\nimport markdownItEmojiCustomizer from 'markdown-it-emoji-customizer'\n// NOTE: you do not need to `import` markdown-it-emoji! just have it installed.\n\n// ... other 11ty configuration ...\n\n// create the markdown-it instance, configuring as typical with any plugins:\nconst md = new MarkdownIt(mdOptions)\n  .use(someMarkdownItPlugin)\n  // ... any additional plugins ...\n\n// prepare the options for markdown-it-emoji-customizer\n// only the required `md` is provided here, the rest of the options will use defaults\n// (see Options in readme for option availability and their defaults)\nconst emojiOptions = { md }\n\n// add the plugin using the options\n// NOTE: do this before calling `setLibrary()`!\neleventyConfig.addPlugin(markdownItEmojiCustomizer, emojiOptions)\n\n// then set the newly modified markdown library:\neleventyConfig.setLibrary(\"md\", md)\n\n  // ... rest of eleventy.config.js ...\n```\n\n---\n\n## Options\n\n| Option                                                | Type                                                                     | Default                 |\n|-------------------------------------------------------|--------------------------------------------------------------------------|-------------------------|\n| [md](#md)                                             | markdown-it instance                                                     | --                      |\n| [emojiDir](#emojidir)                                 | `string`                                                                 | `\"./public/img/emoji/\"` |\n| [baseUrl](#baseurl)                                   | `string`                                                                 | `\"/img/emoji/\"`         |\n| [mergeDefs](#mergedefs)                               | `boolean`                                                                | `true`                  |\n| [baseUnicodeEmojiSet](#baseunicodeemojiset)           | `string`                                                                 | `\"full\"`                |\n| [customEmojiImgAttributes](#customemojiimgattributes) | `object{}` or [`function()`](#example-customemojiimgattributes-function) | `{}`                    |\n| [customEmojiSpanClass](#customemojispanclass)         | `string`                                                                 | `\"custom-emoji--span\"`   |\n| [unicodeEmojiSpanClass](#unicodeemojispanclass)       | `string`                                                                 | `\"unicode-emoji--span\"`  |\n| [shortcuts](#shortcuts)                               | `boolean` or `object{}`                                                  | `false`                 |\n| [mergeShortcuts](#mergeshortcuts)                     | `boolean`                                                                | `true`                  |\n| [allowedEmoji](#allowedemoji)                         | `string[]`                                                               | undefined               |\n\n\u003e [!TIP]\n\u003e\n\u003e **Copypaste-friendly default options object template**\n\u003e \n\u003e Any of these options (**other than `md`**) that are omitted in your custom options object will use their default value. Custom options get merged over the defaults.\n\u003e\n\u003e **`md` is required!**\n\u003e ```js\n\u003e const emojiOptions = {\n\u003e   md, // the markdown-it instance (required!)\n\u003e   emojiDir: './public/img/emoji/',\n\u003e   baseUrl: '/img/emoji/',\n\u003e   mergeDefs: true,\n\u003e   baseUnicodeEmojiSet: 'full',\n\u003e   customEmojiImgAttributes: {},\n\u003e   customEmojiSpanClass: 'custom-emoji--span',\n\u003e   unicodeEmojiSpanClass: 'unicode-emoji--span',\n\u003e   shortcuts: false,\n\u003e   mergeShortcuts: true,\n\u003e   // allowedEmoji: ,\n\u003e}\n\u003e ```\n\n---\n\n## Options Details and Examples\n\n### md\n**(Required!)**\n\nthe markdown-it library (*before* `setLibrary()` in `eleventy.config.js`).\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#options\"\u003eback to Options\u003c/a\u003e 🔼 | \u003ca href=\"#markdown-it-emoji-customizer\"\u003eback to top\u003c/a\u003e ⏫\u003c/p\u003e\n\n### emojiDir\n\n**Default:** `\"./public/img/emoji/\"`\n\nThe local path for the root emoji dir (for [scanning for custom emoji image files](#scanning-for-custom-emoji-images))\n\nEmoji can be in this root emoji dir or in subdirs of it as 'collections' or 'packs' (see [my obsidian-icon-shortcodes setup](#my-use-with-obsidian) as an example of how that might be useful).\n\n\u003e [!NOTE]\n\u003e If emoji are in this root emoji dir with no subdir, the emoji shortcodes are generated as `:name:` (the filename with no extension and no path).\n\u003e\n\u003e In cases of emoji being in subdirs in this path, the generated shortcodes are prefixed with the final subdir and an underscore (e.g. `./public/img/emoji/neocat/neocat_3c.png` would be shortcode `:neocat_neocat_3c:` and it would correspond to `\u003cbaseUrl\u003e/neocat/neocat_3c.png` on the built site.)\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#options\"\u003eback to Options\u003c/a\u003e 🔼 | \u003ca href=\"#markdown-it-emoji-customizer\"\u003eback to top\u003c/a\u003e ⏫\u003c/p\u003e\n\n### baseUrl\n\n**Default:** `\"/img/emoji/\"`\n\nThe base url on the built site where the root emoji dir will be.\n\nI have my emoji in 11ty's `/public/` dir as `./public/img/emoji/` which gets output to my site build as `/img/emoji/`.\n\nThe structure of this root path should match the structure of `emojiDir` (e.g. if you use subdirs in `emojiDir`, you should use the same subdir structure on your site. If you put all emoji images in the `emojiDir` root, put all the emoji images in this root on the site, etc.)\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#options\"\u003eback to Options\u003c/a\u003e 🔼 | \u003ca href=\"#markdown-it-emoji-customizer\"\u003eback to top\u003c/a\u003e ⏫\u003c/p\u003e\n\n### mergeDefs\n\n**Default:** `true`\n\nWhether to merge the custom emoji set and the base unicode emoji set (below).\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#options\"\u003eback to Options\u003c/a\u003e 🔼 | \u003ca href=\"#markdown-it-emoji-customizer\"\u003eback to top\u003c/a\u003e ⏫\u003c/p\u003e\n\n### baseUnicodeEmojiSet\n\n**Default:** `\"full\"`\n\nValid options:\n- **\"none\"**\n  - no shortcode-to-unicode emoji definitions\n- **\"light\"**\n  - shortcode-to-unicode emoji definitions using the [light](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/light.mjs) bindings from `markdown-it-emoji`\n- **\"full\"**\n  - shortcode-to-unicode emoji definitions using the [full](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.mjs) bindings from `markdown-it-emoji`\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#options\"\u003eback to Options\u003c/a\u003e 🔼 | \u003ca href=\"#markdown-it-emoji-customizer\"\u003eback to top\u003c/a\u003e ⏫\u003c/p\u003e\n\n### customEmojiImgAttributes\n\n**Default:** `{}` (will use internal defaults, see Note below)\n\nAn object (or [function](#example-customemojiimgattributes-function)!) providing attributes for the custom emoji `\u003cimg\u003e` tags.\n\n\u003e [!NOTE]\n\u003e These will be merged into/over the internal defaults, which are\n\u003e ```js\n\u003e { alt: `emoji: ${emojiName}`, class: 'custom-emoji--img', 'eleventy:ignore':true }\n\u003e ```\n\u003e\n\u003e which means leaving this as an empty object or omitting it from the options will use those default attributes for the `\u003cimg\u003e` tags of custom emoji. Overriding any of those specific attributes in this `customEmojiAttributes` object **will override those defaults**. Anything else in this object which isn't present in those defaults gets *added to* the resulting `\u003cimg\u003e` tags.\n\u003e \n\u003e Empty strings *will* be used if included! For example, setting `customEmojiImgAttributes: { alt: '' }` will result in the `\u003cimg\u003e` tags having the attribute `alt=\"\"`.\n\n\u003e [!TIP]\n\u003e This can also be a function which returns an object! ([Example](#example-customemojiimgattributes-function)).\n\nIf this is a function, it will have access to the [`emojiMeta`](#emojimeta) and [`defaultImgAttributes`](#defaultimgattributes) below:\n\n#### emojiMeta\n`emojiMeta` is an object containing the following data about an emoji token being processed:\n- `emojiName` (`string`)\n  - this is the name (the filename, without extension, without path) of the emoji being processed\n    - (e.g. `'neocat'`)\n- `emojiFilename` (`string`)\n  - this is the full filename with path and extension of the emoji being processed\n    - (e.g. `/img/emoji/neocat/neocat.png`)\n- `emojiSubdir` (`string`)\n  - this is the *subdir* of the emoji being processed, aka the 'collection' or 'set'\n    - (e.g. `/img/emoji/neocat/neocat.png` would have `'neocat'` for this value)\n- `rawShortcode` (`string`)\n  - this is the raw shortcode of the emoji being processed (without colons)\n    - (e.g. `/img/emoji/neocat/neocat_3c.png` would be `neocat_neocat_3c`, `/img/emoji/neocat.png` would be `neocat`)\n      - if the custom emoji is in the *root* of [emojiDir](#emojidir), the shortcode will be simply `${name}`.\n      - if the custom emoji is in a *subdir* of [emojiDir](#emojidir), the shortcode for custom emoji is in the format `${subdir}_${name}`, to be more compatible with the [obsidian-icon-shortcodes setup](#obsidian-icon-shortcodes-settings-and-notes) (and avoid potential custom emoji name collisions)\n\n#### defaultImgAttributes\n`defaultImgAttributes` is an object containing the initial **default** `\u003cimg\u003e` tag attributes:\n- ``alt: `emoji: ${emojiName}` ``\n- `class: 'custom-emoji--img'`\n- `'eleventy:ignore': true`\n  - this is for `eleventy-img` processing, to make sure the emoji images don't get optimized. It is only included in the default `\u003cimg\u003e` attributes when this plugin is being used with 11ty (via `addPlugin()`), and shouldn't end up in the final rendered HTML, if using `eleventy-img`.\n\n\u003e [!TIP]\n\u003e Any custom attributes will be merged over those defaults, keeping any defaults that don't have an override!\n\n#### Example customEmojiImgAttributes Function\nThis is an example custom function for `customEmojiImgAttributes` which is\n- changing `alt` attribute using the `emojiName` and `rawShortcode`\n- changing `class` attribute\n  - if the emoji *is* in a subdir, use the subdir as part of the class name\n  - if the emoji *is not* in a subdir, just give it a class `custom-emoji--class`)\n```js\nconst myCustomEmojiImgAttributes = (emojiMeta) =\u003e ({\n    alt: `${emojiMeta.emojiName} (shortcode: ${emojiMeta.rawShortcode})`,\n    class: emojiMeta.emojiSubdir\n      ? `${emojiMeta.emojiSubdir}-emoji--class`\n      : 'custom-emoji--class'\n\t});\n```\nSo, when processing an emoji shortcode `:neocat_neocat_3c:` which is for `/img/emoji/neocat/neocat_3c.png`, using the function above for `customEmojiImgAttributes`, it would result in the `\u003cimg\u003e` tag having:\n```js\nalt=\"neocat_3c (shortcode: neocat_neocat_3c)\",\nclass=\"neocat-emoji--class\"\n```\nand when processing an emoji shortcode `:neocat:` which is for `/img/emoji/neocat.png` (note: it is in the emoji root, no subdir) using the function above for `customEmojiImgAttributes`, it would result in the `\u003cimg\u003e` tag having:\n```js\nalt=\"neocat (shortcode: neocat)\",\nclass=\"custom-emoji--class\"\n```\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#options\"\u003eback to Options\u003c/a\u003e 🔼 | \u003ca href=\"#markdown-it-emoji-customizer\"\u003eback to top\u003c/a\u003e ⏫\u003c/p\u003e\n\n### customEmojiSpanClass\n\n**Default:** `\"custom-emoji--span\"`\n\nThe `class` name on the `\u003cspan\u003e` wrapping the custom emoji `\u003cimg\u003e` tags.\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#options\"\u003eback to Options\u003c/a\u003e 🔼 | \u003ca href=\"#markdown-it-emoji-customizer\"\u003eback to top\u003c/a\u003e ⏫\u003c/p\u003e\n\n### unicodeEmojiSpanClass\n**Default:** `\"unicode-emoji--span\"`\n\nThe `class` name on the `\u003cspan\u003e` wrapping the unicode emoji.\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#options\"\u003eback to Options\u003c/a\u003e 🔼 | \u003ca href=\"#markdown-it-emoji-customizer\"\u003eback to top\u003c/a\u003e ⏫\u003c/p\u003e\n\n### shortcuts\n\n**Default:** `false`\n\nA **boolean** *or* **object** containing shortcuts:\n\n- `true`: use the [default shortcuts](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/shortcuts.mjs) from `markdown-it-emoji`.\n- `false`: do not.\n- `object{}`: use your own custom shortcuts instead (in the format of the default, linked above)\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#options\"\u003eback to Options\u003c/a\u003e 🔼 | \u003ca href=\"#markdown-it-emoji-customizer\"\u003eback to top\u003c/a\u003e ⏫\u003c/p\u003e\n\n### mergeShortcuts\n\n**Default:** `true`\n\nIf using a custom shortcuts object ([above](#shortcuts)), this controls whether to merge those into the default shortcuts (`true`), or use them without any default shortcuts (`false`)\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#options\"\u003eback to Options\u003c/a\u003e 🔼 | \u003ca href=\"#markdown-it-emoji-customizer\"\u003eback to top\u003c/a\u003e ⏫\u003c/p\u003e\n\n### allowedEmoji\n**(Optional)**\n\n**Default:** `undefined`\n\nAn allowlist array of emoji shortcodes. *Only* the shortcodes in this array will be processed.\n\nIf `undefined` (omitted from the options), this will not be used. \n\n\u003cp align=\"right\"\u003e\u003ca href=\"#options\"\u003eback to Options\u003c/a\u003e 🔼 | \u003ca href=\"#markdown-it-emoji-customizer\"\u003eback to top\u003c/a\u003e ⏫\u003c/p\u003e\n\n---\n\n## Scanning for Custom Emoji Images\nThe `emojiDir` option (default `./public/img/emoji/`) is a local path to be scanned for custom emoji images for the plugin to use in building the definitions. Ideally the custom emoji should be organized into subdirs, where a subdir represents [a 'pack' (or 'collection') of custom emoji](#emoji-packs-in-the-obsidian-icon-shortcodes-plugin), but they can also simply be in this root emoji dir.\n\nThe filenames (without path and without extension) becomes the proper names of the emoji and is joined with the subdir by an underscore separator as the shortcode.\n\n**Example:**\n`emojiDir: './public/img/emoji/'`\n`baseUrl: '/img/emoji/'`\nwith some emoji filenames like:\n```\n./public/img/emoji/neocat.png\n./public/img/emoji/subdir/meow.png\n```\nresults in definitions for two custom emoji (`:neocat:` and `:meow:`).\nWith the [default options](#options) this plugin would use those shortcodes in markdown to generate HTML like:\n```html\n\u003cspan class=\"custom-emoji--span\"\u003e\u003cimg src=\"/img/emoji/neocat.png\" alt=\"emoji: neocat\" class=\"custom-emoji--img\" /\u003e\u003c/span\u003e\n\u003cspan class=\"custom-emoji--span\"\u003e\u003cimg src=\"/img/emoji/subdir/meow.png\" alt=\"emoji: meow\" class=\"custom-emoji--img\" /\u003e\u003c/span\u003e\n```\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#options\"\u003eback to Options\u003c/a\u003e 🔼 | \u003ca href=\"#markdown-it-emoji-customizer\"\u003eback to top\u003c/a\u003e ⏫\u003c/p\u003e\n\n---\n\n## Styling\nI'm using the following base `css` on my site (with some modifications) to style the unicode and custom emoji `\u003cspan\u003e`s and the custom emoji `\u003cimg\u003e`, to get them to be more uniform in appearance. Feel free to use or modify this for your own purposes:\n```css\n/* variables in root: */\n  /* custom emoji specific */\n  --emoji-icon-size: 1.5em;\n  --emoji-icon-vertical-align: -0.3em;\n  /* unicode emoji specific */\n  --unicode-emoji-size: 1.2em;\n  --unicode-line-height: 0em;\n/* end of variables in root: */\n\n/* unicode/custom emoji */\n.unicode-emoji--span {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  font-size: var(--unicode-emoji-size);\n  line-height: var(--unicode-line-height);\n}\n.custom-emoji--span {\n  display: inline-block;\n  position: relative;\n  width: var(--emoji-icon-size);\n  height: var(--emoji-icon-size);\n  vertical-align: var(--emoji-icon-vertical-align);\n}\n.custom-emoji--img {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n```\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#options\"\u003eback to Options\u003c/a\u003e 🔼 | \u003ca href=\"#markdown-it-emoji-customizer\"\u003eback to top\u003c/a\u003e ⏫\u003c/p\u003e\n\n---\n\n## My Use with Obsidian\n\u003e [!TIP]\n\u003e This plugin is intended to be compatible with the [Obsidian](https://obisidian.md) plugin [obsidian-icon-shortcodes](https://github.com/aidenlx/obsidian-icon-shortcodes), though it doesn't require it. Any matching and allowed shortcodes in markdown will be converted.\n\n### obsidian-icon-shortcodes Settings and Notes\n\nWith the [obsidian-icon-shortcodes](https://github.com/aidenlx/obsidian-icon-shortcodes) plugin, I have its option `Replace emoji shortcode with emoji character` **disabled** (see pic), so that a shortcode for a unicode emoji like `:cat:` **remains** as `:cat:` in the markdown file, rather than having Obsidian replace it with 🐱.\n\nThe reason is that I want the actual shortcode `:cat:` to be present in the markdown for `markdown-it-emoji-customizer` to process.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./_README_images/disabled-replace-option.png\" alt=\"screenshot showing the disabled 'Replace emoji shortcode with emoji character' option of obsidian-icon-shortcodes\"/\u003e\n\u003c/p\u003e\n\n#### Emoji Packs in the obsidian-icon-shortcodes Plugin\nThe idea is that \"packs\" of emoji will be present as subdirs in your root emoji folders, and also added to the `obsidian-icon-shortcodes` plugin settings as an \"icon pack\" (if using Obsidian and that plugin).\n\n##### Example (neocat)\nFor example, to use the [neocat emoji](https://volpeon.ink/emojis/neocat/) (license: [CC-BY-NC-SA-4.0](https://spdx.org/licenses/CC-BY-NC-SA-4.0.html)) made by [Volpeon](https://volpeon.ink/):\n- download, extract, and place the `neocat` dir containing the `png` files into your root emoji dir (resulting in something like `/img/emoji/neocat/*.png`)\n- then, in the obsidian-icon-shortcodes plugin settings, `Add new icon pack` with a name matching that subdir name (`neocat`, in this example)\n- then, import the emoji (`*.png`, in this example) from the `neocat` subdir into the new pack that was created, using the `select files to import` button in the Obsidian plugin's settings (or drag and drop, as per the plugin settings instructions)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./_README_images/packs.png\" alt=\"screenshot of the Custom Icons section of the obsidian-icon-shortcodes plugin, with a 'neocat' 'icon pack'\"/\u003e\n\u003c/p\u003e\n\n**Result:** they will have shortcodes within Obsidian like `:neocat_neocat:`, where `neocat_` is the name of the pack you just created (the underscore added by the plugin as a separator). Autocomplete/suggest works in Obsidian to insert emoji by shortcode, so beginning to type `:neo` should narrow it down and save some typing :3\nAfter scanning the emoji dir with `markdown-it-emoji-customizer` and building definitions, the shortcodes it expects will match what `obsidian-icon-shortcodes` is inserting (e.g. Obsidian autocompletes to `:neocat_neocat_3c:` and the markdown-it-emoji-customizer plugin will have built definitions based on the subdir convention (if used), so definitions will be something like `:neocat_neocat_3c:`, so it can convert those to the `\u003cimg\u003e` wrapped in `\u003cspan\u003e`! :3\n\nThe [demo](#demo) at the top of this readme shows the result.\n\n\u003e [!TIP]\n\u003e **Reminder:**\n\u003e - the icon pack name should be the same as the subdir name! (`neocat`, in this example)\n\u003e - `markdown-it-emoji-customizer` does not require using Obsidian! This is bonus information that `markdown-it-emoji-customizer` does not rely on, in standard use!\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#options\"\u003eback to Options\u003c/a\u003e 🔼 | \u003ca href=\"#markdown-it-emoji-customizer\"\u003eback to top\u003c/a\u003e ⏫\u003c/p\u003e\n\n---\n\n## Credits\n\nThis plugin has a dependency for [`globby`](https://github.com/sindresorhus/globby) and a peer dependency for [`markdown-it-emoji`](https://github.com/markdown-it/markdown-it-emoji).\n\n\u003e [!IMPORTANT]\n\u003e Thanks and shoutout to [Volpeon](https://volpeon.ink/) for making neat [emoji sets](https://volpeon.ink/emojis/) like the [neocat](https://volpeon.ink/emojis/neocat/) set, which are so good they inspired/motivated me to create this plugin to more easily use them in my Obsidian-backed 11ty blog! ❤\n\n---\n\n## Meow\nmeow :3\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factuallysomecat%2Fmarkdown-it-emoji-customizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Factuallysomecat%2Fmarkdown-it-emoji-customizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factuallysomecat%2Fmarkdown-it-emoji-customizer/lists"}