diff --git a/src/components/status.css b/src/components/status.css index c4906fbd..ea2db464 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -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; } diff --git a/src/utils/enhance-content.js b/src/utils/enhance-content.js index c048bbb3..d94d43c2 100644 --- a/src/utils/enhance-content.js +++ b/src/utils/enhance-content.js @@ -20,22 +20,78 @@ export default (content, opts = {}) => { // 3. Code blocks // Check for
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 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