Home / GitHub Page

Code block option to show line number

is that any way to add line number in code block just like github? I was using VS code with markdown preview extension. they use the below way to show/hide line number

to show line number
```python {.line-numbers}
```

without line number
```python
```

1 Like

Currently I don’t think there’s a way to do this with Joplin (it might be possible to do this using the userstyle.css, but I don’t know much about css). If your interested in implementing the feature I suspect it won’t be too complicated.

That’s not supported by highlight.js, so it would be hard for us to support it:

https://highlightjs.readthedocs.io/en/latest/line-numbers.html

I saw the generated code, is that possible to add a tag in each line then I can use userstyle.css to insert the linenumber

like this :

<pre class="hljs">
<code>
<span class="codeline">Shape a = <span class="hljs-keyword">new</span> Rectangle(width, height);</span>
<span class="codeline">Shape b = <span class="hljs-keyword">new</span> RegularTriangle(<span class="hljs-keyword">base</span>, height);</span>
<span class="codeline"><span class="hljs-keyword">double</span> aa = a.CalcArea();</span>
<span class="codeline"><span class="hljs-keyword">double</span> ba = b.CalcArea();</span>
</code></pre>

testing css :

.hljs {
color : black;
counter-reset : line;
}

.hljs-keyword {
color : blue;
}

.codeline:before {
content : counter(line) “|”;
counter-increment : line;
}

Can’t you already apply the css to the direct SPAN children of the CODE element?

I tried using development tools to check the DOM in joplin, the HTML is like this in joplin :

<pre><code>
<span class='hljskey-word'>if</span> this is a keyword line
line 2
line 3
</code></pre>

I’m not very well on css, I didn’t found any way to add a line number before each line without any tag. if I add a tag manually on each line just like my previous post, I can show the line number very easy just using userstyle.css.

@laurent it looks like there’s a plugin to do this since two years back:

https://wcoder.github.io/highlightjs-line-numbers.js/

Can we use this ?

1 Like