feat(cdk-explorer): syntax highlighting for all CDK languages

Adds Java, C#, and Go grammars alongside TypeScript, JavaScript, Python, JSON, and YAML, and extracts a shared Language type. detectLanguage maps each source extension.

Author: megha-narayanan

.projenrc.ts

@@ -1736,6 +1736,8 @@ const cdkExplorer = configureProject(
       'supertest@^6',
       '@types/supertest@^6',
       '@types/convert-source-map@^2',
+      'prismjs@^1',
+      '@types/prismjs@^1',
       'yaml@^2',
     ],
     tsconfig: {

packages/@aws-cdk/cdk-explorer/.projen/deps.json

@@ -9,6 +9,7 @@ import { buildSourceAnchorIndex, findConstructAtLine } from '../lib/web/source-n
 import { api, type DirEntry, type TemplateResponse, type TreeResponse, type ViolationsResponse } from './api';
 import { CodeViewer, type Diagnostic } from './components/CodeViewer';
 import { ConstructTree } from './components/ConstructTree';
+import type { Language } from './syntax';
 import { TemplateViewer } from './components/TemplateViewer';
 import { ViolationsPanel } from './components/ViolationsPanel';
 import type { NavigateHandler } from './nav-types';
@@ -520,10 +521,15 @@ const RESIZER_BUTTON_VERTICAL: React.CSSProperties = {
   borderRadius: '7px',
 };
 
-function detectLanguage(file: string | undefined): 'typescript' | 'json' | 'yaml' {
+function detectLanguage(file: string | undefined): Language {
   if (!file) return 'typescript';
   if (file.endsWith('.json')) return 'json';
   if (file.endsWith('.yaml') || file.endsWith('.yml')) return 'yaml';
+  if (file.endsWith('.py')) return 'python';
+  if (file.endsWith('.java')) return 'java';
+  if (file.endsWith('.cs')) return 'csharp';
+  if (file.endsWith('.go')) return 'go';
+  if (file.endsWith('.js') || file.endsWith('.jsx') || file.endsWith('.mjs')) return 'javascript';
   return 'typescript';
 }
 

packages/@aws-cdk/cdk-explorer/frontend/App.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { tokenizeLines, type Token } from '../syntax';
+import { tokenizeLines, type Language, type Token } from '../syntax';
 
 export interface Diagnostic {
   readonly startLine: number;
@@ -11,7 +11,7 @@ export interface Diagnostic {
 
 export interface CodeViewerProps {
   readonly content: string;
-  readonly language: 'typescript' | 'json' | 'yaml';
+  readonly language: Language;
   readonly highlightStart?: number;
   readonly highlightEnd?: number;
   readonly highlightColor?: string;

packages/@aws-cdk/cdk-explorer/frontend/components/CodeViewer.tsx

@@ -1,27 +1,40 @@
 /**
- * PrismJS-based syntax tokenizer. Only imports the three grammars we need
- * (~12KB minified total). Returns structured tokens per line for our custom
- * line renderer (which handles highlighting, scroll, diagnostics).
+ * PrismJS-based syntax tokenizer covering the template formats (JSON, YAML) and
+ * every CDK source language (TypeScript, JavaScript, Python, Java, C#, Go).
+ * Returns structured tokens per line for our custom line renderer (which handles
+ * highlighting, scroll, diagnostics).
  */
 import Prism from 'prismjs/components/prism-core';
 import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-yaml';
 import 'prismjs/components/prism-clike';
 import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-go';
+
+/** Languages the viewer can highlight: template formats plus CDK source languages. */
+export type Language = 'json' | 'yaml' | 'typescript' | 'javascript' | 'python' | 'java' | 'csharp' | 'go';
 
 export interface Token {
   readonly type: string | undefined;
   readonly content: string;
 }
 
-const GRAMMAR_MAP: Record<string, Prism.Grammar> = {
+const GRAMMAR_MAP: Record<Language, Prism.Grammar> = {
   json: Prism.languages.json,
   yaml: Prism.languages.yaml,
   typescript: Prism.languages.typescript,
+  javascript: Prism.languages.javascript,
+  python: Prism.languages.python,
+  java: Prism.languages.java,
+  csharp: Prism.languages.csharp,
+  go: Prism.languages.go,
 };
 
-export function tokenizeLines(code: string, language: 'json' | 'yaml' | 'typescript'): Token[][] {
+export function tokenizeLines(code: string, language: Language): Token[][] {
   const grammar = GRAMMAR_MAP[language];
   if (!grammar) {
     return code.split('\n').map((line) => [{ type: undefined, content: line }]);