Is there an easy way to see line numbers in rendered code blocks?

#1

In edit mode I can get line numbers if I toggle a config setting of CodeMirror plugin.

In tiddler view mode in the story river reading wrapped text (on a smartphone, so the screen space is limited) becomes extremely hard. The worst offender is WikiText containing filters, because those lines tend to get quite long. I’d happily trade 1-2 chars of my limited screen space for the immense gain of not having to waste brain power to process wrapped lines (filter code especially is hard enough to understand and requires all the focus I can get).

I’d be happy with a config global setting which I could toggle in any wiki. But I’m ok to maintain a modified tiddler view template in my own wikis only if line numbers in rendered code blocks can be achieved this way and if such a template exists.

#2

There is no easy way to have line numbers in rendered code blocks at the moment. At least I personally do not know one.

#3

Hello @vuk

How about the following:

put this in a tiddler with tag $:/tags/Global

\widget $codeblock(code)
  <div class="custom-codeblock">
    <pre class="line-numbers">
      <$list filter="[<code>splitregexp[\n]]" counter="index">
        <div class="code-line">
          <span class="line-number"><$text text=<<index>>/></span>
          <span class="line-content"><$text text={{{ [<currentTiddler>] }}}/></span>
        </div>
      </$list>
    </pre>
  </div>
\end

put this in a tiddler with tag $:/tags/Stylesheet

.custom-codeblock {
  background: #f5f5f5;
  border: 1px solid #ccc;
  padding: 10px;
  overflow-x: auto;
}

.custom-codeblock .line-numbers {
  display: flex;
  flex-direction: column;
}

.custom-codeblock .code-line {
  display: flex;
  align-items: baseline;
}

.custom-codeblock .line-number {
  color: #999;
  padding-right: 10px;
  text-align: right;
  width: 30px;
  flex-shrink: 0;
}

.custom-codeblock .line-content {
  flex-grow: 1;
}

please tell me if that works for you

4 Likes
#4

Thank you, this works just fine and regardless of my phone standing vertically or horizontally, I don’t feel like a horse :horse: wearing blinders anymore.

I am lucky today, because not only I can just copypaste the snippets, I think I understand in general terms what’s up here. You’re overwriting the codeblock core widget like in the last example here https://tiddlywiki.com/#Custom%20Widgets . Also, currentTiddler is each line of text, as recently explained here Search and replace certain characters in tiddler caption and title - #7 by EricShulman . Also, I get one more collateral benefit, because this whole example is an answer ahead to a question I was only preparing to ask :+1: . But I’ll elaborate about that in another thread.

#5

@BurningTreeC

There’s a bug with line numbers longer than one digit, but only in Tiddloid. In Vivaldi everything is fine. It’s the same file opened in each app, so the same wikitext and CSS code that I copypasted from your post above.

tiddloid
tiddloid720×1544 107 KB

vivaldi
vivaldi720×1544 113 KB

#6

This is not just a Tiddloid bug, as this is also a problem on Chrome browser on my ChromeOS laptop. Vivaldi is built ontop of Chromium, so it also uses the Blink rendering engine just like chrome on my ChromeOS laptop, so not sure why this problem also does not effect Vivaldi.

I changed the padding: 10px to padding: 5px and it seems to have fixed the problem on my laptop.

#7

I changed the padding: 10px to padding: 5px and it seems to have fixed the problem on my laptop.

I can only understand CSS at string (rather than structural) level, so I just did a couple of brute force trial and error tests:

  1. Changing padding: 10px; to padding: 5px; at the top of the CSS code block had no effect.
  2. But changing padding-right: 10px; to padding-right: 5px; below did it on smartphone.

I’m also intimidated by the hardcoded value width: 30px;, because without testing, I can’t imagine what will happen with a big enough codeblock, with line numbers consisting of many digits. Albeit big sized tiddlers are a TiddlyWiki antipattern.

Perhaps I should entirely remove both padding-right: 10px; and width: 30px; lines for .line-number? Visually the result is a bit compact, but still readable. Maybe adding a visually explicit vertical line between line numbers and actual code that follows could help? I just have no idea how to do that in CSS.

#8

try this css:

.custom-codeblock {
  background: #f5f5f5;
  border: 1px solid #ccc;
  padding: 10px;
  overflow-x: auto;
}

.custom-codeblock .line-numbers {
  display: flex;
  flex-direction: column;
}

.custom-codeblock .code-line {
  display: flex;
  align-items: baseline;
}

.custom-codeblock .line-number {
  color: #999;
  padding-right: 10px;
  text-align: right;
  width: 3em;
  flex-shrink: 0;
  flex-grow: 0;
overflow-wrap: normal;
}

.custom-codeblock .line-content {
  flex-grow: 1;
}
#9

Thank you, this works on either Vivaldi or Tiddloid. As I understand, width: 3em; adresses the concern I raised in the post above?

#10

PS: a side effect is that having line numbers attached like this kills the syntax highlighting provided by Highlight.js plugin, which is a shame, since having colored code helps understanding it as much if not more than line numbers. Maybe wrapping the original codeblock widget somehow instead of overwriting it could help dealing with this.

#11

3em is 3 character widths, which should be enough.
overflow-wrap will handle if there are more that 999 line.

1 Like