badlydrawnrob / anki

Learn to code with Anki — flashcards and themes for all learning levels. Master your programming language of choice!
MIT License
719 stars 61 forks source link

Skylighting `.numberLines` — adding lines to your `code block` #127

Open badlydrawnrob opened 7 months ago

badlydrawnrob commented 7 months ago

It seems that Skylighting outputs the code for numbered lines But you add a conditional .numberLines and .numberSource to view them.

⚠️ Current Anki highlighting themes don't allow for numbered lines (yet)

<div class="sourceCode" id="cb2"><pre
class="sourceCode elm"><code class="sourceCode elm"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="co">-- !# Error (1) and (2):</span></span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a><span class="co">-- Must be `CapitalCase`</span></span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a><span class="kw">type</span> <span class="dt">ThumbnailSize</span></span>
...</pre></div>

To add numbered lines:

type thumbnailSize
  = small
  | medium
  | large

sizeToString : thumbnailSize -> String
sizeToString size =
  case size of
      Small -> "small"

Outputs

<div class="sourceCode" id="cb2"><pre class="sourceCode numberSource numberLines elm"><code class="sourceCode elm"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="co">-- !# Error (1) and (2):</span></span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a><span class="co">-- Must be `CapitalCase`</span></span>
...</code></pre></div>

Which looks like (in a different highlighting theme)

Screenshot 2024-01-30 at 23 00 25