build: update code block configuration items

This commit is contained in:
XPoet 2022-10-20 12:22:06 +08:00
parent 212f04c7dc
commit 53155ad495
6 changed files with 69 additions and 62 deletions

View File

@ -157,6 +157,7 @@ post:
# Support code copy and code block collapse # Support code copy and code block collapse
# --------------------------------------------------------------------------------------- # ---------------------------------------------------------------------------------------
code_block: code_block:
tools: # Include "code copy", "code block collapse" and "code language"
enable: false # Option values: true | false enable: false # Option values: true | false
style: default # Option values: default | mac style: default # Option values: default | mac
highlight_theme: default # Option values: default | obsidian highlight_theme: default # Option values: default | obsidian

View File

@ -21,7 +21,7 @@ const {
<%- __js('js/local-search.js') %> <%- __js('js/local-search.js') %>
<% } %> <% } %>
<% if (t_code_block?.enable === true || t_code_copy?.enable === true) { %> <% if (t_code_copy?.enable === true || t_code_block?.enable === true || t_code_block?.tools?.enable === true) { %>
<%- __js('js/code-block.js') %> <%- __js('js/code-block.js') %>
<% } %> <% } %>

View File

@ -3,60 +3,7 @@
box-sizing border-box box-sizing border-box
margin 1.4rem 0 margin 1.4rem 0
.code-tools-box { &.mac {
display flex
align-items center
justify-content space-between
box-sizing border-box
width 100%
padding 0.3rem 0.4rem
color var(--toolbar-foreground)
background var(--toolbar-background)
border-top-left-radius 0.3rem
border-top-right-radius 0.3rem
&.folded {
border-bottom-right-radius 0.3rem
border-bottom-left-radius 0.3rem
}
.code-lang {
justify-content flex-start
margin-left 0.2rem
font-weight 600
font-size 0.9rem
font-family "Source Code Pro", consolas, Menlo
}
.tool {
disable-user-select()
cursor pointer
i {
font-size 0.8rem
}
}
.fold {
padding 0 0.4rem 0 0.2rem
}
}
figure.highlight {
margin 0
&.folded {
height 0
}
}
if (hexo-config('code_block.style') == 'mac' || hexo-config('code_copy.style') == 'mac') {
margin 1.4rem 0 1.8rem 0 margin 1.4rem 0 1.8rem 0
box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, 0.4) box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, 0.4)
@ -124,4 +71,58 @@
} }
} }
} }
.code-tools-box {
display flex
align-items center
justify-content space-between
box-sizing border-box
width 100%
padding 0.3rem 0.4rem
color var(--toolbar-foreground)
background var(--toolbar-background)
border-top-left-radius 0.3rem
border-top-right-radius 0.3rem
&.folded {
border-bottom-right-radius 0.3rem
border-bottom-left-radius 0.3rem
}
.code-lang {
justify-content flex-start
margin-left 0.2rem
font-weight 600
font-size 0.9rem
font-family "Source Code Pro", consolas, Menlo
}
.tool {
disable-user-select()
cursor pointer
i {
font-size 0.8rem
}
}
.fold {
padding 0 0.4rem 0 0.2rem
}
}
figure.highlight {
margin 0
&.folded {
height 0
}
}
} }

View File

@ -10,7 +10,7 @@ $dark-code-background = darken($dark-background-color-1, 10%)
if (hexo-config('code_block.highlight_theme') == 'obsidian') { if (hexo-config('code_block.highlight_theme') == 'obsidian') {
$toolbar-foreground = #b5b5b5 $toolbar-foreground = #b5b5b5
$toolbar-background = #3a3f40 $toolbar-background = #3a3f40
$highlight-foreground = #e8e2bb $highlight-foreground = #faf5d6
$highlight-background = #273036 $highlight-background = #273036
$highlight-gutter-color = #7a979a $highlight-gutter-color = #7a979a
$highlight-gutter-bg-color = #273130 $highlight-gutter-bg-color = #273130

View File

@ -7,9 +7,11 @@ KEEP.initCodeBlockTools = () => {
wrapper.appendChild(this) wrapper.appendChild(this)
} }
const { style: codeCopyStyle } = KEEP.theme_config?.code_copy const {style: codeCopyStyle} = KEEP.theme_config?.code_copy || {}
const { style: codeBlockStyle } = KEEP.theme_config?.code_block const {style: codeBlockStyle} = KEEP.theme_config?.code_block || {}
const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac' const {style: codeBlockToolsStyle} = KEEP.theme_config?.code_block?.tools || {}
const isMac = (codeCopyStyle || codeBlockStyle || codeBlockToolsStyle || 'default') === 'mac'
const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right' const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right'
const { const {
copy: copyLang, copy: copyLang,
@ -26,6 +28,9 @@ KEEP.initCodeBlockTools = () => {
} }
const highlightContainer = document.createElement('div') const highlightContainer = document.createElement('div')
highlightContainer.classList.add('highlight-container') highlightContainer.classList.add('highlight-container')
if (isMac) {
highlightContainer.classList.add('mac')
}
element.wrap(highlightContainer) element.wrap(highlightContainer)
const codeLangDom = `${codeLang ? '<span class="code-lang">' + codeLang + '</span>' : ''}` const codeLangDom = `${codeLang ? '<span class="code-lang">' + codeLang + '</span>' : ''}`

View File

@ -56,7 +56,7 @@ window.addEventListener('DOMContentLoaded', () => {
KEEP.initLocalSearch() KEEP.initLocalSearch()
} }
if (code_block?.enable === true || code_copy?.enable === true) { if (code_block?.tools?.enable === true || code_block?.enable === true || code_copy?.enable === true) {
KEEP.initCodeBlockTools() KEEP.initCodeBlockTools()
} }