graham

I made another Cohost tool! This one does syntax highlighting:

index.ts
function getStyleDiff(
  baseline: Set<CSSStyleRule>,
  element: HTMLElement
): string {
  const decls: string[] = [];
  for (const rule of getMatchedCSSRules(element)) {
    if (baseline.has(rule)) continue;
    for (let i = 0; i < rule.style.length; i++) {
      const name = rule.style[i];
      const value = rule.style.getPropertyValue(name);
      decls.push(`${name}: ${value}`);
    }
  }
  return decls.join(";");
}

It supports multiple themes and drop shadows:

body {
  background-color: #fafafa;
  color: #000000de;
  display: flex;
  justify-content: center;
  gap: 16px;
}

For kicks, I also decided to add a CRT mode (which works best with dark themes):

function glowify(): void {
  for (const span of Array.from(
    outputPre.querySelectorAll("span")
  )) {
    const style = window.getComputedStyle(span);
    const color = new Color(style.color);
    color.lch.l *= 1.2;
    const hex = color.toString({ format: "hex" });
    span.style.textShadow = `0 0 2px ${hex})`;
  }
}

Please enjoy, and remember to check out my bio for a list of all my utilities!