biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-12 14:07:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 適配 hexo 5.0.0 的 prismjs, 代碼主題和各項功能

Browse Source 
refactor: 移除 代碼default主題
fix: 修復夜間模式下代碼塊有背景的bugs（沒開啟渲染的情況下）
feat: 增加 code font-size配置 close #322
refactor: 更改配置中 code-font 為 code-font-family
feat: Pjax下，刷新頁面時，會滾動到上次瀏覽的位置
fix: 修復mathjax溢出屏幕的Bugs close #321
This commit is contained in:
Jerry
2020-08-19 00:21:18 +08:00
parent 973306898a
commit 543cd94c9f
15 changed files with 557 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
_config.yml
View File

@@ -23,7 +23,7 @@ hide_sidebar_menu_child: false
# Code Blocks (代碼相關)
# --------------------------------------
highlight_theme: light # default / darker / pale night / light / ocean / mac / mac light / false
highlight_theme: light # darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
@@ -550,9 +550,10 @@ beautify:
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
global-font-size: # The unit must be 'px', default is 14px
global-font-size:
code-font-size:
font-family:
code-font:
code-font-family:
# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
@@ -869,3 +870,8 @@ CDN:
aplayer_css: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
aplayer_js: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
meting_js: https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js
# Prism.js
prismjs_js: https://cdn.jsdelivr.net/npm/prismjs/prism.min.js
prismjs_lineNumber_js: https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js
prismjs_autoloader: https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js

2
layout/includes/additional-js.pug
View File

@@ -46,6 +46,8 @@ div
!=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})
!=partial('includes/third-party/prismjs', {}, {cache:theme.fragment_cache})
!=partial('includes/third-party/effect', {}, {cache:theme.fragment_cache})
!=partial('includes/third-party/chat/index', {}, {cache:theme.fragment_cache})

10
layout/includes/third-party/math/mathjax.pug vendored
View File

@@ -28,7 +28,15 @@ script.
math.end = {node: text, delim: '', n: 0}
doc.math.push(math)
}
}, '']
}, ''],
addClass: [200,() => {
document.querySelectorAll('mjx-container:not([display=\'true\']').forEach( node => {
const target = node.parentNode
if (!target.classList.contains('has-jax')) {
target.classList.add('mathjax-overflow')
}
})
}, '', false]
}
}
}

6
layout/includes/third-party/pjax.pug vendored
View File

@@ -23,6 +23,8 @@ script.
elements: '!{pjaxExclude}',
selectors: pjaxSelectors,
cacheBust: false,
analytics: !{theme.google_analytics ? true : false},
scrollRestoration: false
})
document.addEventListener('pjax:complete', function () {
@@ -47,6 +49,9 @@ script.
if (!{theme.tencent_analytics ? true : false}) {
MtaH5.pgv()
}
// prismjs
typeof Prism === 'object' && Prism.highlightAll()
})
@@ -65,5 +70,6 @@ script.
//reset readmode
$('body').hasClass('read-mode') && $('body').removeClass('read-mode')
})

5
layout/includes/third-party/prismjs.pug vendored Normal file
View File

@@ -0,0 +1,5 @@
if config.prismjs && config.prismjs.enable && !config.prismjs.preprocess
script(src=url_for(theme.CDN.prismjs_js))
script(src=url_for(theme.CDN.prismjs_autoloader))
if config.prismjs.line_number
script(src=url_for(theme.CDN.prismjs_lineNumber_js))

62
source/css/_highlight/highlight.styl
View File

@@ -1,12 +1,16 @@
// https://github.com/equinusocio/vsc-material-theme
$highlight_theme = hexo-config('highlight_theme')
$highlighEnable = hexo-config('rootConfig.highlight') && hexo-config('rootConfig.highlight.enable')
$prismjsEnable = hexo-config('rootConfig.prismjs') && hexo-config('rootConfig.prismjs.enable')
wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap')
@require 'theme'
if $highlight_theme != false
@require 'diff'
if $highlighEnable
@require 'highlight/index'
wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap')
if $prismjsEnable
@require 'prismjs/index'
$code-block
overflow: auto
@@ -45,7 +49,7 @@ blockquote
#article-container
pre,
code
font-family: $code-font !important
font-family: $code-font-family !important
code
padding: .1rem .2rem
@@ -58,6 +62,7 @@ blockquote
pre
@extend $code-block
padding: 10px 20px
font-size: $code-font-size
code
padding: 0
@@ -74,55 +79,6 @@ blockquote
padding: 8px 0
border: none
.line
if wordWrap
&:before
display: inline-block
padding: 0 .3rem 0 0
min-width: 1.6rem
color: $highlight-gutter.color
content: counter(line)
counter-increment: line
text-align: left
&.marked
background-color: $highlight-selection
table
display: block
overflow: auto
border: none
td
padding: 0
border: none
figcaption
clearfix()
padding: .3rem 0 .1rem .7rem
font-size: 1em
line-height: 1em
a
float: right
padding-right: 10px
color: $highlight-foreground
&:hover
border-bottom-color: $highlight-foreground
.gutter pre
padding-right: .5rem
padding-left: .5rem
background-color: $highlight-gutter.bg-color
color: $highlight-gutter.color
text-align: right
.code pre
padding-right: .5rem
padding-left: .5rem
width: 100%
.highlight-tools
position: relative
display: flex

0
source/css/_highlight/diff.styl → source/css/_highlight/highlight/diff.styl
View File

54
source/css/_highlight/highlight/index.styl Normal file
View File

@@ -0,0 +1,54 @@
if $highlight_theme != false
@require 'diff'
#article-container
figure.highlight
.line
if wordWrap
&:before
display: inline-block
padding: 0 .3rem 0 0
min-width: 1.6rem
color: $highlight-gutter.color
content: counter(line)
counter-increment: line
text-align: left
&.marked
background-color: $highlight-selection
table
display: block
overflow: auto
border: none
td
padding: 0
border: none
figcaption
clearfix()
padding: .3rem 0 .1rem .7rem
font-size: 1em
line-height: 1em
a
float: right
padding-right: 10px
color: $highlight-foreground
&:hover
border-bottom-color: $highlight-foreground
.gutter pre
padding-right: .5rem
padding-left: .5rem
background-color: $highlight-gutter.bg-color
color: $highlight-gutter.color
text-align: right
.code pre
padding-right: .5rem
padding-left: .5rem
width: 100%

302
source/css/_highlight/prismjs/diff.styl Normal file
View File

@@ -0,0 +1,302 @@
if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
// prism-base16-ateliersulphurpool.light
pre[class*='language-']
.token.function
color: #ffb62c
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
color: rgba(149, 165, 166, .8)
.token.punctuation
color: #5e6687
.token.namespace
opacity: .7
.token.operator,
.token.boolean,
.token.number
color: #c76b29
.token.property
color: #c08b30
.token.tag
color: #3d8fd1
.token.string
color: #22a2c9
.token.selector
color: #6679cc
.token.attr-name
color: #c76b29
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string
color: #22a2c9
.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit
color: #ac9739
.token.statement,
.token.regex,
.token.atrule
color: #22a2c9
.token.placeholder,
.token.variable
color: #3d8fd1
.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: #c94922
.token.entity
cursor: help
pre > code.highlight
outline: .4em solid #c94922
outline-offset: .4em
if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
// prism-atom-dark
pre[class*='language-']
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
color: #7C7C7C
.token.punctuation
color: #c5c8c6
.namespace
opacity: .7
.token.property,
.token.keyword,
.token.tag
color: #96CBFE
.token.class-name
color: #FFFFB6
.token.boolean,
.token.constant
color: #99CC99
.token.symbol,
.token.deleted
color: #f92672
.token.number
color: #FF73FD
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted
color: #A8FF60
.token.variable
color: #C6C5FE
.token.operator
color: #EDEDED
.token.entity
color: #FFFFB6
cursor: help
.token.url
color: #96CBFE
.language-css .token.string,
.style .token.string
color: #87C38A
.token.atrule,
.token.attr-value
color: #F9EE98
.token.function
color: #DAD085
.token.regex
color: #E9C062
.token.important
color: #fd971f
.token.important,
.token.bold
font-weight: bold
.token.italic
font-style: italic
if $highlight_theme == 'pale night'
// prism-dracula
pre[class*='language-']
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
color: #6272a4
.token.punctuation
color: #f8f8f2
.namespace
opacity: .7
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted
color: #ff79c6
.token.boolean,
.token.number
color: #bd93f9
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted
color: #50fa7b
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable
color: #f8f8f2
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name
color: #f1fa8c
.token.keyword
color: #8be9fd
.token.regex,
.token.important
color: #ffb86c
.token.important,
.token.bold
font-weight: bold
.token.italic
font-style: italic
.token.entity
cursor: help
if $highlight_theme == 'ocean'
// prism-material-oceanic
pre[class*='language-']
&.language-css > code,
&.language-sass > code,
&.language-scss > code
color: #fd9170 !important
.namespace
opacity: .7
.token.atrule,
.token.symbol,
.token.constant,
.token.boolean,
.token.function
color: #c792ea
.token.attr-name,
.token.builtin,
.token.class
color: #ffcb6b
.token.attr-value,
.token.attribute,
.token.pseudo-class,
.token.pseudo-element,
.token.string
color: #c3e88d
.token.cdata,
.token.property,
.token.char,
.token.inserted
color: #80cbc4
.token.class-name,
.token.color,
.token.hexcode,
.token.regex
color: #f2ff00
.token.comment,
.token.prolog,
.token.doctype
color: #546e7a
.token.deleted,
.token.variable,
.token.entity,
.token.selector,
.token.tag,
.token.unit
color: #f07178
.token.id
color: #c792ea
font-weight: bold
.token.important
color: #c792ea
font-weight: bold
.token.keyword
color: #c792ea
font-style: italic
.token.number,
.token.url
color: #fd9170
.token.operator,
.token.punctuation
color: #89ddff

13
source/css/_highlight/prismjs/index.styl Normal file
View File

@@ -0,0 +1,13 @@
if hexo-fonfig('rootConfig.prismjs.line_number')
@require 'line-number'
if $highlight_theme != false
@require 'diff'
#article-container
pre[class*='language-']
&::-webkit-scrollbar-thumb
background: $highlight-scrollbar
&:not(.line-numbers)
padding: 10px 20px

34
source/css/_highlight/prismjs/line-number.styl Normal file
View File

@@ -0,0 +1,34 @@
#article-container
pre[class*='language-']
&.line-numbers
position: relative
padding-left: 3.8em
counter-reset: linenumber
line-height: $line-height-code-block
> code
position: relative
white-space: inherit
line-height: $line-height-code-block
.line-numbers-rows
position: absolute
top: 0
left: -3.8em
width: 3em
letter-spacing: -1px
font-size: 100%
pointer-events: none
user-select: none
& > span
display: block
counter-increment: linenumber
pointer-events: none
&:before
display: block
padding-right: .8em
color: $highlight-gutter.color
content: counter(linenumber)
text-align: right

99
source/css/_highlight/theme.styl
View File

@@ -1,45 +1,7 @@
$highlight_theme = hexo-config('highlight_theme')
if $highlight_theme == 'default'
$highlight-background = #263238
$highlight-current-line = #efefef
$highlight-selection = #80CBC420
$highlight-foreground = #EEFFFF
$highlight-comment = #546E7A
$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
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: alpha($highlight-foreground, .8),
bg-color: darken($highlight-background, 2)
}
$highlight-scrollbar = darken($highlight-background, 6)
if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
$highlight-background = #212121
$highlight-current-line = #282a2e
$highlight-selection = #61616150
$highlight-foreground = #EEFFFF
$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
$highlight-mac-border = rgba(0, 0, 0, .4)
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
@@ -51,12 +13,8 @@ if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
}
$highlight-scrollbar = darken($highlight-background, 6)
if $highlight_theme == 'pale night'
$highlight-background = #292D3E
$highlight-current-line = #393939
$highlight-selection = #717CB450
$highlight-foreground = #A6ACCD
$highlight-comment = #676E95
if $highlighEnable
$highlight-comment = #969896
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
@@ -66,6 +24,11 @@ if $highlight_theme == 'pale night'
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
if $highlight_theme == 'pale night'
$highlight-background = #292D3E
$highlight-selection = #717CB450
$highlight-foreground = #A6ACCD
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
@@ -76,12 +39,8 @@ if $highlight_theme == 'pale night'
}
$highlight-scrollbar = darken($highlight-background, 6)
if $highlight_theme == 'ocean'
$highlight-background = #0F111A
$highlight-current-line = #000000
$highlight-selection = #717CB450
$highlight-foreground = #8F93A2
$highlight-comment = rgba(101, 115, 126, .8)
if $highlighEnable
$highlight-comment = #676E95
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
@@ -91,6 +50,11 @@ if $highlight_theme == 'ocean'
$highlight-purple = #C792EA
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
if $highlight_theme == 'ocean'
$highlight-background = #0F111A
$highlight-selection = #717CB450
$highlight-foreground = #8F93A2
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
@@ -101,11 +65,34 @@ if $highlight_theme == 'ocean'
}
$highlight-scrollbar = darken($highlight-background, 5)
if $highlighEnable
$highlight-comment = rgba(101, 115, 126, .8)
$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
if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
$highlight-background = #F6F8FA
$highlight-current-line = #00346e
$highlight-selection = #80CBC440
$highlight-foreground = #90A4AE
$highlight-mac-border = rgba(144, 164, 174, .4)
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 5)
}
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-scrollbar = darken($highlight-background, 8)
if $highlighEnable
$highlight-comment = rgba(149, 165, 166, .8)
$highlight-red = #E53935
$highlight-orange = #F76D47
@@ -116,16 +103,6 @@ if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
$highlight-purple = #7C4DFF
$highlight-deletion = #BF42BF
$highlight-addition = #105EDE
$highlight-mac-border = rgba(144, 164, 174, .4)
$highlight-gutter = {
color: alpha($highlight-foreground, .5),
bg-color: $highlight-background
}
$highlight-tools = {
color: $highlight-foreground,
bg-color: darken($highlight-background, 5)
}
$highlight-scrollbar = darken($highlight-background, 8)
if $highlight_theme == false
$highlight-background = #F6F8FA

8
source/css/_layout/third-party.styl
View File

@@ -59,12 +59,14 @@
padding: .3rem 0 .8em
// mathjax
.mathjax-overflow
overflow-x: auto
overflow-y: hidden
mjx-container[jax='CHTML'][display='true']
overflow-x: auto
overflow-y: hidden
padding-bottom: .5rem
outline: 0
line-height: 2
padding-bottom: .3rem
.aplayer
color: $font-black

10
source/css/_mode/darkmode.styl
View File

@@ -44,9 +44,13 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
#page-header
background-color: #121212
#article-container code
#article-container
code
background: #2c2c2c
pre > code
background: 0
// 頭部
#page-header
&:before
@@ -74,6 +78,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
figure.highlight
box-shadow: none
if hexo-config('rootConfig.highlight') && hexo-config('rootConfig.highlight.enable')
table::-webkit-scrollbar-thumb
background: lighten(#121212, 5)
@@ -83,6 +88,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
.hljs
background-color: lighten(#121212, 2) !important
pre[class*='language-']::-webkit-scrollbar-thumb
background: lighten(#121212, 5)
.highlight-tools
background: lighten(#121212, 3) !important
color: #90a4ae !important

3
source/css/var.styl
View File

@@ -16,7 +16,7 @@ $theme-toc-color = $themeColorEnable && hexo-config('theme_color.toc_color') ? c
$dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif
$dafault-code-font = consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif
$font-family = hexo-config('font.font-family') ? unquote(hexo-config('font.font-family')) : $dafault-font-family
$code-font = hexo-config('font.code-font') ? unquote(hexo-config('font.code-font')) : $dafault-code-font
$code-font-family = hexo-config('font.code-font-family') ? unquote(hexo-config('font.code-font-family')) : $dafault-code-font
$site-name-font = hexo-config('blog_title_font.font-family') ? unquote(hexo-config('blog_title_font.font-family')) : $font-family
// hr
$hrEnable = hexo-config('hr_icon') && hexo-config('hr_icon.enable')
@@ -28,6 +28,7 @@ $title-prefix-icon = $beautifyEnable ? hexo-config('beautify.title-prefix-icon')
$title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
// Global Variables
$font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px
$code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : $font-size
$font-color = #1F2D3D
$rem = 20px
$text-line-height = 2