Nikola formatting of code-blocks breaks final rendering in HTML

[dimitrik-fr]

Environment

Python Version: 3.12

Nikola Version: 8.3.1

Operating System: MacOS 14

Description: Nikola formatting of code-blocks breaks final rendering in HTML

Markdown input:

```
# yum install pprof
# yum install ghostscript

Using local file /var/tmp/memprof_10896.
Total: 2089.0 MB
   885.5  42.4%  42.4%    885.5  42.4% ut_allocator::allocate (inline)
```

HTML output:

<div class="code"><pre class="code literal-block"><span class="c1"># yum install pprof</span>
<span class="c1"># yum install ghostscript</span>

<span class="n">Using</span><span class="w"> </span><span class="n">local</span><span class="w"> </span><span class="n">file</span><span class="w"> </span><span class="o">/</span><span class="k">var</span><span class="o">/</span><span class="n">tmp</span><span class="o">/</span><span class="n">memprof_10896</span><span class="o">.</span>
<span class="n">Total</span><span class="p">:</span><span class="w"> </span><span class="mf">2089.0</span><span class="w"> </span><span class="n">MB</span>
<span class="w">   </span><span class="mf">885.5</span><span class="w">  </span><span class="mf">42.4</span><span class="o">%</span><span class="w">  </span><span class="mf">42.4</span><span class="o">%</span><span class="w">    </span><span class="mf">885.5</span><span class="w">  </span><span class="mf">42.4</span><span class="o">%</span><span class="w"> </span><span class="n">ut_allocator</span><span class="p">::</span><span class="n">allocate</span><span class="w"> </span><span class="p">(</span><span class="n">inline</span><span class="p">)</span>
</pre></div>

which is in several other places totally breaks plain-text / code rendering.

Any way to get instead something more simple and just straightforward like:

<div class="code"><pre class="code literal-block"># yum install pprof
# yum install ghostscript

Using local file /var/tmp/memprof_10896.
Total: 2089.0 MB
   885.5  42.4%  42.4%    885.5  42.4% ut_allocator::allocate (inline)
</pre></div>

Thank you for your help !

[Kwpolska]

You may need to specify a language name that signifies plaintext. Something like:

```text
This is plain text
```

[ralsina]

Deleted my comment because it doesn't really apply to markdown

[ralsina]

The actual output for fenced code blocks depends on the markdown plugin used. The default one uses pygments to highlight it, IIRC, but others just mark it as a code block and rely on client-side highlighters.

And yes, something like marking the text as "text" or "plaintext" will do the trick.

Or use the markdown not-fenced block, which is "indent 4 spaces or a tab"

[dimitrik-fr]

Indeed, using "text" tag helps ! -- however, it seems like having <pre class="code literal-block"> instead of just <pre> or <pre class="literal-block"> still breaks output.. Any idea from where these class names are coming and any way to change them ? (I cannot find any "literal-block" in CSS style I'm using in my theme).

[ralsina]

Indeed, using "text" tag helps ! -- however, it seems like having <pre class="code literal-block"> instead of just \<pre\> or <pre class="literal-block"> still breaks output.. Any idea from where these class names are coming and any way to change them ? (I cannot find any "literal-block" in CSS style I'm using in my theme).

It comes from python-markdown

[felixfontein]

Indeed, using "text" tag helps ! -- however, it seems like having <pre class="code literal-block"> instead of just <pre> or <pre class="literal-block"> still breaks output..

I'm curious, in which way is this breaking HTML rendering?

[dimitrik-fr]

After more digging and tweaking various CSS setting, I've found in my theme.css the following style definition which breaks HTML rendering:

pre.code, code {
  white-space: pre-wrap;
  word-wrap:normal;
  overflow: auto;
}

the problem appears due white-space: pre-wrap; -- once commented out, the problem is gone.

Now, the theme I'm using is not coming with theme.css file, so it looks like it's coming by default in Nikola with some default themes or generated by some scripts, no idea.

[Kwpolska]

theme.css might come from a parent theme. How does the white-space: pre-wrap rule ”break” HTML rendering?

[dimitrik-fr]

Here is an example:

```text
# pprof -text --base=/var/tmp/memprof_10896.0033.heap /apps/mysql8/bin/mysqld /var/tmp/memprof_10896.0034.heap

Using local file /apps/mysql8/bin/mysqld.
Using local file /var/tmp/memprof_10896.0034.heap.
Total: 7.3 MB
     7.3  99.8%  99.8%      7.3  99.8% ut_allocator::allocate (inline)
     0.0   0.2% 100.0%      0.0   0.2% my_raw_malloc (inline)
     0.0   0.0% 100.0%      0.0   0.0% os_event_create (inline)
     0.0   0.0% 100.0%      0.0   0.0% ut_allocator::allocate
     0.0   0.0% 100.0%      0.0   0.0% std::vector::_M_realloc_insert (inline)
     0.0   0.0% 100.0%      0.0   0.0% mem_strdup (inline)
     0.0   0.0% 100.0%      0.0   0.1% dict_mem_table_create (inline)
     0.0   0.0% 100.0%      0.0   0.0% std::_Hashtable::_M_emplace [clone .isra.0] (inline)
     0.0   0.0% 100.0%      0.0   0.0% std::_Hashtable::_M_rehash (inline)
     0.0   0.0% 100.0%      0.0   0.0% Fil_shard::space_add (inline)
... 
```

The result with "pre-wrap":

The results without "pre-wrap":

As you can see, with "pre-wrap" you get the output result with unexpected formatting -- the first line got more spaces than expected, while the line with "std::_Hashtable::_M_emplace [clone .isra.0] (inline)" is shifted to the right and no more matching the initial formatting.

[felixfontein]

My guess is that the broken rendering is due to some text-align: justify that also applies to <pre>. Without that, the wrapped lines shouldn't have that extra space in them.

[dimitrik-fr]

Indeed, I'm using "justify" for my site as several people prefer (while others don't care, so I keep it) -- and yes, if I disable "justify" and using default text-align: left the problem with extra spaces / text shifting is disappearing ! -- BUT, if "pre-wrap" is still here, then all parts of text / code which are longer than post width will be wrapped with spaces + new lines and create another kind of mess in rendering ;-)) -- while without "pre-wrap" each text box has its horizontal scrolling and allowing to see the whole text in the right format as expected.