Add prism highlight support (#23)

_config.yml

@@ -349,6 +349,10 @@ codeblock:
   theme:
     light: default
     dark: tomorrow-night
+  # See: https://github.com/PrismJS/prism/tree/master/themes
+  prism:
+    light: prism
+    dark: prism-dark
   # Add copy button on codeblock
   copy_button:
     enable: false
@@ -883,6 +887,14 @@ vendors:
   # fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css
   fontawesome:
 
+  # Prism
+  # prism: //cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js
+  # prism_autoloader: //cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js
+  # prism_line_numbers: //cdn.jsdelivr.net/npm/prismjs@1/plugins/line-numbers/prism-line-numbers.js
+  prism:
+  prism_autoloader:
+  prism_line_numbers:
+
   # MathJax
   # mathjax: //cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
   mathjax:

scripts/events/lib/highlight.js

@@ -22,11 +22,19 @@ function parse(file) {
 }
 
 module.exports = hexo => {
-  hexo.config.highlight.hljs = false;
+  let { config } = hexo;
-  let light = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.theme.light}.css`;
+  let theme = hexo.theme.config;
-  let dark = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.theme.dark}.css`;
+  config.highlight.hljs = false;
-  hexo.theme.config.highlight = {
+  config.prismjs = config.prismjs || {};
-    light: parse(light),
+  theme.highlight = {
-    dark : parse(dark)
+    enable: config.highlight.enable && !config.prismjs.enable,
+    light : parse(`${hexo.plugin_dir}highlight.js/styles/${theme.codeblock.theme.light}.css`),
+    dark  : parse(`${hexo.plugin_dir}highlight.js/styles/${theme.codeblock.theme.dark}.css`)
+  };
+  theme.prism = {
+    enable: config.prismjs.enable,
+    light : `${hexo.plugin_dir}prismjs/themes/${theme.codeblock.prism.light}.css`,
+    dark  : `${hexo.plugin_dir}prismjs/themes/${theme.codeblock.prism.dark}.css`,
+    number: `${hexo.plugin_dir}prismjs/plugins/line-numbers/prism-line-numbers.css`
   };
 };

scripts/helpers/next-config.js

@@ -33,7 +33,8 @@ hexo.extend.helper.register('next_config', function() {
       labels   : theme.algolia_search.labels
     },
     localsearch: theme.local_search,
-    motion     : theme.motion
+    motion     : theme.motion,
+    prism      : config.prismjs.enable && !config.prismjs.preprocess
   };
   if (config.search) {
     exportConfig.path = config.search.path;

scripts/helpers/next-vendors.js

@@ -3,10 +3,17 @@
 'use strict';
 
 hexo.extend.helper.register('js_vendors', function() {
-  let { theme } = this;
+  let { config, theme } = this;
   let vendors = {
     anime: 'anime.min.js'
   };
+  if (config.prismjs.enable && !config.prismjs.preprocess) {
+    vendors.prism = '//cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js';
+    vendors.prism_autoloader = '//cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js';
+    if (config.prismjs.line_number) {
+      vendors.prism_line_numbers = '//cdn.jsdelivr.net/npm/prismjs@1/plugins/line-numbers/prism-line-numbers.js';
+    }
+  }
   if (theme.pjax) {
     vendors.pjax = 'pjax/pjax.min.js';
   }

source/css/_common/scaffolding/highlight/highlight.styl

@@ -1,8 +1,13 @@
-@import hexo-config('highlight.light.file');
+@import hexo-config('highlight.light.file') if (hexo-config('highlight.enable'));
+if (hexo-config('prism.enable')) {
+  @import hexo-config('prism.light');
+  @import hexo-config('prism.number');
+}
 
 if (hexo-config('darkmode')) {
   @media (prefers-color-scheme: dark) {
-    @import hexo-config('highlight.dark.file');
+    @import hexo-config('highlight.dark.file') if (hexo-config('highlight.enable'));
+    @import hexo-config('prism.dark') if (hexo-config('prism.enable'));
   }
 }
 

source/js/next-boot.js

@@ -79,6 +79,7 @@ NexT.boot.refresh = function() {
    * Register JS handlers by condition option.
    * Need to add config option in Front-End at 'layout/_partials/head.njk' file.
    */
+  CONFIG.prism && window.Prism.highlightAll();
   CONFIG.fancybox && NexT.utils.wrapImageWithFancyBox();
   CONFIG.mediumzoom && window.mediumZoom('.post-body :not(a) > img, .post-body > img', {
     background: 'var(--content-bg-color)'