feat(#169): add emoji support for markdown

public/css/style.css

@@ -133,6 +133,12 @@ a:hover {
   color: var(--link-hover-color);
 }
 
+.markdown-body .emoji {
+  height: 1.3em;
+  margin: 0;
+  vertical-align: -0.1em;
+}
+
 .navbar {
   background: var(--header-bg-color) !important;
 }

public/index.html

@@ -66,6 +66,8 @@
     <script src="/script/langColors.js"></script>
 
     <!-- Notebook -->
+    <script src="/script/external/github-emojis.js"></script>
+    <script src="/script/external/marked-emoji.js"></script>
     <script src="/script/external/marked.min.js"></script>
     <script src="/script/external/purify.min.js"></script>
     <script src="/script/external/ansi_up.min.js"></script>

public/script/external/marked-emoji.js

@@ -0,0 +1,57 @@
+const defaultOptions = {
+  // emojis: {}, required
+  unicode: false,
+};
+
+function markedEmoji(options) {
+  options = {
+    ...defaultOptions,
+    ...options,
+  };
+
+  if (!options.emojis) {
+    throw new Error("Must provide emojis to markedEmoji");
+  }
+
+  return {
+    extensions: [
+      {
+        name: "emoji",
+        level: "inline",
+        start(src) {
+          return src.indexOf(":");
+        },
+        tokenizer(src, tokens) {
+          const rule = /^:(.+?):/;
+          const match = rule.exec(src);
+          if (!match) {
+            return;
+          }
+
+          const name = match[1];
+          const emoji = options.emojis[name];
+
+          if (!emoji) {
+            return;
+          }
+
+          return {
+            type: "emoji",
+            raw: match[0],
+            name,
+            emoji,
+          };
+        },
+        renderer(token) {
+          if (options.unicode) {
+            return token.emoji;
+          } else {
+            return `<img class="emoji" alt="${token.name}" src="${
+              token.emoji
+            }"${this.parser.options.xhtml ? " /" : ""}>`;
+          }
+        },
+      },
+    ],
+  };
+}

public/script/utils.js

@@ -110,6 +110,13 @@ function parseGithubUrl(url) {
   }
 }
 
+marked.use(
+  markedEmoji({
+    emojis: githubEmojis,
+    unicode: false,
+  })
+);
+
 function renderMD(md, baseUrl) {
   md = contentAbs2Relative(md);
   const renderer = new marked.Renderer();