build: update code block configuration items
This commit is contained in:
parent
deb0706e04
commit
51d4d1cc43
|
@ -157,8 +157,9 @@ post:
|
||||||
# Support code copy and code block collapse
|
# Support code copy and code block collapse
|
||||||
# ---------------------------------------------------------------------------------------
|
# ---------------------------------------------------------------------------------------
|
||||||
code_block:
|
code_block:
|
||||||
enable: false # Option values: true | false
|
tools: # Include "code copy", "code block collapse" and "code language"
|
||||||
style: default # Option values: default | mac
|
enable: false # Option values: true | false
|
||||||
|
style: default # Option values: default | mac
|
||||||
highlight_theme: default # Option values: default | obsidian
|
highlight_theme: default # Option values: default | obsidian
|
||||||
|
|
||||||
# ---------------------------------------------------------------------------------------
|
# ---------------------------------------------------------------------------------------
|
||||||
|
|
|
@ -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') %>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>' : ''}`
|
||||||
|
|
|
@ -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()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue