-> v1.10.1

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 1.10.1
+### Bug fixes
+- Fix render emojis
+
+## 1.10.0
+### Features
+- Support emoji :laughing:
+
 ## 1.9.0
 
 ### Bug fixes

README.md

@@ -22,6 +22,7 @@
 - Simple and lightweight (~13kB gzipped)
 - Multiple themes
 - Not build static html files
+- Support emoji :laughing:
 
 ## Quick start
 Create a `index.html` and using `hash router`.

docs/_coverpage.md

@@ -1,12 +1,13 @@
 ![logo](_media/icon.svg)
 
-# docsify <small>1.9.0</small>
+# docsify <small>1.10.0</small>
 
 > A magical documentation site generator.
 
 - Simple and lightweight (~13kB gzipped)
-- Multiple themes
 - Not build static html files
+- Support emoji :laughing:
+- Multiple themes
 
 
 [GitHub](https://github.com/QingWei-Li/docsify/)

lib/docsify.js

@@ -168,6 +168,12 @@ var merge = Object.assign || function (to) {
   return to
 };
 
+function emojify (text) {
+  return text
+    .replace(/:(\S*?):/ig, '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/$1.png" alt="$1" />')
+    .replace(/__colon__/g, ':')
+}
+
 /**
  * Active sidebar when scroll
  * @link https://buble.surge.sh/
@@ -2510,7 +2516,7 @@ function init (options) {
 
     var hl = prism.highlight(code, prism.languages[lang] || prism.languages.markup);
 
-    return ("<pre v-pre data-lang=\"" + lang + "\"><code class=\"lang-" + lang + "\">" + hl + "</code></pre>")
+    return ("<pre v-pre data-lang=\"" + lang + "\"><code class=\"lang-" + lang + "\">" + (hl.replace(/:/g, '__colon__')) + "</code></pre>")
   };
   renderer.link = function (href, title, text) {
     if (OPTIONS$1.router && !/:/.test(href)) {
@@ -2534,6 +2540,10 @@ function init (options) {
   } else {
     markdown.setOptions(merge({ renderer: renderer }, OPTIONS$1.markdown));
   }
+
+  var md = markdown;
+
+  markdown = function (text) { return emojify(md(text)); };
 }
 
 /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsify",
-  "version": "1.9.0",
+  "version": "1.10.1",
   "description": "A magical documentation generator.",
   "main": "lib/docsify.js",
   "files": [

src/render.js

@@ -2,7 +2,7 @@ import marked from 'marked'
 import Prism from 'prismjs'
 import * as tpl from './tpl'
 import * as event from './event'
-import { genTree, getRoute, isMobile, slugify, merge } from './util'
+import { genTree, getRoute, isMobile, slugify, merge, emojify } from './util'
 
 let OPTIONS = {}
 let markdown = marked
@@ -45,7 +45,7 @@ export function init (options) {
   renderer.code = function (code, lang = '') {
     const hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
 
-    return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
+    return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${hl.replace(/:/g, '__colon__')}</code></pre>`
   }
   renderer.link = function (href, title, text) {
     if (OPTIONS.router && !/:/.test(href)) {
@@ -69,6 +69,10 @@ export function init (options) {
   } else {
     markdown.setOptions(merge({ renderer }, OPTIONS.markdown))
   }
+
+  const md = markdown
+
+  markdown = text => emojify(md(text))
 }
 
 /**

src/themes/basic/_layout.css

@@ -7,6 +7,11 @@
   -webkit-font-smoothing: antialiased;
 }
 
+.emoji {
+  height: 1.2em;
+  vertical-align: middle;
+}
+
 .progress {
   background-color: $color-primary;
   height: 2px;

src/util.js

@@ -157,3 +157,10 @@ export const merge = Object.assign || function (to) {
 
   return to
 }
+
+export function emojify (text) {
+  return text
+    .replace(/:(\S*?):/ig, '<img class="emoji" src="https://assets-cdn.github.com/images/icons/emoji/$1.png" alt="$1" />')
+    .replace(/__colon__/g, ':')
+}
+