[fastpages] Feature Request: Github Flavored emojis

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 :smiley: 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 ![alt](image_file) 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.


When you are developing locally what does the associated converted markdown file look like in /_posts ? Can you find how the emoji is represented there?

Once you figure that out see if nbdev could be modifying the image somehow. Let us know what you find

It looks like a github-flavored emoji in the converted markdown

This is Emoji :smiley:

‘jemoji’ uses html-pipeline to filter emoji tags, then it looks up for appropriate url and produces following tag in the generated html

AFAICT, nbdev could match only img tags and markdown images ![alt](img_file). And if I’m not wrong, nbdev doesn’t manipulate final html of the post, thus it’s left untouched

Can you dump the converted HTML of your blog post here +/- 2 lines?

I do believe nbdev could be automatically captioning photos with the title

I suppose this is the relevant html

<h2 id="footnotes">
<a class="anchor" href="#footnotes" aria-hidden="true"><span class="octicon octicon-link"></span></a>Footnotes</h2>

<h2 id="emoji">
<a class="anchor" href="#emoji" aria-hidden="true"><span class="octicon octicon-link"></span></a>Emoji</h2>

<p>This is Emoji <img class="emoji" title=":smiley:" alt=":smiley:" src="https://github.githubassets.com/images/icons/emoji/unicode/1f603.png" height="20" width="20"></p>

<div class="footnotes">
    <li id="fn:1">
      <p>This is the footnote. <a href="#fnref:1" class="reversefootnote">↩</a></p>

Can you provide a link to your repo? It is difficult to debug otherwise

I have added this feature via https://github.com/fastai/fastpages/pull/261 ! Enjoy.


Thanks @hamelsmu :partying_face:

Will share a blog using emojis now :wink: