Skip to content

Commit

Permalink
feat(task): implement codeblock line numbering (#103)
Browse files Browse the repository at this point in the history
  • Loading branch information
xhyrom authored Dec 1, 2024
1 parent 87c1154 commit 31abcac
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 0 deletions.
25 changes: 25 additions & 0 deletions src/app/components/tasks/task-body/task-body.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,31 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { TaskTipComponent } from './task-tip/task-tip.component';
import { TaskPanel, TaskTipData } from '../../../models';

// https://stackoverflow.com/questions/64280814/how-can-i-correctly-highlight-a-line-by-line-code-using-highlight-js-react
highlight.addPlugin({
'after:highlight': (params: { value: string }) => {
const openTags: string[] = [];

params.value = params.value
.split('\n')
.map((line) => {
line = line.replace(/(<span [^>]+>)|(<\/span>)/g, (match) => {
if (match === '</span>') {
openTags.pop();
} else {
openTags.push(match);
}
return match;
});

return `<div>${openTags.join('')}${line}${'</span>'.repeat(
openTags.length
)}</div>`;
})
.join('');
},
});

@Component({
selector: 'ksi-task-body',
templateUrl: './task-body.component.html',
Expand Down
19 changes: 19 additions & 0 deletions src/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,25 @@ Codemirror core style
}
}

pre.numberLines {
counter-reset: line;
}

pre.numberLines code {
display: block;
}

pre.numberLines code div::before {
content: counter(line);
counter-increment: line;
display: inline-block;
text-align: right;
color: #999;
border-right: 1px solid #ddd;
padding: 0 0.5em 0 0.1em;
margin-right: 6px;
}

table {
th, td {
color: $ksi-page-fg;
Expand Down

0 comments on commit 31abcac

Please sign in to comment.