🔵HexoFluid主题代码块样式修改

本文最后更新于:2022年5月21日 晚上

文字选中样式

/source/css目录新建selection.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
::selection {
background: #ffffff00;
color: #f00;
}

.icon {
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}

pre::selection, pre ::selection {
background: #fff;
}

[data-user-color-scheme='dark'] pre::selection, [data-user-color-scheme='dark'] pre ::selection {
background: #424858;
color: #fff;
}

/* 标题,目录...不可选中 */
h1, h2, h3, h4, h5, h6, .line, footer, #toc, time, #subtitle.h2, .nav-link, .post-meta.mr-2, #busuanzi_container_page_pv, .note, .hover-with-bg {
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}

_fluid.config.yml引入selection.css

1
2
3
4
5
# 指定自定义 .css 文件路径,用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:
# -...
- /css/selection.css

代码块样式

Mac-border

source/css新建macBorder.css_fluid.config.yml中导入(同上)

若为了方便,可以直接在selection.css添加

source/css/sleection.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
.hljs-comment, .hljs-quote {
color: #ff6262;
font-family: auto;
font-style: normal;
}


figure.highlight {
background: #838383;
border-radius: 5px;
padding-top: 30px;
box-shadow: 0 5px 10px #a1a1a1;
}

[data-user-color-scheme='dark'] figure.highlight {
background: #000;
}

/* 该伪元素用于展示代码语言,若不需要可删除 */
figure.highlight::before {
content: attr(data-type);
z-index: 999;
color: #ff8d33;
display: block;
width: 100%;
position: absolute;
top: 2px;
text-align: center;
font-weight: 600;
}

figure.highlight::after {
background: #fc625d;
border-radius: 100%;
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
content: '';
height: 12px;
width: 12px;
position: absolute;
top: 9px;
left: 12px;
}

.hljs {
background-color: #00000000;
}

/* 代码块颜色 */
figure.highlight tr {
background-color: #f9fffa;
}

[data-user-color-scheme='dark'] .markdown-body table tr {
background-color: #25272d;
}

figure.highlight > table {
border-radius: 0 0 5px 5px;
}

.gutter {
background-color: #f9fffa;
}

[data-user-color-scheme='dark'] .gutter {
background-color: #25272d;
}

该方案基于<table>标签,所以务必把行号显示打开,且方案基于highlight.js高亮

若未生效,试试hexo clean+hexo g

_fluid.config.yml

1
2
3
# 代码块是否显示行号
# If true, the code block display line numbers
line_number: true

显示文件路径

若为了方便,可以直接在selection.css添加

source/css/sleection.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
p.file-path + figure.highlight {
border-top-left-radius: 0;
}

p.file-path {
font-family: 华文新魏,SSTXinwei;
color: #9ce159;
background: #838383;
border-radius: 5px 0 0 0;
height: 1.6rem;
margin-bottom: -0.5rem;
padding: 0 0.2rem 0 0.2rem;
display: inline-block;
font-weight: 600;
position: relative;
top: 1.5rem;
filter: drop-shadow(0 0 4px #a1a1a1);
}

p.file-path>span {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl;
text-align: left;
max-width: 500px;
}

@media (max-width: 768px) {
p.file-path>span {
max-width: 300px;
}
}

@media (max-width: 500px) {
p.file-path>span {
max-width: 160px;
}
}

[data-user-color-scheme='dark'] p.file-path {
background: #000;
}

p.file-path::before {
content: '🔖 Path:/';
color: #ff7e7e;
font-weight: 700;
position: relative;
top: -0.4rem;
}

p.file-path::after {
content: '';
display: inline-block;
width: 0;
height: 0;
position: absolute;
border-width: 20px;
border-top: 0.8rem solid #00000000;
border-bottom: 0.8rem solid #00000000;
right: -1.2rem;
border-left: 20px solid #838383;
}

[data-user-color-scheme='dark'] p.file-path::after {
border-left: 20px solid #000;
}

路径使用

在代码块上一行添加<p class="file-path"><span>这里写路径</span></p>

1
2
3
4
5
6
<p class="file-path"><span>这里写路径</span></p>
```markdown
#### 路径使用

在代码块上一行添加`<p class="file-path"><span>这里写路径</span></p>`
```

sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss/sssssssss/ssssssssss/sssssssssssss/超出省略/这里写路径

1
2
3
4
5
6
7
8
9
10
#### 路径使用

在代码块上一行添加
`
<p class="file-path">
<span>
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss/sssssssss/ssssssssss/sssssssssssss/超出省略/这里写路径
</span>
</p>
`

一定要写span标签🦾🦾🦾(为了移动端的适配用了文本左侧超出省略)不会处理了

显示代码语言

source/js目录新建codeType.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const languageStyle = (str) => {
/* 单独优化 */
if (['js', 'javascript'].includes(str)) return 'JavaScript'
if (['ts', 'typescript'].includes(str)) return 'TypeScript'
/* 曲线救国(Highlight不支持vue) */
if (str === 'xml') return 'Vue'

// return str
/* 全小写风格 */
return str.toUpperCase()
/*全大写风格 */
// return str[0].toUpperCase() + str.substring(1)
/*首字母大写风格 */
}

document.querySelectorAll('figure.highlight').forEach((item) => {
item.setAttribute('data-type', languageStyle(item.getAttribute('class').substring(10)))
})

_fluid.config.yml引入

1
2
custom_js: 
- /js/codeType.js

附带一笔

前几天看到自己的博客样式混乱了,以为是更新主题出现了错误,打开控制台发现是静态资源请求全是500

Fuluid主题的默认CDN是这个https://cdn.jsdelivr.net,但在几天前中国地区无法访问了

后来在Github issue#18397中看到了https://fastly.jsdelivr.net的替代CDN,把CDN地址替换后就可正常访问了

另外有个仓库似乎有解决方案cdn.jsdelivr.net 无法访问的问题 (github.com)

/_config.fluid.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
static_prefix:
# 内部静态
# Internal static
internal_js: /js
internal_css: /css
internal_img: /img

# remark: https://fastly.jsdelivr.net
# --------------------------------------------------------------------
anchor: https://fastly.jsdelivr.net/npm/anchor-js@4/

github_markdown: https://fastly.jsdelivr.net/npm/github-markdown-css@4/

jquery: https://fastly.jsdelivr.net/npm/jquery@3/dist/

bootstrap: https://fastly.jsdelivr.net/npm/bootstrap@4/dist/

highlightjs: https://fastly.jsdelivr.net/npm/highlight.js@11/

prismjs: https://fastly.jsdelivr.net/npm/prismjs@1/

tocbot: https://fastly.jsdelivr.net/npm/tocbot@4/dist/

typed: https://fastly.jsdelivr.net/npm/typed.js@2/lib/

fancybox: https://fastly.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/

nprogress: https://fastly.jsdelivr.net/npm/nprogress@0/

mathjax: https://fastly.jsdelivr.net/npm/mathjax@3/es5/

katex: https://fastly.jsdelivr.net/npm/katex@0/dist/

busuanzi: https://busuanzi.ibruce.info/busuanzi/2.3/

clipboard: https://fastly.jsdelivr.net/npm/clipboard@2/dist/

mermaid: https://fastly.jsdelivr.net/npm/mermaid@8/dist/

valine: https://fastly.jsdelivr.net/npm/valine@1/dist/

waline: https://fastly.jsdelivr.net/npm/@waline/client@1/dist/

gitalk: https://fastly.jsdelivr.net/npm/gitalk@1/dist/

disqusjs: https://fastly.jsdelivr.net/npm/disqusjs@1/dist/

twikoo: https://fastly.jsdelivr.net/npm/twikoo@1/dist/

hint: https://fastly.jsdelivr.net/npm/hint.css@2/

🔵HexoFluid主题代码块样式修改
https://qingshaner.com/HexoFluid主题代码块样式修改/
作者
清山
发布于
2022年5月3日
许可协议