Add line numbers to code output.

lib/docs.js

@@ -7,7 +7,18 @@ const { log } = require('./logging');
 const fs = require('fs');
 
 
-const highlight = (str, lang) => {
+const count_lines = (str) => {
+  let match = str.match(/\n(?!$)/g);
+  return match ? match.length + 1 : 1;
+}
+
+const line_number_spans = (str) => {
+  let count = count_lines(str);
+  let spans = new Array(count + 1).join('<span></span>');
+  return `<span aria-hidden="true" class="line-numbers-rows">${spans}</span>`;
+}
+
+const run_prism = (str, lang) => {
   // TODO: so irritating
   if(lang in Prism.languages) {
     return Prism.highlight(str, Prism.languages[lang], lang);
@@ -17,12 +28,16 @@ const highlight = (str, lang) => {
     if(lang in Prism.languages) {
       return Prism.highlight(str, Prism.languages[lang], lang);
     } else { 
-      console.log(`!!!!!!!!!!!!!!! Language ${lang} not found in Prism.`);
-      return '';
+      // TODO: why am I doing this?
+      return str;
     }
   }
 }
 
+const highlight = (str, lang) => {
+  return run_prism(str, lang) + line_number_spans(str);
+}
+
 /* A separate renderer just for the titles that doesn't need anything else. */
 const title_render = new Remarkable('full').use(rem => {
   let pass = (tokens, idx) => '';

sass/_codes.scss

@@ -30,3 +30,41 @@ pre {
     font-family: $mono-font-family !important;
   }
 }
+
+pre > code {
+  position: relative;
+  padding-left: 3rem;
+  counter-reset: linenumber;
+  position: relative;
+  white-space: inherit;
+}
+
+code .line-numbers-rows {
+  position: absolute;
+  pointer-events: none;
+  top: 1em;
+  font-size: 100%;
+  left: 0;
+  width: 2.5em; /* works for line-numbers below 1000 lines */
+  letter-spacing: -1px;
+  border-right: 1px solid #888;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+}
+
+code .line-numbers-rows > span {
+  display: block;
+  counter-increment: linenumber;
+}
+
+code .line-numbers-rows > span:before {
+  content: counter(linenumber);
+  color: #888;
+  display: block;
+  padding-right: 0.8em;
+  text-align: right;
+}

src/routes/modules/[slug]/[exercise].svelte

@@ -23,7 +23,6 @@
   import CompleteExerciseModal from '../../../components/CompleteExerciseModal.svelte';
   import { curriculum_init } from 'curriculum';
   import { goto, stores } from '@sapper/app';
-  import { onMount } from 'svelte';
   const { session } = stores();
 
   const rating_icon = {'-1': 'frown', '0': 'meh', '1': 'smile'}; 
@@ -78,8 +77,6 @@
         curriculum.select_exercise(exercise);
       }
 
-      console.log("After", curriculum.selected_module, curriculum.selected_exercise);
-
       if(exercise.content === undefined) {
         // lazy load the content as they're able to do it
         exercise.content = await load_exercise_content(module_slug, exercise_slug);