如何解决在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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。