Add emoji support

README.md

@@ -16,6 +16,7 @@
 - Syntax highlighted code blocks ([prism][prism])
 - Generates Table of Contents (TOC)
 - Remembers scroll position
+- Emoji support (Icons provided free by [EmojiOne][emojione])
 - Settings synchronization
 - Raw and rendered markdown views
 - Open source
@@ -66,6 +67,7 @@ Option          | Default | Description
 
 Option          | Default | Description
 :---            | :---    | :---
+**emoji**       | `false` | Convert emoji :shortnames: into EmojiOne images
 **scroll**      | `true`  | Remember scroll position
 **toc**         | `false` | Generate Table of Contents
 
@@ -170,6 +172,8 @@ SOFTWARE.
   [commonmark]: https://github.com/jgm/commonmark.js
   [markdown-js]: https://github.com/evilstreak/markdown-js
 
+  [emojione]: https://emojione.com
+
   [gfm]: https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown
   [compiler-options]: #compiler-options
   [themes0]: https://github.com/sindresorhus/github-markdown-css

background/background.js

@@ -8,8 +8,9 @@ var defaults = {
   theme: 'github',
   compiler: 'marked',
   content: {
-    toc: false,
-    scroll: true
+    emoji: false,
+    scroll: true,
+    toc: false
   },
   raw: false,
   match,
@@ -54,6 +55,10 @@ chrome.storage.sync.get((res) => {
   if (options.compiler === 'showdown') {
     options.compiler = 'remark'
   }
+  // v2.9 -> v3.0
+  if (options.content.emoji === undefined) {
+    options.content.emoji = false
+  }
 
   Object.keys(md).forEach((compiler) => {
     if (!options[compiler]) {
@@ -149,6 +154,7 @@ chrome.tabs.onUpdated.addListener((id, info, tab) => {
 
         chrome.tabs.executeScript(id, {file: 'vendor/mithril.min.js', runAt: 'document_start'})
         chrome.tabs.executeScript(id, {file: 'vendor/prism.js', runAt: 'document_start'})
+        chrome.tabs.executeScript(id, {file: 'content/emoji.js', runAt: 'document_start'})
         chrome.tabs.executeScript(id, {file: 'content/content.js', runAt: 'document_start'})
       }
     })

content/content.js

@@ -71,7 +71,7 @@ function mount () {
           compiler: state.compiler,
           markdown: state.markdown
         }, (res) => {
-          state.html = res.html
+          state.html = state.content.emoji ? emojinator(res.html) : res.html
           m.redraw()
         })
       })

content/popup.js

@@ -10,6 +10,7 @@ var state = {
   tabs: ['theme', 'compiler', 'content'],
   compilers: {},
   description: {
+    emoji: 'Convert emoji :shortnames: into EmojiOne images',
     scroll: 'Remember scroll position',
     toc: 'Generate Table of Contents'
   }

css/content.css

@@ -143,3 +143,24 @@ body._toc-right { padding-right: 300px !important; }
 .markdown-body h6:hover .octicon-link {
   display: inline-block;
 }
+
+/*emojione*/
+.emojione {
+  /* Emoji Sizing */
+  font-size: inherit;
+  height: 3ex;
+  width: 3.1ex;
+  min-height: 20px;
+  min-width: 20px;
+
+  /* Inline alignment adjust the margins  */
+  display: inline-block;
+  margin: -.2ex .15em .2ex;
+  line-height: normal;
+  vertical-align: middle;
+}
+
+img.emojione {
+  /* prevent img stretch */
+  width: auto;
+}