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

Question

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

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

但是，在页面上，这看起来如下：

我想知道，我在格式化这个块时做错了什么？我需要用正则表达式替换任何东西吗？我试过修剪和正则表达式在开始和结束时替换字符，但似乎没有任何效果......

Answer 1

代码块中的空白是将其丢弃的原因。取而代之的是：

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