fix(optimize): process code highlight in frontend

includes/filters/highlight.js

@@ -1,25 +0,0 @@
-const cheerio = require('cheerio');
-
-module.exports = function (hexo) {
-    function patchCodeHighlight(content) {
-        const $ = cheerio.load(content, { decodeEntities: false });
-        $('figure.highlight').addClass('hljs');
-        $('figure.highlight .code .line span').each(function () {
-            const classes = $(this).attr('class').split(' ');
-            if (classes.length === 1) {
-                $(this).addClass('hljs-' + classes[0]);
-                $(this).removeClass(classes[0]);
-            }
-        });
-        return $.html();
-    }
-    
-    /**
-     * Add .hljs class name to the code blocks and code elements
-     */
-    hexo.extend.filter.register('after_post_render', function (data) {
-        data.content = data.content ? patchCodeHighlight(data.content) : data.content;
-        data.excerpt = data.excerpt ? patchCodeHighlight(data.excerpt) : data.excerpt;
-        return data;
-    });
-}

scripts/index.js

@@ -5,7 +5,6 @@ require('../includes/generators/categories')(hexo);
 require('../includes/generators/category')(hexo);
 require('../includes/generators/tags')(hexo);
 require('../includes/generators/insight')(hexo);
-require('../includes/filters/highlight')(hexo);
 require('../includes/helpers/cdn')(hexo);
 require('../includes/helpers/config')(hexo);
 require('../includes/helpers/layout')(hexo);
@@ -14,12 +13,19 @@ require('../includes/helpers/page')(hexo);
 require('../includes/helpers/site')(hexo);
 
 // Fix large blog rendering OOM
-const postHtmlFilter = hexo.extend.filter.list()['after_render:html'];
-for (let filter of postHtmlFilter) {
-    if (filter.name === 'hexoMetaGeneratorInject') {
-        hexo.extend.filter.unregister('after_render:html', filter);
-    }
-}
+const hooks = [
+    'after_render:html',
+    'after_post_render'
+]
+const filters = [
+    'hexoMetaGeneratorInject',
+    'externalLinkFilter'
+];
+hooks.forEach(hook => {
+    hexo.extend.filter.list()[hook]
+        .filter(filter => filters.includes(filter.name))
+        .forEach(filter => hexo.extend.filter.unregister(hook, filter));
+});
 
 // Debug helper
 hexo.extend.helper.register('console', function () {

source/css/style.styl

@@ -339,12 +339,16 @@ img.thumbnail
     h5
         font-size: 1em
     code, pre
-        font-size: 0.85em
         font-family: family-mono
+    pre
+        font-size: 0.85em
     code
-        color: hsl(348, 100%, 61%)
-        background: transparent
         padding: 0
+        background: transparent
+    & > code,
+    :not(pre) > code
+        font-size: 0.85em
+        color: hsl(348, 100%, 61%)
     blockquote
         footer
             strong + cite
@@ -381,7 +385,8 @@ figure.highlight
         padding: 0
         overflow: visible
 
-        .line
+        .line,
+        code .hljs
             line-height: 1.5rem
 
     figcaption,

source/js/main.js

@@ -36,6 +36,16 @@
     if (typeof (IcarusThemeSettings) !== 'undefined' &&
         typeof (IcarusThemeSettings.article) !== 'undefined' &&
         typeof (IcarusThemeSettings.article.highlight) !== 'undefined') {
+
+        $('figure.highlight').addClass('hljs');
+        $('figure.highlight .code .line span').each(function () {
+            const classes = $(this).attr('class').split(/\s+/);
+            if (classes.length === 1) {
+                $(this).addClass('hljs-' + classes[0]);
+                $(this).removeClass(classes[0]);
+            }
+        });
+
         if (typeof (ClipboardJS) !== 'undefined' && IcarusThemeSettings.article.highlight.clipboard) {
             $('figure.highlight').each(function () {
                 var id = 'code-' + Date.now() + (Math.random() * 1000 | 0);