Function highlightSyntax

7.GraphQL Apocalypse/client/src/components/code-editor.tsx:34–43

(code: string)

  };

  const highlightSyntax = (code: string) => {
    const escaped = escapeHtml(code);
    return escaped
      .replace(/\b(query|mutation|subscription|fragment|type|input|interface|enum|scalar|union|schema|extend|implements)\b/g, '<span class="text-primary">$1</span>')
      .replace(/\b(String|Int|Float|Boolean|ID|true|false|null)\b/g, '<span class="text-secondary">$1</span>')
      .replace(/&quot;([^&quot;]*)&quot;/g, '<span class="text-chart-1">&quot;$1&quot;</span>')
      .replace(/#.*/g, '<span class="text-muted-foreground">$&</span>')
      .replace(/\{|\}/g, '<span class="text-accent-foreground">$&</span>')
      .replace(/\(|\)/g, '<span class="text-chart-2">$&</span>');
  };

  return (
    <div className={`relative ${className}`}>