43e55a963b
* wip code highlighting of lines * Implements gutter component * WIP: Profiler with gutter * cleaned up highlight code * Removes before content for gutter styling * Styles gutter * Add correct Profiler code content * Adds color variable for gutter gray * refactor code component width gutter and diffing
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
const hljs = require('highlight.js/lib/highlight');
|
|
const javascript = require('highlight.js/lib/languages/javascript');
|
|
|
|
hljs.registerLanguage('javascript', javascript);
|
|
|
|
interface PatchInterface {
|
|
[key: string]: string;
|
|
}
|
|
|
|
var PATCH_TYPES: PatchInterface = {
|
|
'+': 'addition',
|
|
'-': 'deletion',
|
|
'!': 'change',
|
|
};
|
|
|
|
function diffHighlight(language: string, code: any, gutter: any) {
|
|
return code
|
|
.split(/\r?\n/g)
|
|
.map((line: string, index: number) => {
|
|
var type;
|
|
if (/^-{3} [^-]+ -{4}$|^\*{3} [^*]+ \*{4}$|^@@ [^@]+ @@$/.test(line)) {
|
|
type = 'chunk';
|
|
} else if (/^Index: |^[+\-*]{3}|^[*=]{5,}$/.test(line)) {
|
|
type = 'header';
|
|
} else {
|
|
type = PATCH_TYPES[line[0] as string] || 'null';
|
|
line = line.replace(/^[+\-! ]/, '');
|
|
}
|
|
|
|
const g = gutter[index];
|
|
|
|
return `<span data-test="${g !== undefined ? g + 'x' : ''}" class="line-${type}">${
|
|
hljs.highlight(language, line).value
|
|
}</span>`;
|
|
})
|
|
.join('\n');
|
|
}
|
|
|
|
function highlight(language: string, code: string, diff: boolean, gutter: any) {
|
|
if (diff) {
|
|
return diffHighlight(language, code, gutter);
|
|
}
|
|
|
|
return hljs.highlight(language, code).value;
|
|
}
|
|
|
|
export default highlight;
|