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

Question

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

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

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

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

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

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

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

Correctly formatting <pre> and <code> blocks in Vue.js

html

pre

vue.js

tailwind-css