html - 无论如何在 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>

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

例如，Header 1 和 Header 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以便代码字体大小与输出字体大小大致匹配