Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Four spaces codeblock is rendered different than three backsticks codeblock on small devices #1921

Closed
1 task done
cedaesca opened this issue Oct 7, 2019 · 4 comments · Fixed by #1958 · May be fixed by adamlaska/osmos-cosmos-sdk#5
Closed
1 task done
Assignees
Labels
complexity: easy Easy complexity effort: low Around a day or less good first issue Good for newcomers Hacktoberfest Good issue for Hacktoberfest challenge status: community assigned Community assigned type: bug Something isn't working

Comments

@cedaesca
Copy link

cedaesca commented Oct 7, 2019

  • 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.
@kefranabg kefranabg added type: bug Something isn't working Hacktoberfest Good issue for Hacktoberfest challenge complexity: easy Easy complexity effort: low Around a day or less good first issue Good for newcomers labels Oct 14, 2019
@pyaillet
Copy link
Contributor

pyaillet commented Oct 15, 2019

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:

``` bash
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:
Capture d’écran 2019-10-15 à 20 03 31

@pyaillet
Copy link
Contributor

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

@haoranpb
Copy link
Contributor

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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
complexity: easy Easy complexity effort: low Around a day or less good first issue Good for newcomers Hacktoberfest Good issue for Hacktoberfest challenge status: community assigned Community assigned type: bug Something isn't working
Projects
None yet
4 participants