add emoji parsing support to gfm

added 'emoji' option (disabled by default) expanded InlineLexer to look for delimited :emoji: codes added support for multiple option values (boolean-ish, function, string) documented option in README.md closes markedjs#233
Bartvds · Jan 29, 2014 · 640f829 · 640f829
1 parent 613bf6a
commit 640f829
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -247,6 +247,34 @@ Default: `false`
 
 Use "smart" typograhic punctuation for things like quotes and dashes.
 
+### emoji
+
+Type: `Boolean` / `String` / `Function`
+Default: `false`
+
+Enable replacement of colon-delimited Emoji emoticon codes like `:warning:` or `:+1:`. This option requires the `gfm` option to be true. :octocat: 
+
+* `String`: parsed as template for the replacement value, accepts the `{emoji}` variable.
+* `true`: use the default &lt;img&gt; with a local URL prefix.
+* `Function`: called with each emoji code, must return a replacement string like an &lt;img&gt; or &lt;span&gt; tag. Don't forget to use `escape(emoji)` or `encodeURIComponent(emoji)` where needed. 
+
+```js
+marked.setOptions({
+  emoji: function (emoji) {
+    return '<span data-emoji="' + emoji + '"></span>';
+  }
+});
+```
+
+The default template:
+
+````
+<img src="/graphics/emojis/warning.png" alt=":warning:" title=":warning:" 
+  class="emoji" align="absmiddle" height="20" width="20">`
+````
+
+:warning: The images for the emoji set used by GitHub can be found [in the repos](https://github.com/arvida/emoji-cheat-sheet.com/tree/master/public/graphics/emojis) of the [emoji-cheat-sheet](http://www.emoji-cheat-sheet.com/). :point_left::+1:
+
 ## Access to lexer and parser
 
 You also have direct access to the lexer and parser if you so desire.

diff --git a/lib/marked.js b/lib/marked.js
@@ -453,6 +453,7 @@ var inline = {
   code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
   br: /^ {2,}\n(?!\s*$)/,
   del: noop,
+  emoji: noop,
   text: /^[\s\S]+?(?=[\\<!\[_*`]| {2,}\n|$)/
 };
 
@@ -491,8 +492,9 @@ inline.gfm = merge({}, inline.normal, {
   escape: replace(inline.escape)('])', '~|])')(),
   url: /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,
   del: /^~~(?=\S)([\s\S]*?\S)~~/,
+  emoji: /^:([A-Za-z0-9_\-\+]+?):/,
   text: replace(inline.text)
-    (']|', '~]|')
+    (']|', ':~]|')
     ('|', '|https?://|')
     ()
 });
@@ -531,6 +533,8 @@ function InlineLexer(links, options) {
   } else if (this.options.pedantic) {
     this.rules = inline.pedantic;
   }
+
+  this.emojiTemplate = getEmojiTemplate(options);
 }
 
 /**
@@ -661,6 +665,13 @@ InlineLexer.prototype.output = function(src) {
       continue;
     }
 
+    // emoji (gfm)
+    if (cap = this.rules.emoji.exec(src)) {
+      src = src.substring(cap[0].length);
+      out += this.emoji(cap[1]);
+      continue;
+    }
+
     // text
     if (cap = this.rules.text.exec(src)) {
       src = src.substring(cap[0].length);
@@ -690,6 +701,47 @@ InlineLexer.prototype.outputLink = function(cap, link) {
     : this.renderer.image(href, title, escape(cap[1]));
 };
 
+/**
+ * Emoji Transformations
+ */
+
+function emojiDefaultTemplate(emoji) {
+  return '<img src="'
+    + '/graphics/emojis/'
+    + encodeURIComponent(emoji)
+    + '.png"'
+    + ' alt=":'
+    + escape(emoji)
+    + ':"'
+    + ' title=":'
+    + escape(emoji)
+    + ':"'
+    + ' class="emoji" align="absmiddle" height="20" width="20">';
+}
+
+function getEmojiTemplate(options) {
+  if (options.emoji) {
+    if (typeof options.emoji === 'function') {
+      return options.emoji;
+    }
+
+    if (typeof options.emoji === 'string') {
+      var emojiSplit = options.emoji.split(/\{emoji\}/g);
+      return function(emoji) {
+        return emojiSplit.join(emoji);
+      }
+    }
+  }
+  return emojiDefaultTemplate;
+}
+
+InlineLexer.prototype.emojiTemplate = emojiDefaultTemplate;
+InlineLexer.prototype.emoji = function (name) {
+  if (!this.options.emoji) return ':' + name + ':';
+
+  return this.emojiTemplate(name);
+};
+
 /**
  * Smartypants Transformations
  */
@@ -1208,6 +1260,7 @@ marked.setOptions = function(opt) {
 
 marked.defaults = {
   gfm: true,
+  emoji: false,
   tables: true,
   breaks: false,
   pedantic: false,

diff --git a/test/new/gfm_emoji.emoji.html b/test/new/gfm_emoji.emoji.html
@@ -0,0 +1 @@
+<p>note: we <img src="/graphics/emojis/heart.png" alt=":heart:" title=":heart:" class="emoji" align="absmiddle" height="20" width="20"> marked</p>
diff --git a/test/new/gfm_emoji.emoji.text b/test/new/gfm_emoji.emoji.text
@@ -0,0 +1 @@
+note: we :heart: marked
diff --git a/test/tests/gfm_emoji.emoji.html b/test/tests/gfm_emoji.emoji.html
@@ -0,0 +1 @@
+<p>note: we <img src="/graphics/emojis/heart.png" alt=":heart:" title=":heart:" class="emoji" align="absmiddle" height="20" width="20"> marked</p>
diff --git a/test/tests/gfm_emoji.emoji.text b/test/tests/gfm_emoji.emoji.text
@@ -0,0 +1 @@
+note: we :heart: marked