Vuepress: Four spaces codeblock is rendered different than three backsticks codeblock on small devices

[cedaesca]

• [x] I confirm that this is an issue rather than a question.

Bug report

Three backsticks codeblock takes full container width while four spaces codeblock has some space on left and right.

Check this image

Steps to reproduce

1) Create a three backsticks codeblock
2) Create a four spaces codeblock
3) Change your browser screen size or access through phone
4) Compare

What is expected?

Both should be the same width

What is actually happening?

Three backsticks codeblock is being rendered inside a div with the classes language-<language> and extra-class, the pre tag also has an language-<language> class

Other relevant information

• Removing the language-<language> class from the outside div fixes it but the box isn't rounded.

[pyaillet]

I can't reproduce this on master.
I tested it on the vuepress documentation:

````
yarn docs:dev # OR npm run docs:dev
````

To generate static assets, run:

yarn docs:build # Or npm run docs:build

renders to:

<div class="language- extra-class">
  <pre class="language-text">
    <code>yarn docs:dev # OR npm run docs:dev</code>
  </pre>
</div>
<p>To generate static assets, run:</p>
<div class="language-bash extra-class">
  <pre class="language-bash">
    <code><span class="token function">yarn</span> docs:build <span class="token comment"># Or npm run docs:build</span></code>
  </pre>
</div>

Which looks like this:

[pyaillet]

I've also tried other combinations defining languages or not, I always get the same rendering.

[ludanxer]

Hi @pyaillet ,

I think you can try to reproduce the problem by below , thank you.

````

This codeblock is correctly rendered since it's a three **backsticks** codeblock

There are four spaces in the front of the next text

This codeblock is not correctly rendered since it's a four **spaces** codeblock

````

[pyaillet]

Oh, I am so sorry. I was definitly not reading the right thing :/

I should come up with a PR this week. I managed to fix this using markdow-it, but I still have to include it correctly with vuepress.