无论如何，在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. 我用<pre>标签包装“代码块”，而不是r代码，该标签将代码视为预格式化的文本。

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

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

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

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