Search code examples
jekyllgithub-pagesgithub-flavored-markdown

How to create new entities in Jekyll + Markdown


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.


Solution

  • 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.