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

【问题标题】：Correctly formatting <pre> and <code> blocks in Vue.js在 Vue.js 中正确格式化 <pre> 和 <code> 块
【发布时间】：2021-01-11 19:57:00
【问题描述】：

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

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

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

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

【问题讨论】：

您希望如何格式化？只是开头的多余空间吗？
您对dataset.bibTex 没有空格有多大把握？你能展示一下你试图准确删除空格的内容吗？
查看whitespace-pre 的文档，您可以尝试删除该类或将代码块放在一行
@depperm 我百分百确定。看起来是使用 Vue.js {{ }} 模板标签在扔东西。

标签： html vue.js tailwind-css pre

【解决方案1】：

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

【讨论】：

感谢这个深思熟虑的答案 - 只是为了向您展示我选择了另一个答案，因为它具有一些有趣的 Vue 相关功能（使用 v-text 指令）。感谢您花时间回答。 +1 票！

【解决方案2】：

你的代码块中的空白是什么东西把它扔掉了。而不是这个：

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

【讨论】：