【问题标题】:In R bookdown how do I set the default code output background color在R bookdown中如何设置默认代码输出背景颜色
【发布时间】:2020-12-29 16:42:00
【问题描述】:

我的 gitbook 风格的 R bookdown 书在灰色框中呈现代码输出。我想将其更改为带有黑色边框的白框。我发现帖子显示了如何为特定块设置颜色,但没有显示如何设置默认值。我想我需要像这样添加一个css文件:

--- 
title: x
author: clueless
date: "`r Sys.Date()`"
site: bookdown::bookdown_site
documentclass: book
output:
  bookdown::gitbook: 
    css: "style.css"
---

但我不知道从这里去哪里。我对css知之甚少。因此,对于无知的人来说,我们将不胜感激。

【问题讨论】:

    标签: r r-markdown bookdown


    【解决方案1】:

    仅使用 CSS

    前面的答案对于 CSS 规则是正确的,但选择器必须更具体地用于 gitbook() 格式。这是CSS specificity 的问题。

    使用浏览器检查器,您可以了解需要用来覆盖gitbook 设置的默认 CSS 样式的选择器。

    这个简单的 css 将替换背景并添加边框

    .book .book-body .page-wrapper .page-inner section.normal pre {
        background: #fff;
        border: 1px solid #ddd;
        border-color: #000;
    }
    

    您像在style.css 中一样输入,并在index.Rmd_output.yml 中使用bookdown::gitbookcss 参数,具体取决于您使用的哪个。

    这将获取 CSS。

    我认为您也可以使用!importantpre 上指定最多

    pre {
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-color: #000 !important;
    }
    

    (以上评论后编辑)

    使用 knitr 功能

    另一种方法是使用class.sourceclass.output https://bookdown.org/yihui/rmarkdown-cookbook/chunk-styling.html

    这将允许你为你的输出设置一个特定的类,并在你的 CSS 中定位这个类。

    需要将块选项应用于所有代码块

    knitr::opts_chunk$set(class.output = "custom-output")
    

    然后您可以使用pre.custom-output 仅针对代码块输出部分,使用上述两种语法之一(完整选择器或!重要)

    【讨论】:

    • 谢谢!这更接近了。您的代码样式代码和输出相同。有没有办法将其限制为仅将其应用于输出?我检查了 html,代码用 标记,输出用
       标记。有没有办法不将您的更改应用于“sourceCode r”块?换句话说,我想保留代码的默认样式,并将您的代码仅用于输出。
    • 我添加了一个解决方案,可以让您轻松编写 CSS 规则以仅针对代码块的输出部分进行编写
    • 非常感谢!带有 opts_chunk$set() 的 CSS 效果很好。
    【解决方案2】:

    您的代码 sn-ps 使用 <pre> 标签设置样式。如果您已经知道如何链接您的 CSS 文件,将以下内容添加到它应该会给您想要的结果:

    例如:

    pre {
        background: #fff;
        border: 1px solid #ddd;
        border-color: #000;
        page-break-inside: avoid;
        font-family: monospace;
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 1.6em;
        max-width: 100%;
        overflow: auto;
        padding: 1em 1.5em;
        display: block;
        word-wrap: break-word;
    }
    <body>
    <pre> 
    Hello this is code 
    This is more code. 
    You could have this could be whatever you want.
    Monty Python!
    </pre>
    
    </body>

    随意调整数字和值以满足您的需要。

    【讨论】:

    • 非常感谢。你的 CSS 是有道理的。不幸的是,我一定是对 YAML 标头做错了,因为 R Markdown 没有使用该文件。
    • 您将文件存储在哪里?理想情况下,它应该在./css/style.css 之下。
    • 它在 rstudio 项目文件夹中。当我构建这本书时,CSS 文件的副本被放入 _book 目录中。我创建了一个css目录并将样式表放在那里,当我查看页面时它仍然没有应用它。
    猜你喜欢
    • 2016-05-24
    • 2022-07-05
    • 2013-10-26
    • 2014-11-03
    • 2022-10-18
    • 1970-01-01
    • 1970-01-01
    • 2014-04-05
    • 2011-10-09
    相关资源
    最近更新 更多