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

user_10412414 0
Viewed 5069

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

tailwind-css vue.js pre html
2 Answers

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

Using white-space: pre; means you have to be careful of the whitespace in your editor. Here's some examples:

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>

Try this instead:

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