Skip to content

.w class conflicts with code whitespace #35

Description

@apple1417

When formatting some languages, rouge will insert explicit whitespace spans, which use the exact same class as that on the main page body. This gives them a bunch of weird extra padding.

```json
no space
 1 space
  2 space
   3 space
    4 space
```

Becomes

<pre><span class="err">no</span><span class="w"> </span><span class="err">space</span><span class="w">
 </span><span class="mi">1</span><span class="w"> </span><span class="err">space</span><span class="w">
  </span><span class="mi">2</span><span class="w"> </span><span class="err">space</span><span class="w">
   </span><span class="mi">3</span><span class="w"> </span><span class="err">space</span><span class="w">
    </span><span class="mi">4</span><span class="w"> </span><span class="err">space</span><span class="w">
</span></pre>

 
The workaround I've got for now is:

.highlighter-rouge .w {
    max-width: unset;
    margin: unset;
    padding: unset;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions