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

原创 已于 2022-04-17 21:11:32 修改 · 881 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#经验分享 #其他
于 2022-04-17 20:56:26 首次发布
本文介绍了如何通过修改NexT博客的主题CSS文件，定制行内代码块的样式，包括颜色、间距和圆角等，提升代码块的视觉效果。步骤详细，适合前端开发者参考。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

为实现对 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 行内代码背景颜色设置

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看
【HarmonyOS NEXT】示例代码-根据主题自适应背景颜色
qq_45789342的博客
10-16 588
本示例介绍使用Image库以及EffectKit库中的colorPicker对目标图片进行取色，将获取的颜色作为背景渐变色，通过Swiper组件对图片进行轮播。
hexo下NexT的主题背景及框体透明度修改
weixin_53070478的博客
01-05 3638
首先定位主题文件夹next目录下的主题配置文件.\themes\next\\_config.yml 打开并查找 style: source/_data/styles.styl并将改行的注释解除。 在改行所描述的目录下创建相应的文件，即 source/_data/styles.styl 并打开 1.主题背景更改 在styles.styl 中插入以下代码 1 2 3 4 5 6 7 8 body { background:url(/image...
安装并优化 next 主题
forever_008的博客
02-01 1148
前面已经搭建好了个人博客，接下来就是装饰一下自己的网站，毕竟是属于自己的地盘，还是想让它精美一些，一方面自己能看着舒服，给自己坚持写博客添加一些动力；另一方面，精美的博客界面是给读者的第一印象，好的界面可以吸引更多的人访问，下面介绍 NexT 主题（GitHub 评分最高） 本问博客地址 一、安装 NexT 主题 有两种方式可以进行安装，一种是安装稳定版本（已经不再维护），一种是安装最新版本，这里我们安装最新版本，执行下面的命令： $ cd your-local-blog-site $ git.
cpp c++编写代码块 有颜色 好看些
zhangyubababa的博客
01-30 924
const keywordChange = debounce((e) => { setKeywords(e); setCurrentPage(1); }, 300); const onTableChange = (pageNumber, pageSize) => { setCurrentPage(pageNumber); setPageSize(pageSize); };
设置元素的背景颜色
qq_51372804的博客
07-08 856
这样，使用六个十六进制数字，我们可以表示三个字节，也就是 24 位的颜色值。除了使用六位的十六进制颜色值，还有其他一些变体表示颜色，如三位十六进制颜色值，其中每个通道只占一个十六进制数字（例如，#F00表示红色）。十六进制颜色值是一种表示颜色的常用方式，它使用六位十六进制数字来表示红、绿和蓝三个颜色通道的值。通过使用十六进制颜色值，您可以在CSS、图形处理软件和其他许多应用程序中方便地指定和使用各种颜色。除了这些常见的方式，还有其他更高级的颜色表示方法，如使用 HSLA 值、使用颜色关键字等。
CSS2day.2(块内元素，行内元素，行内块元素，背景(background的复合写法))
shrimper
05-29 1706
文章目录CSS元素显示模式块元素行内元素行内块元素总结：显示模式的转换： CSS元素显示模式 作用：更好的布局我们的网页 HTML一般分为块元素和行内元素两种类型 比如div独占一行，一行可以放多个span。 块元素 常见块内元素有：h1~h6，p，div，ul，ol，li等。 特点： 独占一行 高，宽，外边距和内边距都可以控制 宽度默认是容器（父级宽度）的100% 可看做是一个容器（盒子），里面可以放行内或者块级元素 以下注意： 文字类的元素内不能使用块级元素 <p>
Hexo博客主题安装及Next主题个性化修改
weixin_43998150的博客
12-06 7409
原文链接https://www.lixint.me/hexo-theme-diy.html 欢迎加入博客搭建交流群（QQ群号60429576）&amp;gt;点击加入&amp;lt; 写在最前面： 1.在修改时请注意博客配置文件与主题配置文件的区别：博客配置文件是指博客根目录下的_config.yml文件， 主题配置文件是指/themes/主题名/路径下的_config.yml文件，例如我使用的主题为next主题...
Hexo--Next主题优化
寒江蓑笠的专栏
02-04 1万+
欢迎访问我的博客 按照上篇博客中更换Theme的方法，我们已经将主题改为Next，但是还是有地方我们可以优化和配置的。 一些常见的配置方法参考文档即可。语言设置将languages目录下面的zh-Hans.yml修改为zh-CN.yml或者按照文档中的修改根目录配置文件也行。修改样式网站标题栏背景颜色网站标题栏背景颜色是黑色的，感觉不好看，可以在source/css/_schemes/Pisce
Hexo Next主题代码块行号显示终极配置指南
最新发布
gitblog_00749的博客
11-25 764
Hexo Next主题作为Hexo博客平台中最优雅和强大的主题之一，其代码块行号显示功能对于技术博客作者来说至关重要。📝 正确的行号显示不仅能提升代码的可读性，还能让读者更方便地引用和讨论特定代码行。本文将详细介绍如何在Hexo Next主题中配置代码块行号显示，让你的技术博客更加专业。 ## 代码块行号显示的重要性 代码块行号显示是技术博客中不可或缺的功能，它能够： - 提高代码的可读性
css背景颜色，图片，平铺，图片位置、字体属性、文本属性和css引入方式、元素显示模式、侧边栏案例
m0_69034993的博客
06-21 1695
常见的行内元素有,,,,,,,,,等，其中标签是最典型的行内标签，有的地方也将行内元素称为内联元素。在行内元素中有几个特殊的标签——、、, 它们同时具有块元素和行内元素的特点。常见的块元素有~,,,,,等，其中标签是最典型的块元素。标签主要用于存放文字，因此里面不能放块级元素，特别是不能放;
hexo-NexT主题的美化
weixin_43402104的博客
11-08 1316
这一篇记录一下怎么一步步的美化，后面如果没有什么大的改动的话，美化的东西就在这一篇里面写了
typora修改主题字体、代码块字体、行内块代码字体大小、引用块字体大小、代码块背景颜色、文章可写区域宽度以及修改教程
m0_62283830的博客
07-13 2万+
typora修改主题字体、代码块字体、行内块代码字体大小、引用块字体大小、代码块背景颜色以及修改教程
Hexo博客优化之Next主题美化
热门推荐
huangpiao
01-26 5万+
前言 有了前面几篇博客的介绍，我们就可以很容易的搭建并编辑我们的博客了，不过既然是属于自己的博客网站，自然也就想让其更加美观，更有意思，所以呢我下面介绍一下Hexo博客的主题美化操作。 1. Next主题 Hexo博客支持很多主题风格，其中Next主题是Github上Star最多的主题，其一直在更新维护，支持非常多的外部插件和功能选项。我目前使用的是Next6.0版本，下面我会介绍基于Ne...
css的背景
weixin_47481102的博客
04-25 613
通过css背景属性，可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景平铺、背景图片、背景图片位置、背景图片固定等。 1.1 背景颜色 background-color属性定义了元素的背景颜色。 background-color :颜色值; 一般情况下背景颜色默认是transparent（透明），可以手动指定背景颜色为透明色。 1.2 练习 <!DOCTYPE html> <html lang="en"> <head> <.
「Hexo | Next主题美化」
qq_43620045的博客
03-09 3153
Hexo博客Next主题美化。
hexo next主题下，自动更换背景图片
走路带风
08-27 8274
背景图片来源 （可根据自己的喜好更改） https://source.unsplash.com 修改背景样式 打开文档下themes\next\source\css\ _custom\custom.styl文件，这个是Next故意留给用户自己个性化定制一些样式的文件，添加以下代码： body { background:url(https://source.unsplash.c...
Next主题添加背景图片
weixin_46106283的博客
11-20 3060
文章目录操作步骤添加背景图片设置透明边框圆角 hexo 和 Next 的版本如下： hexo: 5.2.0 NexT: 7.8.0 操作步骤 进入 themes\next\source\css 目录中 打开 main.styl 文件 在末尾添加 css 代码即可 添加背景图片 值得注意的是，在 main.styl 文件末尾写的 css 样式，会覆盖主题之前的样式。 以 body 为例，我们要先找到该标签之前的样式，复制下来，然后再此基础上进行修改。先打开自己的博客，按下 F12 检测网页，找到
next主题添加背景，并设置页面透明度
杂货店的阿猿的博客
06-28 3431
title: hexo添加背景，并设置页面透明度 date: 2020-06-28 17:33 tags: hexo next categories: hexo next next主题添加背景，并设置透明度 一路上磕磕碰碰终于修成正果 这可是真心痛苦，看别人都是在 custom.styl 修改，我左找又找，实在是找不到，在我即将绝望之时，终于看到了大佬的一篇博客，但是这并不是结束，才是开始。 我们一步步来，其中有我血的教训，我们来到博客的根目录，找到 _config.yml 并打开.
给hexo个人博客 next主题添加背景图片
W_C__L的博客
05-11 3万+
前几天没事自己通过hexo加github搭建了一个自己的个人博客，用的是next主题，发现挺好用，捣鼓了半天终于把全部全部配置完了，但是想改给自己的博客添加一张背景图片，在网上找了很久没找到相关的资料，就自己开始捣鼓，下面将修改方案贴出来。 首先找到一个背景图片放到 hexo（hexo工程文件）-> themes -> next -> source -> images 的路径下； hexo（hexo
Hexo + Next 踩坑配置记录
Hoper-J的博客
03-06 382
一番配置后深感付出与时间不成正比，缺乏css知识的情况下更是如此。再者选择Next的主题就是为了精简，故待后续有时间了再做配置更新。 以下代码块若未曾指定文件，默认命令行操作 博客同链，不知道配置具体在哪个文件可去博客查看 博客操作 增加新标签页 新增加的界面位于博客主目录下的 source 中 hexo new page tags hexo new page categories 创建文章 hexo new "文章" 此时创建的文章开头默认是没有categories的，设置成默认，打开blo.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值