Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Patches › 70d9a40b
Add prettylights CSS and remove unused syntax functions
Merged did:key:z6MkkfM3...sVz5 opened 1 year ago

check

👉 Workflow runs 👉 Branch on GitHub

Activity Changes +190 -116
3 files changed +190 -116 56522a60 → 665c5a96
modified index.html
@@ -62,6 +62,7 @@


    <link rel="stylesheet" type="text/css" href="/index.css" />

    <link rel="stylesheet" type="text/css" href="/typography.css" />
+ 
    <link rel="stylesheet" type="text/css" href="/prettylights.css" />

    <link rel="stylesheet" type="text/css" href="/colors.css" />

    <script type="module">

      // Make global 'Buffer' available to legacy modules.
added public/prettylights.css
@@ -0,0 +1,188 @@
+ 
/* This is a theme distributed by `starry-night`.
+ 
 * It’s based on what GitHub uses on their site.
+ 
 * See <https://github.com/wooorm/starry-night> for more info. */
+ 
:root {
+ 
  --color-prettylights-syntax-comment: #8b949e;
+ 
  --color-prettylights-syntax-constant: #79c0ff;
+ 
  --color-prettylights-syntax-entity: #d2a8ff;
+ 
  --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
+ 
  --color-prettylights-syntax-entity-tag: #7ee787;
+ 
  --color-prettylights-syntax-keyword: #ff7b72;
+ 
  --color-prettylights-syntax-string: #a5d6ff;
+ 
  --color-prettylights-syntax-variable: #ffa657;
+ 
  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
+ 
  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
+ 
  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
+ 
  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
+ 
  --color-prettylights-syntax-carriage-return-bg: #b62324;
+ 
  --color-prettylights-syntax-string-regexp: #7ee787;
+ 
  --color-prettylights-syntax-markup-list: #f2cc60;
+ 
  --color-prettylights-syntax-markup-heading: #1f6feb;
+ 
  --color-prettylights-syntax-markup-italic: #c9d1d9;
+ 
  --color-prettylights-syntax-markup-bold: #c9d1d9;
+ 
  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
+ 
  --color-prettylights-syntax-markup-deleted-bg: #67060c;
+ 
  --color-prettylights-syntax-markup-inserted-text: #aff5b4;
+ 
  --color-prettylights-syntax-markup-inserted-bg: #033a16;
+ 
  --color-prettylights-syntax-markup-changed-text: #ffdfb6;
+ 
  --color-prettylights-syntax-markup-changed-bg: #5a1e02;
+ 
  --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
+ 
  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
+ 
  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
+ 
  --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
+ 
  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
+ 
  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+ 
}
+
+ 
[data-theme="light"] {
+ 
  --color-prettylights-syntax-comment: #6e7781;
+ 
  --color-prettylights-syntax-constant: #0550ae;
+ 
  --color-prettylights-syntax-entity: #8250df;
+ 
  --color-prettylights-syntax-storage-modifier-import: #24292f;
+ 
  --color-prettylights-syntax-entity-tag: #116329;
+ 
  --color-prettylights-syntax-keyword: #cf222e;
+ 
  --color-prettylights-syntax-string: #0a3069;
+ 
  --color-prettylights-syntax-variable: #953800;
+ 
  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
+ 
  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+ 
  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
+ 
  --color-prettylights-syntax-carriage-return-text: #f6f8fa;
+ 
  --color-prettylights-syntax-carriage-return-bg: #cf222e;
+ 
  --color-prettylights-syntax-string-regexp: #116329;
+ 
  --color-prettylights-syntax-markup-list: #3b2300;
+ 
  --color-prettylights-syntax-markup-heading: #0550ae;
+ 
  --color-prettylights-syntax-markup-italic: #24292f;
+ 
  --color-prettylights-syntax-markup-bold: #24292f;
+ 
  --color-prettylights-syntax-markup-deleted-text: #82071e;
+ 
  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
+ 
  --color-prettylights-syntax-markup-inserted-text: #116329;
+ 
  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
+ 
  --color-prettylights-syntax-markup-changed-text: #953800;
+ 
  --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
+ 
  --color-prettylights-syntax-markup-ignored-text: #eaeef2;
+ 
  --color-prettylights-syntax-markup-ignored-bg: #0550ae;
+ 
  --color-prettylights-syntax-meta-diff-range: #8250df;
+ 
  --color-prettylights-syntax-brackethighlighter-angle: #57606a;
+ 
  --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
+ 
  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+ 
}
+
+ 
.pl-c {
+ 
  color: var(--color-prettylights-syntax-comment);
+ 
}
+
+ 
.pl-c1,
+ 
.pl-s .pl-v {
+ 
  color: var(--color-prettylights-syntax-constant);
+ 
}
+
+ 
.pl-e,
+ 
.pl-en {
+ 
  color: var(--color-prettylights-syntax-entity);
+ 
}
+
+ 
.pl-smi,
+ 
.pl-s .pl-s1 {
+ 
  color: var(--color-prettylights-syntax-storage-modifier-import);
+ 
}
+
+ 
.pl-ent {
+ 
  color: var(--color-prettylights-syntax-entity-tag);
+ 
}
+
+ 
.pl-k {
+ 
  color: var(--color-prettylights-syntax-keyword);
+ 
}
+
+ 
.pl-s,
+ 
.pl-pds,
+ 
.pl-s .pl-pse .pl-s1,
+ 
.pl-sr,
+ 
.pl-sr .pl-cce,
+ 
.pl-sr .pl-sre,
+ 
.pl-sr .pl-sra {
+ 
  color: var(--color-prettylights-syntax-string);
+ 
}
+
+ 
.pl-v,
+ 
.pl-smw {
+ 
  color: var(--color-prettylights-syntax-variable);
+ 
}
+
+ 
.pl-bu {
+ 
  color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
+ 
}
+
+ 
.pl-ii {
+ 
  color: var(--color-prettylights-syntax-invalid-illegal-text);
+ 
  background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
+ 
}
+
+ 
.pl-c2 {
+ 
  color: var(--color-prettylights-syntax-carriage-return-text);
+ 
  background-color: var(--color-prettylights-syntax-carriage-return-bg);
+ 
}
+
+ 
.pl-sr .pl-cce {
+ 
  font-weight: bold;
+ 
  color: var(--color-prettylights-syntax-string-regexp);
+ 
}
+
+ 
.pl-ml {
+ 
  color: var(--color-prettylights-syntax-markup-list);
+ 
}
+
+ 
.pl-mh,
+ 
.pl-mh .pl-en,
+ 
.pl-ms {
+ 
  font-weight: bold;
+ 
  color: var(--color-prettylights-syntax-markup-heading);
+ 
}
+
+ 
.pl-mi {
+ 
  font-style: italic;
+ 
  color: var(--color-prettylights-syntax-markup-italic);
+ 
}
+
+ 
.pl-mb {
+ 
  font-weight: bold;
+ 
  color: var(--color-prettylights-syntax-markup-bold);
+ 
}
+
+ 
.pl-md {
+ 
  color: var(--color-prettylights-syntax-markup-deleted-text);
+ 
  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
+ 
}
+
+ 
.pl-mi1 {
+ 
  color: var(--color-prettylights-syntax-markup-inserted-text);
+ 
  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
+ 
}
+
+ 
.pl-mc {
+ 
  color: var(--color-prettylights-syntax-markup-changed-text);
+ 
  background-color: var(--color-prettylights-syntax-markup-changed-bg);
+ 
}
+
+ 
.pl-mi2 {
+ 
  color: var(--color-prettylights-syntax-markup-ignored-text);
+ 
  background-color: var(--color-prettylights-syntax-markup-ignored-bg);
+ 
}
+
+ 
.pl-mdr {
+ 
  font-weight: bold;
+ 
  color: var(--color-prettylights-syntax-meta-diff-range);
+ 
}
+
+ 
.pl-ba {
+ 
  color: var(--color-prettylights-syntax-brackethighlighter-angle);
+ 
}
+
+ 
.pl-sg {
+ 
  color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
+ 
}
+
+ 
.pl-corl {
+ 
  text-decoration: underline;
+ 
  color: var(--color-prettylights-syntax-constant-other-reference-link);
+ 
}
modified src/lib/syntax.ts
@@ -1,4 +1,4 @@
- 
import type { ElementContent, Root } from "hast";
+ 
import type { Root } from "hast";



import onigurumaWASMUrl from "vscode-oniguruma/release/onig.wasm?url";

import sourceAsciiDoc from "@wooorm/starry-night/text.html.asciidoc";
@@ -122,118 +122,3 @@ export async function highlight(
  const scope = starryNight.flagToScope(grammar);

  return starryNight.highlight(content, scope ?? "text.raw");

}
-
- 
export function lineNumbersGutter(tree: Root) {
- 
  const replacement: ElementContent[] = [];
- 
  const search = /\r?\n|\r/g;
- 
  let index = -1;
- 
  let start = 0;
- 
  let startTextRemainder = "";
- 
  let lineNumber = 0;
-
- 
  while (++index < tree.children.length) {
- 
    const child = tree.children[index];
-
- 
    if (child.type === "text") {
- 
      let textStart = 0;
- 
      let match = search.exec(child.value);
-
- 
      while (match) {
- 
        // Nodes in this line.
- 
        const line = tree.children.slice(start, index) as ElementContent[];
-
- 
        // Prepend text from a partial matched earlier text.
- 
        if (startTextRemainder) {
- 
          line.unshift({ type: "text", value: startTextRemainder });
- 
          startTextRemainder = "";
- 
        }
-
- 
        // Append text from this text.
- 
        if (match.index > textStart) {
- 
          line.push({
- 
            type: "text",
- 
            value: child.value.slice(textStart, match.index),
- 
          });
- 
        }
-
- 
        // Add a line, and the eol.
- 
        lineNumber += 1;
- 
        replacement.push(createLine(line, lineNumber), {
- 
          type: "text",
- 
          value: match[0],
- 
        });
-
- 
        start = index + 1;
- 
        textStart = match.index + match[0].length;
- 
        match = search.exec(child.value);
- 
      }
-
- 
      // If we matched, make sure to not drop the text after the last line ending.
- 
      if (start === index + 1) {
- 
        startTextRemainder = child.value.slice(textStart);
- 
      }
- 
    }
- 
  }
-
- 
  const line = tree.children.slice(start) as ElementContent[];
- 
  // Prepend text from a partial matched earlier text.
- 
  if (startTextRemainder) {
- 
    line.unshift({ type: "text", value: startTextRemainder });
- 
    startTextRemainder = "";
- 
  }
-
- 
  if (line.length > 0) {
- 
    lineNumber += 1;
- 
    replacement.push(createLine(line, lineNumber));
- 
  }
-
- 
  // Replace children with new array.
- 
  tree.children = replacement;
-
- 
  return tree;
- 
}
-
- 
function createLine(children: ElementContent[], line: number): ElementContent {
- 
  return {
- 
    type: "element",
- 
    tagName: "tr",
- 
    properties: {
- 
      class: "line",
- 
      id: "L" + line,
- 
    },
- 
    children: [
- 
      {
- 
        type: "element",
- 
        tagName: "td",
- 
        properties: {
- 
          className: "line-number",
- 
        },
- 
        children: [
- 
          {
- 
            type: "element",
- 
            tagName: "a",
- 
            properties: { href: "#L" + line },
- 
            children: [{ type: "text", value: line.toString() }],
- 
          },
- 
        ],
- 
      },
- 
      {
- 
        type: "element",
- 
        tagName: "td",
- 
        properties: {
- 
          className: "line-content",
- 
        },
- 
        children: [
- 
          {
- 
            type: "element",
- 
            tagName: "pre",
- 
            properties: {
- 
              className: "content",
- 
            },
- 
            children,
- 
          },
- 
        ],
- 
      },
- 
    ],
- 
  };
- 
}