css - 将 GitHub Pages Jekyll 主题自定义为非背景颜色或框内联代码
问题描述
我在一些 GitHub Pages 站点中使用 Cayman 和 Slate Jekyll 主题进行软件文档。
这些主题样式内联代码部分(在 Markdown 中由反引号包围的文本)具有不同的背景颜色和框阴影。
我认为这会损害可读性。我希望内联代码跨度采用固定宽度字体,但在其他方面看起来像周围的文本,没有框或背景颜色变化。更像这样:
有没有办法对主题应用自定义来实现这一点?
我目前正在通过将完整的主题定义复制到我的 GitHub Pages 站点中,并像这样编辑它:
[docs] $ diff -C 3 ../../slate/_sass/jekyll-theme-slate.scss _sass/jekyll-theme-slate.scss
*** ../../slate/_sass/jekyll-theme-slate.scss 2021-01-16 18:56:40.000000000 -0500
--- _sass/jekyll-theme-slate.scss 2021-03-14 21:28:51.000000000 -0400
***************
*** 1,4 ****
! @import "rouge-github";
/*******************************************************************************
MeyerWeb Reset
--- 1,10 ----
! /*
! * This is a customized version of jekyll-theme-slate.scss that turns off the
! * background coloring on inline code spans, which I think improves readability.
! * -apjanke
! */
!
! @import "rouge-github";
/*******************************************************************************
MeyerWeb Reset
***************
*** 156,162 ****
pre, code {
color: #222;
- background-color: #fff;
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
font-size: 0.875em;
--- 162,167 ----
***************
*** 167,184 ****
}
pre {
padding: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.1);
overflow: auto;
}
! code {
padding: 3px;
margin: 0 3px;
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
pre code {
display: block;
box-shadow: none;
}
--- 172,191 ----
}
pre {
+ background-color: #fff;
padding: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.1);
overflow: auto;
}
! code_OFF {
padding: 3px;
margin: 0 3px;
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
pre code {
+ background-color: #fff;
display: block;
box-shadow: none;
}
[docs] $
但我宁愿将其定义为原始主题定义之上的小自定义,如此处所述,因此我仍然可以自动获取上游主题的更新,甚至可以将我的自定义与多个基本主题一起使用。
有谁知道如何做到这一点?似乎这种形式的 CSS 自定义只能在它们定义或自定义的类上添加或修改属性,而不是删除或“重置”它们。
解决方案
推荐阅读
- r - 在 R 集群中包含进度条
- laravel - Laravel - 项目文件夹外的公共目录 - Vue不工作
- javascript - 我从 google-apps-script 收到服务器错误,我该如何找出是什么原因造成的?
- safari - jPlayer 的最新 Safari 浏览器问题
- java - 使用 Stream() 删除小数点,而不是使用 for 循环
- javascript - 如何在chartjs上格式化左侧图例
- c# - 使用不存在的模型实体返回结果 - EF .net Core 3
- python - 如何按 DatetimeIndex 加入列,从不同年份的数据中匹配日、月和小时?
- javascript - 将 imagesloaded.js 与从文件夹导入图像的 php 代码一起使用
- runtime-error - Anylogic - 绘制动画帧时出错