Hunh... my code lines are really long

In previous posts the code contains some really long lines, making them hard to read.

Line Wrap & Line Numbers

First I thought about adding line numbers and wrapping.

In hugo.toml added some markup updates

[markup]
  [markup.highlight]
    lineNos = true

I’m using the etch theme so I copied themes/etch/assets/main.css to /asset/css/main.css

In main.css code blocks have the following css associated with them

main#content pre {
    display: block;
    overflow-x: auto;
    font-size: 14px;
    font-size: 1.4rem;
    white-space: pre;
    margin: 20px 0;
    padding: 1.5rem 1.5rem;
    line-height: 1.4;
}

Following directions found in the hugo forums, I tried adding

main#content pre {
    /*overflow-x: visible;*/ 
    white-space: pre-wrap;
    word-break: break-word; 
}

to the bottom of the file. This css made the code wrap, but it screwed up the line numbers making them wrap to two lines too, which screwed up the line heights…

I didn’t feel strongly enough about that solution to go deep into the theme’s style sheets so I turned off all of those changes and let everything flow wider, updating the body css in my copy of min770.css to:

body {
    max-width: 70%; /*from 600px*/
    line-height: 1.5;
}

I didn’t love this solution because narrower columns make for easier reading, in general.

Better guides for better code

The best solution? Write narrower code. Since I’m using VSCode I can turn on guide rulers.

Add the following json to settings.json (cmd+shit+p, type settings)

"editor.rulers": [
    80,  //first ruler, no color specified, low key guide
    {
        "column": 100,       // second ruler
        "color":  "#9f0af5"  // wrap it up...
    },
    {
        "column": 120,      // third ruler
        "color": "#ff9900"  // better have a good reason! 
    },
],

Now I’ll have a visual maker when I’m going too wide.

I’ve also decided to disallow wrapping in Python files at all. We’ll see how long that lasts.

"[python]": {
    "editor.formatOnType": true,
    "editor.wordWrap": "off"
},

Re-narrowing the body

/asset/css/min770.css now reads

body {
    max-width: 70rem;
    line-height: 1.5;
}

The unit em comes from typography and stands for “the width of the letter M”. rem stands for “root em”, which avoids the compounding effects of em, which I was seeing when I tried that first. This new setting limits my content to 50 characters of the base font wide.

The theme’s root font had an unexpected root font value of font-size: 62.5%;, so that “70” actually gives us ~112 “M"s of width.

But there could be much more I could do:

Line Numbers Back On

I decided I missed the line numbers, which makes 70rem too small for code blocks. Added the below to main.css.

div.highlight {
    min-width: 80rem;
}

The general structure of the line numbered code blocks for reference (a one row 2 column table):

<div class="highlight">
                <div class="chroma">
                    <table class="lntable">
                        <tr>
                            <td class="lntd">
                                <pre tabindex="0" class="chroma">
                                    <code>
                                    <span class="lnt"> 1</span>
                                    <span class="lnt"> 2</span>
                                    ...
                                    </code>
                                </pre>
                            </td>
                            <td class="lntd">
                                <pre class="chroma">
                                    <code class="language-$LANG" data-lang="$LANG">
                                    ... more formatting spans and the code
                                    </code>
                                </pre>
                            </td>
</tr></table></div></div>

Safari/Chrome on Device Only Error

I had never looked at this site on a mobile device before but the code block CSS was behaving VERY strangely on two different iPhones. The sizes of the fonts were very inconsistent from code block to code block with no perceptible pattern. Not which language they held, not number of lines, not line length. I rolled back the changes I’d made and it didn’t fix it. I tried removing pygmentsUseClasses = true from the hugo.toml and it changed in that now the font sizes on mobile devices were inconsistent between lines within the code block.

The bug was not reproducible in “responsive mode” on either Safari or FireFox

Safari version 16.5.2

Enable Safari Developer Tools for On Device Browser

On phone: Settings > Safari > Advanced (at bottom) > Web Inspector

Plug phone into computer via cable (Agree to Trust)

In Safari choose the device from the top of the Develop menu, and sub-select the open web page you’d like to inspect.

The Fix

The variable font size problem appears to have been fixed by adding classes back in, not through an explicit call to pygments, but updating the [markup] block as the newest versions of Hugo documentation recommend.

The class based version of the css and this theme works terribly with line numbers so those are off again.

I’m still flummoxed by why this happened on actual mobile devices only, not in different browsers dev mode.

hugo.toml went from

theme = "etch"
enableInlineShortcodes = true
pygmentsCodeFences = true
pygmentsUseClasses = true
[markup]
  [markup.highlight]
    lineNos = true

to

theme = "etch"
enableInlineShortcodes = true
[markup]
  [markup.highlight]
    lineNos = false
    codeFences = true
    noClasses = false

/asset/css/min770.css again has the following changes compared to theme CSS.

body {
    max-width: 75rem;
    line-height: 1.5;
}

div.highlight {
    min-width: 85rem;
}

Interesting links found along the way: