xaoxuu
/
hexo-theme-stellar
mirror of https://github.com/xaoxuu/hexo-theme-stellar
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

mermaid

This commit is contained in:
xaoxuu 2023-07-18 22:17:14 +08:00
parent dae9a259a3
commit a63941bdb1
4 changed files with 98 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_config.yml
View File

@ -351,8 +351,7 @@ plugins:
# js: https://unpkg.com/mermaid@9.0.0/dist/mermaid.min.js
js: https://cdn.jsdelivr.net/npm/mermaid@v9/dist/mermaid.min.js
# Available themes: default | dark | forest | neutral
# 推荐使用 dark 主题 在夜间模式下显示效果更好
theme: dark
theme: neutral
# 代码块复制按钮
copycode:

3
layout/page.ejs
View File

@ -12,6 +12,9 @@ function layoutDiv() {
if (page.post_list) {
el += partial('_partial/main/navbar/list_post');
}
if (page.mermaid == true) {
el += partial('mermaid');
}
if (page.h1 || page.title || (page.content && page.content.length > 0)) {
el += partial('_partial/main/navbar/breadcrumb');
}

3
layout/wiki.ejs
View File

@ -29,6 +29,9 @@ function layoutTitle() {
page.header = 'auto';
}
%>
<% if (page.mermaid == true){ %>
<%- partial('mermaid') %>
<% } %>
<%- partial('_partial/main/navbar/breadcrumb') %>
<article class='md-text content <%- page.layout %><%- page.indent ? ' indent' : '' %><%- scrollreveal() %>'>
<%- layoutTitle() %>

167
source/css/_plugins/mermaid.styl
View File

@ -1,106 +1,121 @@
pre.mermaid {
display: inline-block;
width: 100%;
text-align: center;
}
pre.mermaid
display: inline-block
width: 100%
text-align: center
font-family: $ff-body
.mermaid svg {
width: 100%;
display: inline-block;
}
.mermaid svg
width: 100%
display: inline-block
.mermaid svg
width: 100%
display: inline-block
.mermaid span,text
font-family: $ff-body
.mermaid .edgeLabel
padding: 4px
background-color: var(--site-bg) !important
.mermaid rect.basic.label-container
stroke: var(--block-border) !important
fill: var(--block) !important
set_mermaid_darkmode()
.mermaid {
fill: #ccc !important;
}
.mermaid
fill: #ccc !important
.mermaid .error-icon {
fill: #a44141 !important;
}
.mermaid .error-text {
fill: #ddd !important;
stroke: #ddd !important;
}
.mermaid .error-icon
fill: #a44141 !important
.mermaid .marker {
fill: lightgrey !important;
stroke: lightgrey !important;
}
.mermaid .marker.cross {
stroke: lightgrey !important;
}
.mermaid .error-text
fill: #ddd !important
stroke: #ddd !important
.mermaid .label {
color: #ccc !important;
}
.mermaid .cluster-label text {
fill: #F9FFFE !important;
}
.mermaid .marker
fill: lightgrey !important
stroke: lightgrey !important
.mermaid .marker.cross
stroke: lightgrey !important
.mermaid .label
color: #ccc !important
.mermaid .cluster-label text
fill: #F9FFFE !important
.mermaid .cluster-label span
color: #F9FFFE !important
.mermaid .cluster-label span {
color: #F9FFFE !important;
}
.mermaid .label text,
.mermaid span {
fill: #ccc !important;
color: #ccc !important;
}
.mermaid span
fill: #ccc !important
color: #ccc !important
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .node path {
fill: #1f2020 !important;
stroke: #81B1DB !important;
}
.mermaid .node path
fill: #1f2020 !important
stroke: #81B1DB !important
.mermaid .arrowheadPath {
fill: lightgrey !important;
}
.mermaid .edgePath .path {
stroke: lightgrey !important;
}
.mermaid .arrowheadPath
fill: lightgrey !important
.mermaid .flowchart-link {
stroke: lightgrey !important;
}
.mermaid .edgeLabel {
background-color: hsl(0, 0%, 34.4117647059%) !important;
}
.mermaid .edgePath .path
stroke: lightgrey !important
.mermaid .edgeLabel rect {
background-color: hsl(0, 0%, 34.4117647059%) !important;
fill: hsl(0, 0%, 34.4117647059%) !important;
}
.mermaid .cluster rect {
fill: hsl(180, 1.5873015873%, 28.3529411765%) !important;
stroke: rgba(255, 255, 255, 0.25) !important;
}
.mermaid .flowchart-link
stroke: lightgrey !important
.mermaid .cluster text {
fill: #F9FFFE !important;
}
.mermaid .cluster span {
color: #F9FFFE !important;
}
.mermaid .edgeLabel
background-color: hsl(0, 0%, 34.4117647059%) !important
.mermaid div.mermaidTooltip {
background: hsl(20, 1.5873015873%, 12.3529411765%) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.mermaid .flowchartTitleText {
fill: #ccc;
}
.mermaid .edgeLabel rect
background-color: hsl(0, 0%, 34.4117647059%) !important
fill: hsl(0, 0%, 34.4117647059%) !important
.mermaid .cluster rect
fill: hsl(180, 1.5873015873%, 28.3529411765%) !important
stroke: rgba(255, 255, 255, 0.25) !important
.mermaid .cluster text
fill: #F9FFFE !important
.mermaid .cluster span
color: #F9FFFE !important
.mermaid div.mermaidTooltip
background: hsl(20, 1.5873015873%, 12.3529411765%) !important
border: 1px solid rgba(255, 255, 255, 0.25) !important
.mermaid .flowchartTitleText
fill: #ccc
if hexo-config('style.darkmode') == 'auto'
@media (prefers-color-scheme: dark)