给hexo Fuid主题博客添加Mac风格代码块

目前博客用的是Fuid主题,自带的代码块很丑,想着美化一下。

    1. 首先到hexo-theme-fluid主题根目录下source/css/ 创建名为macpanel.styl的文件并加入以下内容。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .highlight
    background: #21252b
    border-radius: 5px
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4)
    padding-top: 30px

    &::before
    background: #fc625d
    border-radius: 50%
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
    content: ' '
    height: 12px
    left: 12px
    margin-top: -20px
    position: absolute
    width: 12px
    1. 到管理主题的_config.yml文件还是说_config.fluid.yml文件(取决于你怎么调用主题)的配置文件中修改:

      1
      2
      custom_css:    
             - /css/macpanel

    重启博客即可看到效果啦~~如果代码块风格默认没有修改过的话可能会导致:代码块背景是白色的,而mac栏是黑色的,这时候就要去主题配置文件的_config.yml文件(和第2步一样的文件)中修改代码块风格了。    

    以下是我的博客现在的风格,具体想主题风格可以上See里的连接去看看。

1
2
3
4
5
6
highlightjs:
# 在链接中挑选 style 填入
# Select a style in the link
# See: https://highlightjs.org/static/demo/
style: "github dark dimmed"
style_dark: "dark"

给hexo Fuid主题博客添加Mac风格代码块
http://example.com/2022/08/06/给hexo-Fuid主题添加Mac风格代码块/
作者
Javeley
发布于
2022年8月6日
许可协议