mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-12-18 12:31:47 +03:00
Code Issues Projects Releases Packages Wiki Activity

Style backtick inline codes

Browse source 
The tree walker code is generated via Copilot, hope it works
This commit is contained in:
Lim Chee Aun 2022-12-12 21:51:59 +08:00
parent b988b10c3d
commit d32d9c62eb
2 changed files with 75 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/status.css
View file

@ -173,6 +173,9 @@
.status .content p:last-child {
margin-block-end: 0;
}
.status .content p code {
color: var(--green-color);
}
.status .content .invisible {
display: none;
}

88
src/utils/enhance-content.js
View file

@ -20,22 +20,78 @@ export default (content, opts = {}) => {
// 3. Code blocks
// Check for <p> with markdown-like content "```"
const blocks = Array.from(dom.querySelectorAll('p')).filter((p) =>
/^```[^]+```$/g.test(p.innerText.trim()),
);
blocks.forEach((block) => {
const pre = document.createElement('pre');
const code = document.createElement('code');
const breaks = block.querySelectorAll('br');
breaks.forEach((br) => br.replaceWith('\n'));
code.innerHTML = block.innerText
.trim()
// .replace(/^```/g, '')
// .replace(/```$/g, '')
.replace(/^[\n\r]+/, '');
pre.appendChild(code);
block.replaceWith(pre);
});
{
const blocks = Array.from(dom.querySelectorAll('p')).filter((p) =>
/^```[^]+```$/g.test(p.innerText.trim()),
);
blocks.forEach((block) => {
const pre = document.createElement('pre');
const code = document.createElement('code');
const breaks = block.querySelectorAll('br');
breaks.forEach((br) => br.replaceWith('\n'));
code.innerHTML = block.innerText
.trim()
// .replace(/^```/g, '')
// .replace(/```$/g, '')
.replace(/^[\n\r]+/, '');
pre.appendChild(code);
block.replaceWith(pre);
});
}
// 4. Inline code
{
// Get all text nodes in the DOM
const textNodes = [];
const walk = document.createTreeWalker(
dom,
NodeFilter.SHOW_TEXT,
null,
false,
);
let node;
while ((node = walk.nextNode())) {
// Only get text that contains markdown-like code syntax
if (/`[^]+`/g.test(node.nodeValue)) {
textNodes.push(node);
}
}
if (textNodes.length) {
// - Split text nodes into array of text and DOM nodes
// - Replace markdown-like code syntax with <code> element
// - Apply them all back to parent node
textNodes.forEach((node) => {
const parent = node.parentNode;
const text = node.nodeValue;
const nodes = [];
let i = 0;
let j = 0;
let k = 0;
while ((i = text.indexOf('`', j)) !== -1) {
if (i > j) {
nodes.push(document.createTextNode(text.substring(j, i)));
}
j = i + 1;
if ((k = text.indexOf('`', j)) === -1) {
k = j;
}
if (j < k) {
const code = document.createElement('code');
code.appendChild(document.createTextNode(text.substring(j, k)));
nodes.push(document.createTextNode('`'));
nodes.push(code);
nodes.push(document.createTextNode('`'));
}
j = k + 1;
}
if (j < text.length) {
nodes.push(document.createTextNode(text.substring(j)));
}
nodes.forEach((n) => parent.insertBefore(n, node));
parent.removeChild(node);
});
}
}
if (postEnhanceDOM) {
postEnhanceDOM(dom); // mutate dom