diff --git a/_config.yml b/_config.yml index 038a661..ebbfb79 100644 --- a/_config.yml +++ b/_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: diff --git a/scripts/events/lib/highlight.js b/scripts/events/lib/highlight.js index 43ede36..6245fa7 100644 --- a/scripts/events/lib/highlight.js +++ b/scripts/events/lib/highlight.js @@ -22,11 +22,19 @@ function parse(file) { } module.exports = hexo => { - hexo.config.highlight.hljs = false; - let light = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.theme.light}.css`; - let dark = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.theme.dark}.css`; - hexo.theme.config.highlight = { - light: parse(light), - dark : parse(dark) + let { config } = hexo; + let theme = hexo.theme.config; + config.highlight.hljs = false; + config.prismjs = config.prismjs || {}; + theme.highlight = { + 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` }; }; diff --git a/scripts/helpers/next-config.js b/scripts/helpers/next-config.js index f5f635c..ffb1f82 100644 --- a/scripts/helpers/next-config.js +++ b/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; diff --git a/scripts/helpers/next-vendors.js b/scripts/helpers/next-vendors.js index 9355a3f..15bd7b7 100644 --- a/scripts/helpers/next-vendors.js +++ b/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'; } diff --git a/source/css/_common/scaffolding/highlight/highlight.styl b/source/css/_common/scaffolding/highlight/highlight.styl index 44d623d..4a36f7c 100644 --- a/source/css/_common/scaffolding/highlight/highlight.styl +++ b/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')); } } diff --git a/source/js/next-boot.js b/source/js/next-boot.js index a8c3d00..2876313 100644 --- a/source/js/next-boot.js +++ b/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)'