如何增大Rmarkdown主题readthedown的页面宽度

问题原因 #

readthedown主题的主内容区存在多层级的宽度限制规则，仅修改body和.main-container的参数无法生效，上层父容器的900px宽度限制没有被放开，子元素的宽度设置无法超出父容器的最大宽度限制。

解决方案 #

方法1：内嵌CSS到Rmarkdown文档

在文档YAML头部下方、正文内容之前，直接插入如下样式代码即可：

<style>
/* 同步放开所有层级的宽度限制，可根据需求调整max-width的数值 */
#content, #main, .main-container, body {
  max-width: 1920px !important;
  width: 100% !important;
  /* 左右预留边距避免内容贴边，可自行调整数值 */
  padding-left: 2% !important;
  padding-right: 2% !important;
}
</style>

方法2：引入独立CSS文件

1. 新建名为custom.css的文件，写入如下内容：

#content, #main, .main-container, body {
  max-width: 1920px !important;
  width: 100% !important;
  padding-left: 2% !important;
  padding-right: 2% !important;
}

2. 在Rmarkdown的YAML头部配置中关联该CSS文件：

---
title: "文档标题"
output:
  rmdformats::readthedown:
    css: custom.css
---

异常排查 #

如果修改后仍未生效，打开浏览器开发者工具的元素选择面板，选中主内容区域，查看计算属性中max-width参数对应的生效选择器，将该选择器添加到上述CSS的选择器列表中即可适配不同版本的readthedown主题。

内容的提问来源于stack exchange，提问作者nimliug