Better rendering off whitespace

Author: AndreasArvidsson

packages/cursorless-org-docs/src/docs/user/languages/components/Code.css

@@ -62,3 +62,7 @@
   cursor: pointer;
   font-size: 0.75rem;
 }
+
+.code-ws-symbol {
+  color: #555;
+}

packages/cursorless-org-docs/src/docs/user/languages/components/Code.tsx

@@ -26,15 +26,21 @@ export function Code({
 
   useEffect(() => {
     if (renderWhitespace) {
-      children = children.replaceAll(" ", "·");
+      children = children.replaceAll(" ", "␣").replaceAll("\t", "⭾");
     }
-
     codeToHtml(children, {
       lang: languageId,
       theme: "nord",
       decorations: getDecorations(highlights),
     })
-      .then(setHtml)
+      .then((html) => {
+        if (renderWhitespace) {
+          html = html
+            .replace(/␣/g, '<span class="code-ws-symbol">·</span>')
+            .replace(/⭾/g, '<span class="code-ws-symbol"> →  </span>');
+        }
+        setHtml(html);
+      })
       .catch(console.error);
   }, [languageId, renderWhitespace, highlights, children]);