【Win10】Hexo 搭建个人主页 (六)修改代码块样式

前言

本篇博文是关于修改代码块样式。


如果对于搭建等其它方面有需要了解的,读者可以阅读前几篇比较优质的文章:

推荐阅读:【Win10】搭建个人博客 Hexo框架 (自制)

推荐阅读:【Win10】搭建个人博客 Hexo框架(部署到 github 上并 导入美化样式 )

推荐阅读:【Win10】Hexo 搭建个人主页 (一)解决所有文章,缺失模块问题

推荐阅读:【Win10】Hexo 搭建个人主页 (二)配置图片资源

推荐阅读:【Win10】Hexo 搭建个人主页 (三)文章显示摘要

推荐阅读:【Win10】Hexo 搭建个人主页 (四)文章显示目录

推荐阅读:【Win10】Hexo 搭建个人主页 (五)增加归档菜单

准备工作

默认的代码样式太刺眼了,调成稍微柔和一些的,这里是调成 Atom 风格,以下为两种方式都可以,推荐第一种直接修改编译好的文件,不然还需要重新build。

第一种方式

  • 直接修改编译好的文件。路径为: theme\yilia\source\main.0cf68a.css
  • 修改代码背景色,搜索 .article-entry .highlight, 修改background后面的颜色
![](http://p5sfmckwy.bkt.clouddn.com/img/3_4_code_bg_color.png)

修改代码字体颜色 .article-entry .highlight .line

在这里插入图片描述
第二种方式

修改源文件重新build。上述资源对应源文件为yilia\source-src\css\highlight.scss,按照如下方式build

cd 到 yilia 目录下
npm install
npm run dev
npm run dist

效果

在这里插入图片描述

学如逆水行舟,不进则退
一百个Chocolate CSDN认证博客专家 CSDN博客专家 博客之星 前端开发攻城狮
掘金搜【一百个Chocolate】
座右铭:学如逆水行舟,不进则退!
公众号:小狮子前端 期待小狮子们的加入~
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值