I’ve been working on enabling github-flavored emojis in fastpages. ‘jemoji’ is the perfect plugin for this use case — you can simply write :smiley: and it’ll render 
for you. The way ‘jemoji’ does this is it identifies such occurrences in the markdown file and replaces them with a proper <img> tag. For instance, above emoji gets converted as:
<img class="emoji" title=":smiley:" alt=":smiley:" src="https://github.githubassets.com/images/icons/emoji/unicode/1f603.png" height="20" width="20">
In the final html file of your blog (under _site directory)
Now, here comes an issue: fastpages and nbdev have defined some functionalities to manipulate <img> tag, such as nbdev can parse the markdown style  images and convert them to jekyll liquid templates and ‘image.html’ template by fastpages is used to represent images with semantic tags such as ‘figure’.
Somewhere in this pipeline, <img> tag generated by ‘jemoji’ is manipulated to display as a ‘block’ instead of ‘inline’. Thus the result I get is:
And this happens in the runtime, as I’ve observed two different behaviors for these <img> tags.
When I hit refresh, and the page is still loading:
The emoji is rendered as expected (I’ve made it little bigger for demonstration), but within a fraction of second the page is ready, as in done with loading the contents:
It gets converted as a ‘block’ image with a caption. I suspect this is happening due to ‘image.html’ and not sure how this works.
I have also tried to override this property using custom-styles.css by defining the following as well as
figure {
img.emoji {
display: inline;
}
}
several permutations of making image inline, but nothing worked. Correct me if I’ve stated anything wrong. Hope someone could take this idea further to enable emoji support.
Thanks!
