I have a bunch of Markdown files. In them, I want to be able to use custom bullets and other images; these are implemented as images (with alt-text, but they're a lot prettier as images). The Markdown to create one of those images looks like this:
*![✨](https://s.w.org/images/core/emoji/2.2.1/svg/2728.svg)*
(Yes, that's rendered inside <em>
</em>
- that's to simplify the CSS, since I can't put a class on the img tag easily.)
Is there a way to tell the parser that the single character ✨
should be rendered as the entire <img>
tag?
The site is hosted on GitHub Pages, so answers need to restrict themselves to GitHub Flavored Markdown. If it can't easily be done, I could make a pre-commit hook or something and run a local parser, but it would be far easier to have it work automatically.
You can put the emojis in includes and then reference them from your posts. That is compatible with Github Pages as it doesn't require plugins.
In your post put:
{% include emoji.html %}
That will load the contents of _includes/emoji.html
:
<a href="https://s.w.org/images/core/emoji/2.2.1/svg/2728.svg">✨</a>
You can pass parameters to it to load different images depending on the image you want to load, e.g.: {% include emoji.html image="stars" %}
Another option is to create custom liquid tags that load them.