diff --git a/support/demo_template/index.jade b/support/demo_template/index.jade
index e9e7db3..b129236 100644
--- a/support/demo_template/index.jade
+++ b/support/demo_template/index.jade
@@ -18,6 +18,7 @@ html
     link(rel='stylesheet' href='https://cdn.jsdelivr.net/highlight.js/8.4.0/styles/solarized_light.min.css')
 
     script(src='markdown-it.js')
+    script(src='https://twemoji.maxcdn.com/twemoji.min.js')
     script(src='plugins/markdown-it-emoji.js')
 
     link(rel='stylesheet' href='index.css')
diff --git a/support/demo_template/index.js b/support/demo_template/index.js
index a6228b2..f19f37b 100644
--- a/support/demo_template/index.js
+++ b/support/demo_template/index.js
@@ -68,6 +68,11 @@
     mdHtml.renderer.rules.table_open = function () {
       return '<table class="table table-striped">\n';
     };
+    // Replace emoji codes with images
+    mdHtml.renderer.rules.emoji = function(token, idx) {
+      console.log(token[idx].name);
+      return window.twemoji.parse(token[idx].to);
+    };
 
     //
     // Inject line numbers for sync scroll. Notes:
diff --git a/support/demo_template/index.styl b/support/demo_template/index.styl
index 1dc8a2d..1cff901 100644
--- a/support/demo_template/index.styl
+++ b/support/demo_template/index.styl
@@ -7,6 +7,10 @@ body
   padding-bottom 160px
   background-color #fbfbfb
 
+// hack to allign emojies to line height
+.emoji
+  height: 1.2em;
+
 .demo-options
   margin-bottom 30px
 
diff --git a/support/demo_template/sample.md b/support/demo_template/sample.md
index 0440ba9..6690f99 100644
--- a/support/demo_template/sample.md
+++ b/support/demo_template/sample.md
@@ -10,7 +10,7 @@ You will like those projects!
 
 ---
 
-# h1 Heading
+# h1 Heading 8-)
 ## h2 Heading
 ### h3 Heading
 #### h4 Heading