html - 在 Vue.js 中正确格式化 <pre> 和 <code> block

我有以下 <code></code>如下在我的 Vue.js 应用程序中阻止(使用 TailwindCSS 类):

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

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

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

最佳答案

你的代码块中的空格是导致它失败的原因。而不是这个:

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

关于html - 在 Vue.js 中正确格式化 <pre> 和 <code> block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64064826/