Browse Source

Add line numbers to code output.

master
Zed A. Shaw 1 month ago
parent
commit
4effedb29d
4 changed files with 57 additions and 7 deletions
  1. +18
    -3
      lib/docs.js
  2. +38
    -0
      sass/_codes.scss
  3. +0
    -3
      src/routes/modules/[slug]/[exercise].svelte
  4. +1
    -1
      static/css/spectre.min.css

+ 18
- 3
lib/docs.js View File

@@ -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) => '';


+ 38
- 0
sass/_codes.scss View File

@@ -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;
}

+ 0
- 3
src/routes/modules/[slug]/[exercise].svelte View File

@@ -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);


+ 1
- 1
static/css/spectre.min.css
File diff suppressed because it is too large
View File


Loading…
Cancel
Save