build: update code block configuration items
This commit is contained in:
XPoet
parent
212f04c7dc
commit
53155ad495
|
|
@ -157,8 +157,9 @@ post:
|
|||
# Support code copy and code block collapse
|
||||
# ---------------------------------------------------------------------------------------
|
||||
code_block:
|
||||
enable: false # Option values: true | false
|
||||
style: default # Option values: default | mac
|
||||
tools: # Include "code copy", "code block collapse" and "code language"
|
||||
enable: false # Option values: true | false
|
||||
style: default # Option values: default | mac
|
||||
highlight_theme: default # Option values: default | obsidian
|
||||
|
||||
# ---------------------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const {
|
|||
<%- __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') %>
|
||||
<% } %>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,60 +3,7 @@
|
|||
box-sizing border-box
|
||||
margin 1.4rem 0
|
||||
|
||||
.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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (hexo-config('code_block.style') == 'mac' || hexo-config('code_copy.style') == 'mac') {
|
||||
&.mac {
|
||||
margin 1.4rem 0 1.8rem 0
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ $dark-code-background = darken($dark-background-color-1, 10%)
|
|||
if (hexo-config('code_block.highlight_theme') == 'obsidian') {
|
||||
$toolbar-foreground = #b5b5b5
|
||||
$toolbar-background = #3a3f40
|
||||
$highlight-foreground = #e8e2bb
|
||||
$highlight-foreground = #faf5d6
|
||||
$highlight-background = #273036
|
||||
$highlight-gutter-color = #7a979a
|
||||
$highlight-gutter-bg-color = #273130
|
||||
|
|
|
|||
|
|
@ -7,9 +7,11 @@ KEEP.initCodeBlockTools = () => {
|
|||
wrapper.appendChild(this)
|
||||
}
|
||||
|
||||
const { style: codeCopyStyle } = KEEP.theme_config?.code_copy
|
||||
const { style: codeBlockStyle } = KEEP.theme_config?.code_block
|
||||
const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac'
|
||||
const {style: codeCopyStyle} = KEEP.theme_config?.code_copy || {}
|
||||
const {style: codeBlockStyle} = KEEP.theme_config?.code_block || {}
|
||||
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 {
|
||||
copy: copyLang,
|
||||
|
|
@ -26,6 +28,9 @@ KEEP.initCodeBlockTools = () => {
|
|||
}
|
||||
const highlightContainer = document.createElement('div')
|
||||
highlightContainer.classList.add('highlight-container')
|
||||
if (isMac) {
|
||||
highlightContainer.classList.add('mac')
|
||||
}
|
||||
element.wrap(highlightContainer)
|
||||
|
||||
const codeLangDom = `${codeLang ? '<span class="code-lang">' + codeLang + '</span>' : ''}`
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
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()
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue