NexT 主题行内代码背景颜色设置

小曾&同学

已于 2022-04-17 21:11:32 修改

阅读量815

点赞数

CC 4.0 BY-SA版权

分类专栏： NexT 文章标签：经验分享其他

于 2022-04-17 20:56:26 首次发布

本文链接：https://blog.csdn.net/acknole/article/details/124236338

NexT 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何通过修改NexT博客的主题CSS文件，定制行内代码块的样式，包括颜色、间距和圆角等，提升代码块的视觉效果。步骤详细，适合前端开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为实现对 NexT 主题博客中行内代码块的美化，可通过对文字的渲染文件进行设置，实现效果如下，具体效果可以访问本人的博客：XiaoZeng's Blog

1. 找到主题文件下 `themes\next\source\css\main.styl` 文件

2. 在 `main.styl` 文件的最后添加代码块如下

// 针对Code代码标签的美化
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

参考链接：

NexT 行内代码背景颜色设置

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小曾&同学

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Hexo Next主题美化归档页

silent_F的博客

11-17

681

hexo静态博客归档页美化后如下[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SNhodaeR-1668696786555)(https://s1.ax1x.com/2022/11/03/xqsc7T.jpg)]由于笔者使用的是next主题最新版本，所以网上很多方法都没有行通。于是便记录下来，方便作者自己，也方便和我有同样问题的朋友。

React简单入门 - [Next.js项目] - 页面跳转、AntD组件、二级目录等

Rudon滨海渔村的博客

12-12

1352

页面跳转、AntD组件等。React官网力荐Next.js：为何它取代了Create-React-App？

参与评论您还未登录，请先登录后发表或查看评论

cpp c++编写代码块有颜色好看些

zhangyubababa的博客

01-30

889

const keywordChange = debounce((e) => { setKeywords(e); setCurrentPage(1); }, 300); const onTableChange = (pageNumber, pageSize) => { setCurrentPage(pageNumber); setPageSize(pageSize); };

Next主题美化

qq_34003239的博客

09-16

3786

写作目的网上关于Hexo的主题美化的博客已经很多也很全面了，但是在作者去一一尝试的时候，却发现有很多博客中提供的方法现在已经不支持或者过时了，为了避免大家和作者一样花费大量时间去一一尝试，所以作者考虑再三，决定将自己尝试过可靠的方法记录下来，与大家一起学习进步。一、Next主题美化 Hexo支持很多主题风格，Hexo博客支持很多主题风格，其中Next主题是Github上Star最多的...

Hexo博客Next主题美化

Alderaan的博客

05-12

1042

本文主要说明在Hexo博客nexT主题下如何进行美化，具体对应效果可通过博客页面(https://alderaan.xyz)进行查看。

在鸿蒙开发中怎么设置button点击时的背景色改变

热门推荐

南劲竹的博客

09-17

16万+

1.贴图：<img src="图片地址"> 2.加入连接：<a href="所要连接的相关地址">写上你想写的字</a> 3.在新窗口打开连接：<a href="相关地址" target="_blank">写上要写的字</a> 消除连接的下划线在新窗口打开连接： <a h

【深度学习】CV_基于CNN的图像分类模型_代码逐行注释解析

ColinCooper的博客

04-12

2684

基于CNN的图像分类模型，典型训练策略和网络模型。

基于Next5主题美化的一款hexo博客主题

08-08

基于Next5主题美化的一款hexo博客主题

next-themes:两行代码完美实现Next.js黑暗模式。支持系统偏好设置和任何其他主题，且不闪烁

03-11

next主题美化——背景图片、页面透明化、阴影、圆角、动画

Growing_potato的博客

02-22

5030

本文首发于我的个人博客前言：NexT 主题本身是没有背景图片的，显得有点单调，博主觉得没有背景图片显得我的博客很丑，于是就想添加一个背景图片 next版本：8.2.1 添加背景图片把想设置的背景放入./themes/next/source/images中，命名为background.jpg。在根目录的source文件夹下新建文件夹_data与style文件source/_data/styles.styl，输入以下代码 body { background:url(/https/blog.csdn.net/images/backgroun.

【主题美化系列】NexT主题样式调色

kris的博客

03-31

1828

学习这一种配色方案，便是掌握了NexT的CSS样式的全部调整操作，使用配置文件灵活管理，不在担心找不到目标位置，也可以调n种配色方案实现一键换肤功能哦！

「Hexo | Next主题美化」

qq_43620045的博客

03-09

2813

Hexo博客Next主题美化。

hexo next主题简单美化

Lancis的博客

07-16

676

改变页面的字体大小打开 themes\next\source\css_variables\base.styl，该文件保存了一些基础变量的值，我们找到$font-size-base，将值改为16px。 // Font size $font-size-base = 16px 这个文件里定义了很多常量，有兴趣的可以自己去琢磨琢磨，修改一些其他的变量。文章启用tags和categories 可能是该版本的NexT主题的关系，在我第一次使用NexT主题时，折腾了很久都没办法让菜单栏里的ta

hexo博客-next主题美化、配置

weixin_43026567的博客

03-17

481

修改标签样式实现方法：修改模板/themes/next/layout/_macro/post.swig,搜索rel="tag"，将后面的#换成<i class="fa fa-tag"></i>。效果图：文章结束标志效果图：实现方法：在\themes\next\layout\_macro中新建 passage-end-tag.swig 文件,并添加以下内容： ...

Hexo--Next主题优化

寒江蓑笠的专栏

02-04

1万+

欢迎访问我的博客按照上篇博客中更换Theme的方法，我们已经将主题改为Next，但是还是有地方我们可以优化和配置的。一些常见的配置方法参考文档即可。语言设置将languages目录下面的zh-Hans.yml修改为zh-CN.yml或者按照文档中的修改根目录配置文件也行。修改样式网站标题栏背景颜色网站标题栏背景颜色是黑色的，感觉不好看，可以在source/css/_schemes/Pisce

设置元素的背景颜色

qq_51372804的博客

07-08

697

这样，使用六个十六进制数字，我们可以表示三个字节，也就是 24 位的颜色值。除了使用六位的十六进制颜色值，还有其他一些变体表示颜色，如三位十六进制颜色值，其中每个通道只占一个十六进制数字（例如，#F00表示红色）。十六进制颜色值是一种表示颜色的常用方式，它使用六位十六进制数字来表示红、绿和蓝三个颜色通道的值。通过使用十六进制颜色值，您可以在CSS、图形处理软件和其他许多应用程序中方便地指定和使用各种颜色。除了这些常见的方式，还有其他更高级的颜色表示方法，如使用 HSLA 值、使用颜色关键字等。

NexT 主题行内代码背景颜色设置

1. 找到主题文件下 themes\next\source\css\main.styl 文件

2. 在 main.styl 文件的最后添加代码块如下

参考链接：

1. 找到主题文件下 `themes\next\source\css\main.styl` 文件

2. 在 `main.styl` 文件的最后添加代码块如下