无论如何，在Rmarkdown中可以并排对齐代码和输出吗？

Question

我试图在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>

无论如何，是否要将每个代码框与其输出对齐？甚至将每一行代码与其输出对齐？

例如，页眉1和页眉2的输出明显使用不同的空间量，那么如何使代码和输出之间的每一行或每个带有其输出的代码框对齐？

谢谢！

Answer 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>

我做了什么：

1. 我用标签包装了“代码块”，而不是 r 代码<pre>，该标签将代码视为预先格式化的文本。

2. 在每个代码块+输出组合周围再包裹一个<div>。

3. .column-left将和的高度设置.column-right为100%：

4. 调整height和#row1以#row2使代码块与输出对齐

5. 可以选择调整font-size和#headers以#italics使代码字体大小与输出字体大小大致匹配