refactor(style): load highlight.js styles from CDN instead of importi…

…ng it to scss

_config.yml.example

@@ -18,6 +18,8 @@ logo:
 article:
   # Show word count and estimated reading time.
   readtime: true
+  # Code highlight theme, please see https://highlightjs.org/static/demo/
+  highlight: atom-one-light
 
 # Navigation bar menu links.
 menu:

layout/common/head.ejs

@@ -30,5 +30,8 @@
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.5/css/justifiedGallery.min.css">
 <% } %>
 
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/<%= get_config('article.highlight', 'atom-one-light') %>.min.css">
+
 <%- css('css/style') %>
+
 <script defer src="//use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

scripts/99_config.js

@@ -55,5 +55,5 @@ hexo.extend.helper.register('get_config', function (configName, defaultValue = n
         this.config,
         getThemeConfig(this.page.lang),
         !excludePage ? this.page : {}), configName);
-    return configName === null ? defaultValue : config;
+    return config === null ? defaultValue : config;
 });

scripts/99_content.js

@@ -28,7 +28,7 @@ function getMomentLocale(language) {
 }
 
 function injectMomentLocale(func) {
-    return function() {
+    return function () {
         let language = getMomentLocale(getPageLanguage(this.page));
         moment.locale(language);
         const args = Array.prototype.slice.call(arguments).map(arg => {
@@ -52,7 +52,7 @@ hexo.extend.helper.register('is_tags', function () {
 /**
  * Generate html head title based on page type
  */
-hexo.extend.helper.register('page_title', function() {
+hexo.extend.helper.register('page_title', function () {
     const page = this.page;
     let title = page.title;
 
@@ -75,34 +75,34 @@ hexo.extend.helper.register('page_title', function() {
 
     const getConfig = hexo.extend.helper.get('get_config').bind(this);
 
-    return [title, getConfig('title', '', true)].filter(str => typeof(str) !== 'undefined' && str.trim() !== '').join(' - ');
+    return [title, getConfig('title', '', true)].filter(str => typeof (str) !== 'undefined' && str.trim() !== '').join(' - ');
 });
 
 /**
  * Format date to string without year.
  */
-hexo.extend.helper.register('format_date', injectMomentLocale(function(date) {
+hexo.extend.helper.register('format_date', injectMomentLocale(function (date) {
     return moment(date).format('MMM D');
 }));
 
 /**
  * Format date to string with year.
  */
-hexo.extend.helper.register('format_date_full', injectMomentLocale(function(date) {
+hexo.extend.helper.register('format_date_full', injectMomentLocale(function (date) {
     return moment(date).format('MMM D YYYY');
 }));
 
 /**
  * Get moment.js supported page locale
  */
-hexo.extend.helper.register('momentjs_locale', function() {
+hexo.extend.helper.register('momentjs_locale', function () {
     return getMomentLocale(getPageLanguage(this.page));
 });
 
 /**
  * Export moment.duration
  */
-hexo.extend.helper.register('duration', injectMomentLocale(function() {
+hexo.extend.helper.register('duration', injectMomentLocale(function () {
     return moment.duration.apply(null, arguments);
 }));
 
@@ -140,7 +140,7 @@ hexo.extend.helper.register('toc_list', (content) => {
         return tocList;
     }
     const headings = $(levelTags.join(','));
-    headings.each(function() {
+    headings.each(function () {
         const level = levelTags.indexOf(this.name);
         const id = $(this).attr('id');
         const text = _.escape($(this).text());
@@ -161,4 +161,20 @@ hexo.extend.helper.register('toc_list', (content) => {
         tocList.push([levels.slice(0, level + 1).join('.'), id, text, level + 1]);
     });
     return tocList;
-});
+});
+
+/**
+ * Add .hljs class name to the code blocks and code elements
+ */
+hexo.extend.filter.register('after_post_render', function (data) {
+    const $ = cheerio.load(data.content);
+    $('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]);
+        }
+    });
+    data.content = $.html();
+    return data;
+});

source/css/style.scss

@@ -2,8 +2,6 @@ $family-serif: "Ovo", "Georgia", "STZhongsong", "Microsoft YaHei", serif;
 $family-mono: "Source Code Pro", monospace, "Microsoft YaHei";
 $border-color: #dbdbdb;
 
-@import "../../../../node_modules/highlight.js/styles/atom-one-light";
-
 body, button, input, select, textarea {
     font-family: $family-serif;
 }
@@ -435,27 +433,16 @@ a.tag.article-tag {
     }
 }
 
-$hljs-classes: "comment" "quote" "variable" "template" "attribute" "tag" "name" "regexp" "link" "name" "selector"
-                "selector" "number" "meta" "built_in" "builtin" "literal" "type" "params" "string" "symbol" "bullet"
-                "title" "section" "keyword" "selector" "deletion" "addition" "deletion" "addition" "emphasis" "strong";
-
 code, pre {
     font-size: 0.85rem;
     font-family: $family-mono;
 }
 
 figure.highlight {
-    @extend .hljs;
     padding: 0;
     width: 100%;
     margin: 0 0 1.5rem;
 
-    @each $class in $hljs-classes {
-        .#{$class} {
-            @extend .hljs-#{$class} !optional;
-        }
-    }
-
     pre,
     table tr:hover {
         color: inherit;