Search code examples
htmlvue.jstailwind-csspre

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

I have the following <code></code> block in my Vue.js application as follows, (using TailwindCSS classes):

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

However, on the page, this looks as follows:

enter image description here

I was wondering, what have I done wrong in formatting this block? Do I need to regex replace anything? I've tried trim, and regex replacing characters at the start and end, but nothing seems to work...

Solution

  • The whitespace in your codeblock is what's throwing it off. Instead of this:

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

    Do this:

    <code class="block whitespace-pre overflow-x-scroll" v-text="dataset.bibText"></code>

    Or even this:

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