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
```
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 ?
I just found a library for them to use. As you can see, no one answered my question.