如何改变gitbook的代码填充效果？答案

【问题标题】：How to change the code padding effect of gitbook?如何改变gitbook的代码填充效果？
【发布时间】：2015-02-05 08:41:09
【问题描述】：

这是stackoverflow的markdown代码效果：

Code from stackoverflow
Nearly no extra space at the beginning

这是gitbook的markdown代码效果：

开头的多余空格让我感到困惑。所以我决定自己改。

我做到了：

cd /usr/local/lib/node_modules/gitbook/theme/stylesheets/base
vim markdown.less

其中有一个代码块，如下所示：

code {
    padding: 0;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    margin: 0;
    font-size: 85%;
    background-color: #f7f7f7;
    border-radius: 3px;
}

我将font-size 更改为385%，将border-radius 更改为0px。我用git serve .重启了我的gitbook服务器，但是代码效果没有改变。

我在主题目录中找到了这些带有code关键字的文件，我应该修改哪些？

.//assets/app.js
.//assets/fonts/fontawesome/fontawesome-webfont.svg
.//assets/fonts/fontawesome/fontawesome-webfont.ttf
.//assets/fonts/fontawesome/FontAwesome.otf
.//assets/print.css
.//assets/style.css
.//javascript/utils/sharing.js
.//stylesheets/base/markdown.less
.//stylesheets/base/normalize.less
.//stylesheets/website/highlight/night.less
.//stylesheets/website/highlight/white.less
.//stylesheets/website/markdown.less
.//templates/book/includes/exercise.html
.//templates/ebook/includes/exercise.html

我还应该做什么？

【问题讨论】：

标签： css gitbook

【解决方案1】：

这应该是个注释，但你不能在 cmets 中摆弄。

如下所示，您提供的样式信息不包括您要更改的样式，您在某处遗漏了一些重要信息。
您包含的代码显示在左侧，您描述的问题在右侧。

code {
    padding: 0;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    margin: 0;
    font-size: 85%;
    background-color: #f7f7f7;
    border-radius: 3px;
}

.described {
    padding: 20px;
}

<code>fprintf(...);</code>
<code class="described">fprintf(...);</code>

【讨论】：

对不起，我在 css 和 javascript 方面的经验为零。你能更清楚地告诉我我应该怎么做才能解决这个问题吗？
我在这里的意思是你没有告诉我们问题的根源，因此我们不能告诉你如何解决它。您向我们展示的当前代码不会重现该问题。
我发现的是一个javascript函数，对吧？我猜在其他地方有一些文件会调用这个函数。而且由于功能的内容发生了变化，最终的视觉效果也应该改变。不是吗？
你能根据你的经验给我任何提示吗？
我已经更新了上面的小提琴。问题可能只是从其他地方继承的 CSS 样式，但如果不查看实际的站点/源，就不可能说出从哪里来。

【解决方案2】：

要覆盖 Gitbook 默认样式，请在 gitbook 项目的根目录中创建一个名为“styles/website.css”的文件。

编辑book.json 文件并添加以下内容以定义您自己的自定义样式的来源

{
    "styles": {
        "website": "styles/website.css",
        "ebook": "styles/ebook.css",
        "pdf": "styles/pdf.css",
        "mobi": "styles/mobi.css",
        "epub": "styles/epub.css"
    }
}

此文件中的任何内容都将覆盖 Gitbook 样式（如果名称正确的话）。

然后使用浏览器检查器找出您希望应用或更改样式的 html 元素的名称。在浏览器中打开你的 Gitbook 项目并右键单击代码块，这会弹出一个带有 Inspect 或 Inspect Element 的菜单。

更改样式时需要重新启动gitbook serve，因为它只在启动时读取styles/website.css 文件。

我定义的用于覆盖 Gitbook 的样式可以在这个 Github Gist 中看到

https://gist.github.com/jr0cket/9cc41eb9dd0b6c6d091831be43fa3e42

这些罐头样式的结果可以在以下位置看到：

https://practicalli.github.io/clojure/basic-clojure/

谢谢

【讨论】：