在Vue.js中正确格式化<pre>和<code>块

问题描述

我的Vue.js应用程序中有以下<code></code>块，如下所示（使用TailwindCSS类）：

<code class="block whitespace-pre overflow-x-scroll">
   {{ dataset.bibTex }}
</code>

但是，在页面上，外观如下：

我想知道，在格式化该块时我做了什么错误的事情？我需要用正则表达式替换任何东西吗？我试过修剪，并在开头和结尾处用正则表达式替换字符，但似乎无济于事...

解决方法

您的代码块中的空白就是要扔掉它的原因。代替这个：

<code class="block whitespace-pre overflow-x-scroll">
   {{ dataset.bibTex }}
</code>

执行此操作：

<code class="block whitespace-pre overflow-x-scroll" v-text="dataset.bibText"></code>

甚至是这样：

<code class="block whitespace-pre overflow-x-scroll">{{ dataset.bibTex }}</code>

,

使用white-space: pre;意味着您必须注意编辑器中的空白。这里有一些例子：

code.pre {
  white-space: pre;
}

<code>
  test
</code>

<hr/>

<code class="pre">

  test
  dfgdkfhdfg
  
</code>

<hr/>

<code class="pre">
         test
            dfgdkfjgh
</code>

<hr/>

<code class="pre">
test
dfgdkfjgh
</code>

尝试以下方法：

<code class="block whitespace-pre overflow-x-scroll">
{{ dataset.bibTex }}
</code>