docs / line_numbers
line numbers
A popular option for code highlighting is add line numbers to the output. Twinkleplop supports this out of the box.
# line numbers § 01
Line numbers ins twinkleplop are a renderer option.
This means that you can create a single resuable highlighter and decide whether or not render line numbers on a per-call basis.
line-numbers.ts typescript copy
1import { language } from "@twinkleplop/typescript";
2
3const ts = language();
4
5// line numbers
6const html = ts("1 + 2", {
7 line_numbers: true,
8});
9
10// no line numbers
11const html_no_line_numbers = ts("1 + 2");# styling § 01
Line numbers are just an extra HTML element that gets output at the start of the line.
The HTML looks like this:
line-numbers.html html copy
<pre class="twinkleplop">
<code>
<span class="l"><span class="ln">1</span> ...tokens </span>
<span class="l"><span class="ln">2</span> ...tokens</span>
<span class="l"><span class="ln">3</span> ...tokens</span>
</code>
</pre>You can style them like this:
line-numbers.css css copy
.twinkleplop .ln {
display: inline-block;
width: 40px;
text-align: right;
padding-right: 16px;
}