无论如何在Rmarkdown中并排对齐代码和输出？答案

【问题标题】：Is there anyway to align code and output side by side in Rmarkdown?无论如何在Rmarkdown中并排对齐代码和输出？
【发布时间】：2019-06-21 21:58:36
【问题描述】：

我尝试在 markdown 文件中使用下面的 css 代码，但它们彼此不对齐，并且还弄乱了我的下一行代码。

这里是示例代码：

<style>
.column-left{
  float: left;
  width: 50%;
  text-align: left;
}
.column-right{
  float: right;
  width: 50%;
  text-align: left;
}
</style>

###### Header:

<div class="column-left">

```
# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
```

</div>

<div class="column-right">

# Header 1
## Header 2
### Header 3 
#### Header 4
##### Header 5
###### Header 6

</div>

##### bold and _italics_

<div class="column-left">

```
This is *Rmarkdown*!

This is _Rmarkdown_!

This is **Rmarkdown**!
```

</div>

<div class="column-right">

This is *Rmarkdown*!

This is _Rmarkdown_!

This is **Rmarkdown**!

</div>

有没有办法把每一个代码框和它的输出对齐，甚至把每一行代码和它的输出对齐？

例如，Header 1 和 Header 2 的输出显然使用了不同的空间量，那么如何将代码和输出之间的每一行或每个代码框与其输出对齐？

谢谢！

【问题讨论】：

当然有办法。但我不确定你到底想达到什么目标。这是关于 R 代码及其输出的吗？通过输出，您的意思是 div 内的硬编码标题，类 column-right？
@MartinSchmelzer，有两种选择：一种是将标头代码框和粗体和斜体代码框与它们的每个输出对齐。另一个选项是将每一行代码与其输出对齐。

标签： html css r r-markdown

【解决方案1】：

可能有更好的方法来做到这一点（可能使用 js），但这只能使用 html 和 css：

<style>
#row1{
  height: 270px;
  padding: 10px;
}

#row2{
  height: 150px;
  padding: 10px;
}

#headers{
  font-size: 22px;
}

#italics{
  font-size: 15px;
}

.column-left{
  float: left;
  height: 100%;
  width: 50%;
  text-align: left;
}
.column-right{
  float: right;
  height: 100%;
  width: 50%;
  text-align: left;
}
</style>

###### Header:

<div id="row1">

<pre id="headers" class="column-left">
# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
</pre>

<div class="column-right">

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

</div>

</div>

##### bold and _italics_

<div id="row2">

<pre id="italics" class="column-left">
This is *Rmarkdown*!

This is _Rmarkdown_!

This is **Rmarkdown**!
</pre>

<div class="column-right">

This is *Rmarkdown*!

This is _Rmarkdown_!

This is **Rmarkdown**!

</div>

</div>

我做了什么：

我用<pre>标签包裹了“代码块”而不是r代码，它将代码视为预格式化的文本。
在每个代码块 + 输出组合周围再包裹一个 <div>。
将.column-left和.column-right的高度设置为100%：
调整height 的#row1 和#row2，使代码块与输出对齐
可以选择调整font-size 或#headers 和#italics，使代码字体大小与输出字体大小大致匹配

【讨论】：