Есть ли способ выровнять код и вывод рядом в Rmarkdown?

Question

Я попытался использовать код 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:

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

# Заголовок 1 ## Заголовок 2 ### Заголовок 3 #### Заголовок 4 ##### Заголовок 5 ###### Заголовок 6 ##### жирным шрифтом и _italics_Это * Rmarkdown *!Это _Rmarkdown_!Это ** Rmarkdown **!Это * Rmarkdown *!Это _Rmarkdown_!Это ** Rmarkdown **!

Что я сделал:

1. Вместо кода r я обернул «куски кода» тегом <pre>, который обрабатывает код как предварительно отформатированный текст.

2. Оберните еще одну <div> вокруг каждой кодовой комбинации + выходной комбинации.

3. Установить высоту .column-left и .column-right до 100%:

4. Настройте height из #row1 и #row2 так, чтобы фрагменты кода совпали с выходными данными

5. При желании можно настроить font-size из #headers и #italics так, чтобы размер шрифта кода приблизительно совпадал с выходными размерами шрифта