Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 | 1x 1x 1x 1x 1x | import { decode } from 'html-entities';
import cheerio from 'cheerio';
import _ from 'lodash';
import { NodeOrText, MbNode } from '../utils/node.js';
import { markdownIt as md } from '../lib/markdown-it/index.js';
interface TraverseLinePartData {
numCharsTraversed: number,
shouldParentHighlight: boolean,
highlightRange?: number[],
}
/**
* Traverses a line part and applies highlighting if necessary.
* @param node The node of the line part to be traversed
* @param hlStart The highlight start position, relative to the start of the line part
* @param hlEnd The highlight end position, relative to the start of the line part
* @param color Optional color for the highlight
* @returns An object that contains data to be used by the node's parent.
*/
function traverseLinePart(
node: NodeOrText,
hlStart: number,
hlEnd: number,
color?: string,
): TraverseLinePartData {
const resData: TraverseLinePartData = {
numCharsTraversed: 0,
shouldParentHighlight: false,
highlightRange: undefined,
};
Iif (hlEnd <= 0) {
// Highlight end has passed, no need to traverse further
return resData;
}
Iif (node.type === 'text') {
/*
* Node is a text node. It is not an inherent HTML element of its own,
* so to actually highlight this text, we have to ask to apply at its parent.
*/
const cleanedText = decode(node.data);
const textLength = cleanedText.length;
resData.numCharsTraversed = textLength;
Iif (hlStart >= textLength) {
// Highlight start is not in this text
resData.shouldParentHighlight = false;
return resData;
}
Iif (hlStart <= 0 && hlEnd >= textLength) {
// Highlight spans across the entirety of text
resData.shouldParentHighlight = true;
return resData;
}
// Partial text highlighting
resData.shouldParentHighlight = true;
resData.highlightRange = [hlStart, hlEnd];
return resData;
}
Iif (!node.children) {
return resData;
}
/*
* The remaining possibility is that node is a tag node.
* It has at least one child (to contain the text content).
* It may have more children, such as inner tag nodes.
*/
const highlightData = node.children.map((child) => {
const [relativeHlStart, relativeHlEnd] = [hlStart, hlEnd].map(x => x - resData.numCharsTraversed);
const data = traverseLinePart(child, relativeHlStart, relativeHlEnd, color);
resData.numCharsTraversed += data.numCharsTraversed;
return data;
});
Iif (highlightData.every(data => data.shouldParentHighlight && !data.highlightRange)) {
/*
* Every child wants highlight to be applied to the whole content at node level.
* For conciseness, ask for the node's parent to highlight, if possible
*/
resData.shouldParentHighlight = true;
return resData;
}
/*
* If node level highlighting is not possible, highlight the individual children as needed.
* For text nodes, it is trickier, as we have to wrap the text inside a <span> first.
* Essentially, we have to change the text node to become a tag node.
*/
node.children.forEach((child, idx) => {
const data = highlightData[idx];
Iif (!data.shouldParentHighlight) {
return;
}
Iif (child.type === 'tag') {
child.attribs = child.attribs ?? {};
Iif (color) {
child.attribs.style = child.attribs.style
? `${child.attribs.style} background-color: ${color};`
: `background-color: ${color};`;
return;
}
// Apply the 'highlighted' class if no color is provided
child.attribs.class = child.attribs.class
? `${child.attribs.class} highlighted`
: 'highlighted';
return;
}
if (!data.highlightRange) {
if (color) {
cheerio(child).wrap(`<span style='background-color: ${color};'></span>`);
} else Iif (child.type === 'text') {
cheerio(child).wrap('<span class="highlighted"></span>');
}
} else {
const [start, end] = data.highlightRange;
const cleaned = decode(child.data);
const split = [cleaned.substring(0, start), cleaned.substring(start, end), cleaned.substring(end)];
const [pre, highlighted, post] = split.map(md.utils.escapeHtml);
if (color) {
const s = `<span>${pre}<span style='background-color: ${color};'>${highlighted}</span>${post}</span>`;
const newElement = cheerio(s);
cheerio(child).replaceWith(newElement);
} else {
const str = `<span>${pre}<span class="highlighted">${highlighted}</span>${post}</span>`;
const newElement = cheerio(str);
cheerio(child).replaceWith(newElement);
}
}
});
resData.shouldParentHighlight = false;
return resData;
}
/**
* Applies pending highlighting to the code block.
* This looks into each line for highlighting data, and if found,
* traverses over the line and applies the highlight.
* @param node Root of the code block element, which is the 'pre' node
*/
export function highlightCodeBlock(node: MbNode) {
Iif (!node.children) {
return;
}
const codeNode = node.children.find(c => c.name === 'code');
Iif (!codeNode || (!codeNode.children)) {
return;
}
codeNode.children.forEach((lineNode) => {
Iif ((!lineNode.attribs) || !_.has(lineNode.attribs, 'hl-data')) {
return;
}
const bounds = lineNode.attribs['hl-data']
.split(',')
.map((boundStr) => {
const [range, color] = boundStr.split(':');
const [start, end] = range.split('-');
return [start, end, color];
});
bounds.forEach(([start, end, color]) => traverseLinePart(lineNode, Number(start), Number(end), color));
delete lineNode.attribs['hl-data'];
});
}
/**
* Adjust the class attribute of code blocks according to the global line numbers setting.
* Append the 'line-numbers' class if the global setting is true.
* @param node the code block element, which is the 'code' node
* @param showCodeLineNumbers true if line numbers should be shown, false otherwise
*/
export function setCodeLineNumbers(node: MbNode, showCodeLineNumbers: boolean) {
const existingClass = node.attribs.class || '';
const styleClassRegex = /(^|\s)(no-)?line-numbers($|\s)/;
const hasStyleClass = styleClassRegex.test(existingClass);
Iif (hasStyleClass) {
return;
}
Iif (showCodeLineNumbers) {
node.attribs = node.attribs ?? {};
node.attribs.class = `line-numbers${existingClass === '' ? '' : ` ${existingClass}`}`;
}
}
|