首页 > 解决方案 > 将 GitHub Pages Jekyll 主题自定义为非背景颜色或框内联代码

问题描述

我在一些 GitHub Pages 站点中使用 Cayman 和 Slate Jekyll 主题进行软件文档。

这些主题样式内联代码部分(在 Markdown 中由反引号包围的文本)具有不同的背景颜色和框阴影。

显示内联代码部分的 Slate 主题格式

我认为这会损害可读性。我希望内联代码跨度采用固定宽度字体,但在其他方面看起来像周围的文本,没有框或背景颜色变化。更像这样:

我使用更简单的内联代码格式自定义 Slate 主题

有没有办法对主题应用自定义来实现这一点?

我目前正在通过将完整的主题定义复制到我的 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 自定义只能在它们定义或自定义的类上添加或修改属性,而不是删除或“重置”它们。

标签: csssassgithub-pagesjekyll-theme

解决方案


推荐阅读