hexo-theme-solitude 1.5.9 → 1.5.11

package/source/css/_highlight/color.styl

@@ -0,0 +1,134 @@
+$highlight_color = hexo-config('highlight.color')
+
+if $highlight_color == "default"
+  $highlight-comment = #969896
+  $highlight-red = #FF5370
+  $highlight-orange = #F78C6C
+  $highlight-yellow = #FFCB6B
+  $highlight-green = #C3E88D
+  $highlight-aqua = #89DDFF
+  $highlight-blue = #82AAFF
+  $highlight-purple = #C792EA
+  $highlight-deletion = #BF42BF
+  $highlight-addition = #105EDE
+else if $highlight_color == "dark"
+  $highlight-comment = #6272A4
+  $highlight-red = #FF5370
+  $highlight-orange = #F78C6C
+  $highlight-yellow = #FFCB6B
+  $highlight-green = #C3E88D
+  $highlight-aqua = #89DDFF
+  $highlight-blue = #82AAFF
+  $highlight-purple = #C792EA
+  $highlight-deletion = #BF42BF
+  $highlight-addition = #105EDE
+else if $highlight_color == "funky"
+  $highlight-comment = #6272A4
+  $highlight-red = #FF5370
+  $highlight-orange = #FFCB6B
+  $highlight-yellow = #C3E88D
+  $highlight-green = #89DDFF
+  $highlight-aqua = #82AAFF
+  $highlight-blue = #C792EA
+  $highlight-purple = #FF5370
+  $highlight-deletion = #F07178
+  $highlight-addition = #C3E88D
+else if $highlight_color == "okaidia"
+  $highlight-comment = #6272A4
+  $highlight-red = #FF5370
+  $highlight-orange = #FFCB6B
+  $highlight-yellow = #C3E88D
+  $highlight-green = #89DDFF
+  $highlight-aqua = #82AAFF
+  $highlight-blue = #C792EA
+  $highlight-purple = #FF5370
+  $highlight-deletion = #F07178
+  $highlight-addition = #C3E88D
+else if $highlight_color == "tomorrow"
+  $highlight-comment = #6272A4
+  $highlight-red = #FF5370
+  $highlight-orange = #F78C6C
+  $highlight-yellow = #FFCB6B
+  $highlight-green = #C3E88D
+  $highlight-aqua = #89DDFF
+  $highlight-blue = #82AAFF
+  $highlight-purple = #C792EA
+  $highlight-deletion = #BF42BF
+  $highlight-addition = #105EDE
+else if $highlight_color == "twilight"
+  $highlight-comment = #6272A4
+  $highlight-red = #FF5370
+  $highlight-orange = #F78C6C
+  $highlight-yellow = #FFCB6B
+  $highlight-green = #C3E88D
+  $highlight-aqua = #89DDFF
+  $highlight-blue = #82AAFF
+  $highlight-purple = #C792EA
+  $highlight-deletion = #BF42BF
+  $highlight-addition = #105EDE
+else if $highlight_color == "darcula"
+  $highlight-comment = #6272A4
+  $highlight-red = #FF5370
+  $highlight-orange = #F78C6C
+  $highlight-yellow = #FFCB6B
+  $highlight-green = #C3E88D
+  $highlight-aqua = #89DDFF
+  $highlight-blue = #82AAFF
+  $highlight-purple = #C792EA
+  $highlight-deletion = #BF42BF
+  $highlight-addition = #105EDE
+else if $highlight_color == "material"
+  $highlight-comment = #546E7A
+  $highlight-red = #FF5370
+  $highlight-orange = #FFCB6B
+  $highlight-yellow = #C3E88D
+  $highlight-green = #89DDFF
+  $highlight-aqua = #82AAFF
+  $highlight-blue = #C792EA
+  $highlight-purple = #FF5370
+  $highlight-deletion = #F07178
+  $highlight-addition = #C3E88D
+else if $highlight_color == "solarized-light"
+  $highlight-comment = #93A1A1
+  $highlight-red = #DC322F
+  $highlight-orange = #CB4B16
+  $highlight-yellow = #B58900
+  $highlight-green = #859900
+  $highlight-aqua = #2AA198
+  $highlight-blue = #268BD2
+  $highlight-purple = #6C71C4
+  $highlight-deletion = #D33682
+  $highlight-addition = #859900
+else if $highlight_color == "solarized-dark"
+  $highlight-comment = #657B83
+  $highlight-red = #DC322F
+  $highlight-orange = #CB4B16
+  $highlight-yellow = #B58900
+  $highlight-green = #859900
+  $highlight-aqua = #2AA198
+  $highlight-blue = #268BD2
+  $highlight-purple = #6C71C4
+  $highlight-deletion = #D33682
+  $highlight-addition = #859900
+else if $highlight_color == "github"
+  $highlight-comment = #969896
+  $highlight-red = #D73A49
+  $highlight-orange = #BD2C00
+  $highlight-yellow = #E5C07B
+  $highlight-green = #28A745
+  $highlight-aqua = #00A9C0
+  $highlight-blue = #0366D6
+  $highlight-purple = #6F42C1
+  $highlight-deletion = #D73A49
+  $highlight-addition = #28A745
+else
+  $highlight-comment = #6272A4
+  $highlight-red = #FF5370
+  $highlight-orange = #F78C6C
+  $highlight-yellow = #FFCB6B
+  $highlight-green = #C3E88D
+  $highlight-aqua = #89DDFF
+  $highlight-blue = #82AAFF
+  $highlight-purple = #C792EA
+  $highlight-deletion = #BF42BF
+  $highlight-addition = #105EDE

package/source/css/_highlight/highlight/index.styl

@@ -0,0 +1,45 @@
+@import "diff"
+figure
+  pre
+    margin 0
+    padding 8px 0
+    border none
+  table
+    display block
+    border none
+    overflow-y hidden
+    overflow-x auto
+
+    td
+      padding 0
+      border none
+      height 100%
+
+      &.gutter
+        opacity .6
+        user-select none
+
+        pre
+          overflow auto
+          line-height 1.6
+          margin 0
+          padding 8px .5rem
+          border none
+          color var(--efu-secondtext)
+          background var(--efu-secondbg)
+          border-right var(--style-border-always)
+          text-align right
+
+      &.code
+        width 100%
+        display flex
+        position relative
+
+        pre
+          padding-right .5rem
+          padding-left .5rem
+          width 100%
+
+  .line
+    &.marked
+      background-color: rgba(97, 97, 97, .314)

package/source/css/{_widgets/_post/_highlight → _highlight}/index.styl

@@ -1,3 +1,13 @@
+@import "color"
+
+@import "theme/" + hexo-config('highlight.theme')
+
+if $highlight_enable
+  @require "highlight/index.styl"
+
+if $prismjs_enable
+  @require "prismjs/index.styl"
+
 figure
   &:hover
     box-shadow var(--efu-shadow-border-hover)
@@ -25,11 +35,6 @@ figure
     padding 0
     line-height 1.6
 
-    pre
-      margin 0
-      padding 8px 0
-      border none
-
     .highlight-tools
       position relative
       display flex
@@ -43,6 +48,13 @@ figure
       border-bottom var(--style-border-always)
       color var(--efu-fontcolor)
 
+      &.closed
+        .expand
+          transition all .3s ease 0s
+
+        & ~ *
+          display none
+
       .st-copy-fill
         position absolute
         cursor pointer
@@ -58,9 +70,6 @@ figure
         cursor pointer
         transition transform .3s ease 0s
 
-        &.closed
-          transition all .3s ease 0s
-
       .code-lang
         text-transform capitalize
         position absolute
@@ -97,47 +106,11 @@ figure
         i
           color var(--efu-white)
 
-    table
-      display block
-      border none
-      overflow-y hidden
-      overflow-x auto
-
-      td
-        padding 0
-        border none
-        height 100%
-
-        &.gutter
-          opacity .6
-          user-select none
-
-          pre
-            overflow auto
-            line-height 1.6
-            margin 0
-            padding 8px .5rem
-            border none
-            color var(--efu-secondtext)
-            background var(--efu-secondbg)
-            border-right var(--style-border-always)
-            text-align right
-
-        &.code
-          width 100%
-          display flex
-          position relative
-
-          pre
-            padding-right .5rem
-            padding-left .5rem
-            width 100%
-
-    .line
-      &.marked
-        background-color: rgba(97, 97, 97, .314)
-
-@import "theme"
-@import "diff"
-
-@import "theme/" + hexo-config('hightlight.theme')
+      &.expand-done
+        display none
+
+      &:not(.expand-done)
+        & ~ table,
+        & ~ pre
+          overflow: hidden
+          height: unit(hexo-config('highlight.limit'), px)

package/source/css/_highlight/prismjs/diff.styl

@@ -0,0 +1,80 @@
+pre[class*='language-']
+  .token
+    &.function,
+    &.punctuation
+     color $highlight-blue
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata
+    color $highlight-comment
+
+  .token.namespace
+    opacity: .7
+
+  .token.operator,
+  .token.boolean,
+  .token.number
+    color: $highlight-orange
+
+  .token.property
+    color: $highlight-yellow
+
+  .token.tag
+    color: $highlight-blue
+
+  .token.string
+    color: $highlight-green
+
+  .token.selector
+    color: $highlight-deletion
+
+  .token.attr-name
+    color: $highlight-orange
+
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string
+    color: $highlight-aqua
+
+  .token.attr-value,
+  .token.keyword,
+  .token.control,
+  .token.directive,
+  .token.unit
+    color: $highlight-yellow
+
+  .token.statement,
+  .token.regex,
+  .token.atrule
+    color: $highlight-aqua
+
+  .token.placeholder,
+  .token.variable
+    color: $highlight-blue
+
+  .token.deleted
+    text-decoration: line-through
+
+  .token.inserted
+    border-bottom: 1px dotted #202746
+    text-decoration: none
+
+  .token.italic
+    font-style: italic
+
+  .token.important,
+  .token.bold
+    font-weight: bold
+
+  .token.important
+    color: $highlight-orange
+
+  .token.entity
+    cursor: help
+
+  pre > code.highlight
+    outline: .4em solid $highlight-orange
+    outline-offset: .4em

package/source/css/_highlight/prismjs/index.styl

@@ -0,0 +1,15 @@
+@require line-number
+
+@require diff
+
+#article-container
+  pre[class*='language-']
+    margin 0
+    overflow-x auto
+    scrollbar-color var(--hlscrollbar-bg) transparent
+
+    &::-webkit-scrollbar-thumb
+      background var(--hlscrollbar-bg)
+
+    &:not(.line-numbers)
+      padding 10px 20px

package/source/css/_highlight/prismjs/line-number.styl

@@ -0,0 +1,27 @@
+#article-container
+  pre[class*='language-']
+    &.line-numbers
+      position relative
+
+      > code
+        display block
+        position relative
+        padding 8px 0 8px 45px
+
+      .line-numbers-rows
+        position absolute
+        top 0
+        left 0
+        color var(--efu-secondtext)
+        border-right var(--style-border-always)
+        padding 8px 0
+
+        & > span
+          display block
+          counter-increment linenumber
+          pointer-events none
+          text-align center
+
+          &:before
+            padding 0 0.5em
+            content counter(linenumber)

package/source/css/{_widgets/_post/_highlight → _highlight}/theme/default.styl

@@ -4,9 +4,11 @@ figure
       .st-copy-fill
         right .7rem
 
+      &.closed
+        .expand
+          transform rotate(-90deg)
+
     .expand
       & + .code-lang
         left 1.7rem
 
-      &.closed
-        transform rotate(-90deg)

package/source/css/{_widgets/_post/_highlight → _highlight}/theme/mac.styl

@@ -21,5 +21,6 @@ figure
         & + .code-lang
           left 75px
 
-        &.closed
+      &.closed
+        .expand
           transform rotate(90deg)

package/source/css/_page/index.styl

@@ -31,4 +31,7 @@ if hexo-config('music.enable')
 @import "share.styl"
 
 if hexo-config('google_adsense.enable')
-  @import "google.styl"
+  @import "google.styl"
+
+if hexo-config('message.enable')
+  @import "message/index.styl"

package/source/css/_widgets/_post/content.styl

@@ -63,7 +63,7 @@
     img
       margin auto
 
-  code
+  code:not([class*='language-'])
     color var(--efu-white)
     padding 0.2rem 0.4rem
     border-radius 4px

package/source/css/_widgets/_post/index.styl

@@ -14,7 +14,5 @@ if hexo-config('comment.commentBarrage')
 
 @import "pagination"
 
-@import "_highlight/index"
-
 if hexo-config('post_ai.enable')
   @import "postAI"

package/source/css/index.styl

@@ -11,4 +11,7 @@ if hexo-config('css_prefix')
 // widgets
 @import '_widgets/index.styl'
 
-@import '_mode/*'
+@import '_mode/*'
+
+// highlight
+@import '_highlight/index'

package/source/js/main.js

@@ -658,72 +658,103 @@ let sco = {
     },
 }
 
-class hightlight {
-    static createEle(langEl, item) {
+const AddHighLightTool = () => {
+    const highlight = GLOBAL_CONFIG.highlight;
+    if (!highlight) return;
+
+    const {copy, expand, limit, syntax} = highlight;
+    const $isPrismjs = syntax === 'prismjs';
+    const $isShowTool = highlight.enable || copy || expand || limit;
+    const expandClass = !expand === true ? 'closed' : ''
+    const $syntaxHighlight = syntax === 'highlight.js' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
+
+    if (!(($isShowTool || limit) && $syntaxHighlight.length)) return
+
+    const copyEle = copy ? `<i class="solitude st-copy-fill copy-button"></i>` : '<i></i>';
+    const expandEle = `<i class="solitude st-arrow-down expand"></i>`;
+    const limitEle = limit ? `<i class="solitude st-show-line"></i>` : '<i></i>';
+
+    const alertInfo = (ele, text) => {
+        utils.snackbarShow(text, false, 2000);
+    }
+
+    const copyCode = (e) => {
+        if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
+            document.execCommand('copy')
+            alertInfo(e, GLOBAL_CONFIG.lang.copy.success)
+        } else {
+            alertInfo(e, GLOBAL_CONFIG.lang.copy.error)
+        }
+    }
+
+    const copyFn = (e) => {
+        const $buttonParent = e.parentNode
+        $buttonParent.classList.add('copy-true')
+        const selection = window.getSelection()
+        const range = document.createRange()
+        const preCodeSelector = $isPrismjs ? 'pre code' : 'table .code pre'
+        range.selectNodeContents($buttonParent.querySelectorAll(`${preCodeSelector}`)[0])
+        selection.removeAllRanges()
+        selection.addRange(range)
+        copyCode(e.lastChild)
+        selection.removeAllRanges()
+        $buttonParent.classList.remove('copy-true')
+    }
+
+    const expandClose = (e) => {
+        e.classList.toggle('closed')
+    }
+
+    const shrinkEle = function () {
+        this.classList.toggle('expand-done')
+    }
+
+    const ToolsFn = function (e) {
+        const $target = e.target.classList
+        if ($target.contains('expand')) expandClose(this)
+        else if ($target.contains('copy-button')) copyFn(this)
+    }
+
+    const createEle = (lang, item, service) => {
         const fragment = document.createDocumentFragment()
-        const highlightCopyEle = GLOBAL_CONFIG.hightlight.copy ? '<i class="solitude st-copy-fill"></i>' : '<i></i>'
-        const highlightExpandEle = '<i class="solitude st-arrow-down expand"></i>'
-
-        const hlTools = document.createElement('div')
-        hlTools.className = `highlight-tools`
-        hlTools.innerHTML = highlightExpandEle + langEl + highlightCopyEle
-        let expand = GLOBAL_CONFIG.hightlight.expand
-        hlTools.children[0].addEventListener('click', (e) => {
-            if (expand) {
-                hlTools.children[0].classList.add('closed')
-                $table.setAttribute('style', 'display:none')
-                if ($expand.length !== 0) {
-                    $expand[0].setAttribute('style', 'display:none')
-                }
-            } else {
-                hlTools.children[0].classList.remove('closed')
-                $table.setAttribute('style', 'display:block')
-                if ($expand.length !== 0) {
-                    $expand[0].setAttribute('style', 'display:block')
-                }
-                if (GLOBAL_CONFIG.hightlight.limit && itemHeight > GLOBAL_CONFIG.hightlight.limit) {
-                    $table.setAttribute('style', `height: ${GLOBAL_CONFIG.hightlight.limit}px`)
-                } else {
-                    $table.setAttribute('style', `height: auto`)
-                }
-            }
-            expand = !expand
-        })
-        hlTools.children[2].addEventListener('click', (e) => {
-            utils.copy($table.querySelector('.code').innerText)
-        })
-        const ele = document.createElement('div')
-        fragment.appendChild(hlTools)
-        const itemHeight = item.clientHeight, $table = item.querySelector('table'),
-            $expand = item.getElementsByClassName('code-expand-btn')
-        if (GLOBAL_CONFIG.hightlight.limit && itemHeight > GLOBAL_CONFIG.hightlight.limit) {
-            $table.setAttribute('style', `height: ${GLOBAL_CONFIG.hightlight.limit}px`)
+
+        if ($isShowTool) {
+            const hlTools = document.createElement('div')
+            hlTools.className = `highlight-tools ${expandClass}`
+            hlTools.innerHTML = expandEle + lang + copyEle
+            utils.addEventListenerPjax(hlTools, 'click', ToolsFn)
+            fragment.appendChild(hlTools)
+        }
+
+        if (limit && item.offsetHeight > limit + 30) {
+
+            const ele = document.createElement('div')
             ele.className = 'code-expand-btn'
-            ele.innerHTML = '<i class="solitude st-show-line"></i>'
-            ele.addEventListener('click', (e) => {
-                $table.setAttribute('style', `height: ${itemHeight}px`)
-                e.target.classList.add('expand-done')
-                e.target.setAttribute('style', 'display:none')
-            })
+            ele.innerHTML = limitEle
+            utils.addEventListenerPjax(ele, 'click', shrinkEle)
             fragment.appendChild(ele)
         }
-        item.insertBefore(fragment, item.firstChild)
-        if (!expand) {
-            hlTools.children[0].classList.add('closed')
-            $table.setAttribute('style', 'display:none')
-            if ($expand.length !== 0) {
-                $expand[0].setAttribute('style', 'display:none')
-            }
+
+        if (service === 'hl') {
+            item.insertBefore(fragment, item.firstChild)
+        } else {
+            item.parentNode.insertBefore(fragment, item)
         }
     }
 
-    static init() {
-        const $figureHighlight = document.querySelectorAll('figure.highlight'), that = this
-        $figureHighlight.forEach(function (item) {
+    if ($isPrismjs) {
+        $syntaxHighlight.forEach(item => {
+            const langName = item.getAttribute('data-language') || 'Code'
+            const highlightLangEle = `<div class="code-lang">${langName}</div>`
+            utils.wrap(item, 'figure', {class: 'highlight'})
+            createEle(highlightLangEle, item)
+        })
+    } else {
+        $syntaxHighlight.forEach(item => {
             let langName = item.getAttribute('class').split(' ')[1]
-            if (langName === 'plaintext' || langName === undefined) langName = 'Code'
-            const highlightLangEle = `<div class="code-lang">${langName.toUpperCase()}</div>`
-            that.createEle(highlightLangEle, item)
+            if (langName === 'plain' || langName === undefined) langName = 'Code'
+            const highlightLangEle = `<div class="code-lang">${langName}</div>`
+            createEle(highlightLangEle, item, 'hl')
         })
     }
 }
@@ -785,7 +816,7 @@ window.refreshFn = () => {
     GLOBAL_CONFIG.randomlinks && randomLinksList()
     PAGE_CONFIG.comment && initComment()
     PAGE_CONFIG.toc && toc.init();
-    (PAGE_CONFIG.is_post || PAGE_CONFIG.is_page) && ((GLOBAL_CONFIG.hightlight.enable && hightlight.init()) || tabs.init())
+    (PAGE_CONFIG.is_post || PAGE_CONFIG.is_page) && ((AddHighLightTool()) || tabs.init())
     PAGE_CONFIG.is_home && showTodayCard()
     GLOBAL_CONFIG.covercolor.enable && coverColor()
     sco.initConsoleState()

package/source/js/utils.js

@@ -136,12 +136,11 @@ const utils = {
     },
     isMobile: () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
     isHidden: e => 0 === e.offsetHeight && 0 === e.offsetWidth,
-    addEventListenerPjax: function (element, eventType, callback, useCapture = false) {
-        if (element == null) return
-        element.addEventListener(eventType, callback, useCapture);
-        utils.addGlobalFn("pjax", function () {
-            element.removeEventListener(eventType, callback, useCapture);
-        });
+    addEventListenerPjax: (ele, event, fn, option = false) => {
+        ele.addEventListener(event, fn, option)
+        utils.addGlobalFn('pjax', () => {
+            ele.removeEventListener(event, fn, option)
+        })
     },
     addGlobalFn: (key, fn, name = false, parent = window) => {
         const globalFn = parent.globalFn || {}