\n ${lineNumber}\n ${highlightLine(line, language)}\n ${'●'.repeat(Math.min(complexity, 5))}\n

`;\n }).join('\\n');\n \n return `\n \n \n

\n ${highlightedLines}\n

\n `;\n}\n\nfunction calculateLineComplexity(line: string): number {\n let complexity = 0;\n \n // Count various complexity indicators\n complexity += (line.match(/\\b(if|else|for|while|switch|case|try|catch)\\b/g) || []).length * 2;\n complexity += (line.match(/\\b(function|class|interface)\\b/g) || []).length * 3;\n complexity += (line.match(/[{}]/g) || []).length;\n complexity += (line.match(/[()]/g) || []).length * 0.5;\n complexity += (line.match(/[[\\]]/g) || []).length * 0.5;\n complexity += (line.match(/[&|!<>=]/g) || []).length * 0.5;\n complexity += Math.max(0, line.length - 80) * 0.1; // Long lines add complexity\n \n return Math.round(complexity);\n}\n\nfunction getComplexityClass(complexity: number): string {\n if (complexity <= 2) return 'complexity-low';\n if (complexity <= 5) return 'complexity-medium';\n return 'complexity-high';\n}\n\nfunction highlightLine(line: string, language: string): string {\n let highlighted = escapeHtml(line);\n \n // Basic syntax highlighting patterns\n const patterns = [\n // Keywords\n { pattern: /\\b(function|class|interface|const|let|var|if|else|for|while|return|import|export|from|as|type|enum|namespace)\\b/g, className: 'keyword' },\n \n // Strings\n { pattern: /([\"'`])((?:\\\\.|(?!\\1)[^\\\\])*?)\\1/g, className: 'string' },\n \n // Comments\n { pattern: /\\/\\/.*$/g, className: 'comment' },\n { pattern: /\\/\\*[\\s\\S]*?\\*\\//g, className: 'comment' },\n \n // Numbers\n { pattern: /\\b\\d+(\\.\\d+)?\\b/g, className: 'number' },\n \n // Function names\n { pattern: /\\b([a-zA-Z_$][a-zA-Z0-9_$]*)\\s*\\(/g, className: 'function', group: 1 },\n \n // Operators\n { pattern: /[+\\-*/%=<>!&|^~?:]/g, className: 'operator' },\n \n // Punctuation\n { pattern: /[{}[\\]();,]/g, className: 'punctuation' },\n ];\n \n patterns.forEach(({ pattern, className, group }) => {\n highlighted = highlighted.replace(pattern, (match, ...groups) => {\n const content = group ? groups[group - 1] : match;\n const before = group ? match.substring(0, match.indexOf(content)) : '';\n const after = group ? match.substring(match.indexOf(content) + content.length) : '';\n return `${before}${content}${after}`;\n });\n });\n \n return highlighted;\n}\n\nfunction escapeHtml(text: string): string {\n return text\n .replace(/&/g, '&')\n .replace(//g, '>')\n .replace(/\"/g, '"')\n .replace(/'/g, ''');\n}",[],[104,190],{"_108":198,"_100":199,"_151":200,"_153":152,"_154":139,"_155":201,"_157":158,"_110":202,"_105":183,"_160":184,"_162":203,"_163":27,"_164":-5,"_165":204,"_103":205},"e4637e9a-4f7b-11f0-a2ef-f69ea79377d9","enhanced-detector.ts","def54970-4f7b-11f0-9838-f69ea79377d9",8,["D",1750605397969],"/**\n * Enhanced Block Detector\n * \n * This is an example custom block detector that uses more sophisticated\n * parsing to identify code blocks with better accuracy.\n * \n * Usage: Add ?blockDetector=https://your-val-url.web.val.run/examples/enhanced-detector.ts\n */\n\nexport default async function(req: Request) {\n if (req.method !== 'POST') {\n return new Response('Method not allowed', { status: 405 });\n }\n \n try {\n const { code, line, column } = await req.json();\n \n const blockInfo = detectEnhancedBlock(code, line, column);\n \n return new Response(JSON.stringify(blockInfo), {\n headers: { 'Content-Type': 'application/json' }\n });\n \n } catch (error) {\n console.error('Enhanced Detector error:', error);\n return new Response(JSON.stringify({ \n error: `Error detecting block: ${error.message}` \n }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n}\n\nfunction detectEnhancedBlock(code: string, line: number, column: number): {start: number, end: number, type: string} {\n const lines = code.split('\\n');\n \n // More sophisticated block detection\n const currentLine = lines[line - 1] || '';\n const trimmedLine = currentLine.trim();\n \n // Detect different types of blocks with better accuracy\n if (isInFunction(lines, line)) {\n return findFunctionBlock(lines, line);\n } else if (isInClass(lines, line)) {\n return findClassBlock(lines, line);\n } else if (isInInterface(lines, line)) {\n return findInterfaceBlock(lines, line);\n } else if (isInObject(lines, line)) {\n return findObjectBlock(lines, line);\n } else if (isInArray(lines, line)) {\n return findArrayBlock(lines, line);\n } else if (isInControlStructure(lines, line)) {\n return findControlBlock(lines, line);\n } else if (isInImportBlock(lines, line)) {\n return findImportBlock(lines, line);\n } else if (isInComment(lines, line)) {\n return findCommentBlock(lines, line);\n } else {\n return findStatementBlock(lines, line);\n }\n}\n\nfunction isInFunction(lines: string[], line: number): boolean {\n const currentLine = lines[line - 1] || '';\n return /\\b(function|=>|\\bconst\\s+\\w+\\s*=\\s*\\(|\\blet\\s+\\w+\\s*=\\s*\\(|\\bvar\\s+\\w+\\s*=\\s*\\()/.test(currentLine) ||\n findEnclosingBlock(lines, line, /\\b(function|=>)/, /{/, /}/) !== null;\n}\n\nfunction isInClass(lines: string[], line: number): boolean {\n return /\\bclass\\b/.test(lines[line - 1] || '') ||\n findEnclosingBlock(lines, line, /\\bclass\\b/, /{/, /}/) !== null;\n}\n\nfunction isInInterface(lines: string[], line: number): boolean {\n return /\\binterface\\b/.test(lines[line - 1] || '') ||\n findEnclosingBlock(lines, line, /\\binterface\\b/, /{/, /}/) !== null;\n}\n\nfunction isInObject(lines: string[], line: number): boolean {\n return findEnclosingBlock(lines, line, /{/, /{/, /}/) !== null;\n}\n\nfunction isInArray(lines: string[], line: number): boolean {\n return findEnclosingBlock(lines, line, /\\[/, /\\[/, /\\]/) !== null;\n}\n\nfunction isInControlStructure(lines: string[], line: number): boolean {\n return /\\b(if|for|while|switch|try|catch|finally)\\b/.test(lines[line - 1] || '') ||\n findEnclosingBlock(lines, line, /\\b(if|for|while|switch|try|catch|finally)\\b/, /{/, /}/) !== null;\n}\n\nfunction isInImportBlock(lines: string[], line: number): boolean {\n return /\\b(import|export)\\b/.test(lines[line - 1] || '');\n}\n\nfunction isInComment(lines: string[], line: number): boolean {\n const currentLine = lines[line - 1] || '';\n return /^\\s*(\\/\\/|\\/\\*|\\*)/.test(currentLine);\n}\n\nfunction findEnclosingBlock(lines: string[], line: number, startPattern: RegExp, openBrace: RegExp, closeBrace: RegExp): {start: number, end: number} | null {\n let start = line;\n let end = line;\n \n // Find the start of the block\n while (start > 0) {\n if (startPattern.test(lines[start - 1])) {\n break;\n }\n start--;\n }\n \n // Find the end by counting braces\n let braceCount = 0;\n let foundStart = false;\n \n for (let i = start - 1; i < lines.length; i++) {\n const lineText = lines[i];\n \n if (!foundStart && startPattern.test(lineText)) {\n foundStart = true;\n }\n \n if (foundStart) {\n braceCount += (lineText.match(openBrace) || []).length;\n braceCount -= (lineText.match(closeBrace) || []).length;\n \n if (braceCount === 0 && i >= start - 1) {\n end = i + 1;\n return { start, end };\n }\n }\n }\n \n return null;\n}\n\nfunction findFunctionBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n const block = findEnclosingBlock(lines, startLine, /\\b(function|=>|\\bconst\\s+\\w+\\s*=|\\blet\\s+\\w+\\s*=|\\bvar\\s+\\w+\\s*=)/, /{/, /}/);\n return block ? { ...block, type: 'function' } : { start: startLine, end: startLine, type: 'function' };\n}\n\nfunction findClassBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n const block = findEnclosingBlock(lines, startLine, /\\bclass\\b/, /{/, /}/);\n return block ? { ...block, type: 'class' } : { start: startLine, end: startLine, type: 'class' };\n}\n\nfunction findInterfaceBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n const block = findEnclosingBlock(lines, startLine, /\\binterface\\b/, /{/, /}/);\n return block ? { ...block, type: 'interface' } : { start: startLine, end: startLine, type: 'interface' };\n}\n\nfunction findObjectBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n const block = findEnclosingBlock(lines, startLine, /{/, /{/, /}/);\n return block ? { ...block, type: 'object' } : { start: startLine, end: startLine, type: 'object' };\n}\n\nfunction findArrayBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n const block = findEnclosingBlock(lines, startLine, /\\[/, /\\[/, /\\]/);\n return block ? { ...block, type: 'array' } : { start: startLine, end: startLine, type: 'array' };\n}\n\nfunction findControlBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n const block = findEnclosingBlock(lines, startLine, /\\b(if|for|while|switch|try|catch|finally)\\b/, /{/, /}/);\n return block ? { ...block, type: 'control' } : { start: startLine, end: startLine, type: 'control' };\n}\n\nfunction findImportBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n let start = startLine;\n let end = startLine;\n \n // Find consecutive import/export lines\n while (start > 1 && /\\b(import|export)\\b/.test(lines[start - 2])) {\n start--;\n }\n \n while (end < lines.length && /\\b(import|export)\\b/.test(lines[end])) {\n end++;\n }\n \n return { start, end, type: 'import' };\n}\n\nfunction findCommentBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n let start = startLine;\n let end = startLine;\n \n const currentLine = lines[startLine - 1] || '';\n \n if (currentLine.includes('/*')) {\n // Multi-line comment\n while (start > 1 && !lines[start - 2].includes('/*')) {\n start--;\n }\n while (end < lines.length && !lines[end - 1].includes('*/')) {\n end++;\n }\n } else {\n // Single-line comments\n while (start > 1 && /^\\s*\\/\\//.test(lines[start - 2])) {\n start--;\n }\n while (end < lines.length && /^\\s*\\/\\//.test(lines[end])) {\n end++;\n }\n }\n \n return { start, end, type: 'comment' };\n}\n\nfunction findStatementBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n return { start: startLine, end: startLine, type: 'statement' };\n}",[],[104,199],[104],{"_108":208,"_100":169,"_151":209,"_153":-5,"_154":139,"_155":210,"_157":158,"_110":211,"_105":212,"_160":173,"_162":213,"_163":27,"_164":-5,"_165":214,"_103":215},"3397a200-4f83-11f0-8817-f69ea79377d9","a2a4bc08-4f7b-11f0-bd99-f69ea79377d9",15,["D",1750608537328],2,"# Source Code Annotator\n\nA Val Town val for viewing annotated source code with interactive features including syntax highlighting, hover effects, and explanatory popups.\n\n## Features\n\n- **Syntax Highlighting**: Automatic syntax highlighting using Prism.js for multiple languages\n- **Interactive Hover**: Hover over code blocks to highlight the smallest logical containing block\n- **Click Explanations**: Click on highlighted blocks to see detailed explanations in a popup\n- **Extensible**: Override default functions with custom implementations via query parameters\n\n## Usage\n\n### Getting Started\n\nVisit the val URL without any path to see usage instructions and examples:\n\n```\nhttps://your-val-url.web.val.run/\n```\n\nThis will display an interactive usage page with:\n- Feature overview and quick start guide\n- Live example links you can click to try\n- Documentation links to the README and examples\n- Supported languages and customization options\n\n### Basic Usage\n\nVisit your val URL with the path to the source code you want to annotate:\n\n```\nhttps://your-val-url.web.val.run/{username}/{valname}@{version}/{filename}\n```\n\n**Example:**\n```\nhttps://your-val-url.web.val.run/nbbaier/sqliteExplorerApp@100-main/main.tsx\n```\n\nThis will fetch the source from `https://esm.town/v/nbbaier/sqliteExplorerApp@100-main/main.tsx` and display it with annotations.\n\n### Custom Functions\n\nYou can override the default functionality by providing custom val URLs as query parameters:\n\n#### Syntax Highlighter\n```\n?syntaxHighlighter=https://your-custom-highlighter.web.val.run\n```\n\nYour custom syntax highlighter should accept POST requests with:\n```json\n{\n \"code\": \"source code string\",\n \"language\": \"javascript|typescript|python|etc\"\n}\n```\n\nAnd return HTML with syntax-highlighted code.\n\n#### Block Detector\n```\n?blockDetector=https://your-custom-detector.web.val.run\n```\n\nYour custom block detector should accept POST requests with:\n```json\n{\n \"code\": \"source code string\",\n \"line\": 10,\n \"column\": 5\n}\n```\n\nAnd return JSON with:\n```json\n{\n \"start\": 8,\n \"end\": 15,\n \"type\": \"function|class|control|statement\"\n}\n```\n\n#### Block Explainer\n```\n?blockExplainer=https://your-custom-explainer.web.val.run\n```\n\nYour custom block explainer should accept POST requests with:\n```json\n{\n \"code\": \"source code string\",\n \"blockInfo\": {\n \"start\": 8,\n \"end\": 15,\n \"type\": \"function\"\n }\n}\n```\n\nAnd return plain text or HTML explanation.\n\n### Combined Example\n```\nhttps://your-val-url.web.val.run/nbbaier/sqliteExplorerApp@100-main/main.tsx?blockExplainer=https://my-ai-explainer.web.val.run&syntaxHighlighter=https://my-custom-highlighter.web.val.run\n```\n\n## Supported Languages\n\nThe val automatically detects language from file extensions:\n\n- `.ts`, `.tsx` → TypeScript\n- `.js`, `.jsx` → JavaScript \n- `.py` → Python\n- `.rs` → Rust\n- `.go` → Go\n- `.java` → Java\n- `.cpp`, `.cc`, `.cxx` → C++\n- `.c` → C\n- `.css` → CSS\n- `.html` → HTML\n- `.json` → JSON\n- `.md` → Markdown\n\n## Default Block Detection\n\nThe default block detector uses simple heuristics to identify:\n\n1. **Function blocks**: Lines containing `function` or `=>`\n2. **Class blocks**: Lines containing `class`\n3. **Control blocks**: Lines containing `if`, `for`, or `while`\n4. **Statement blocks**: Individual statements (fallback)\n\n## How It Works\n\n1. **URL Parsing**: Extracts the val path from the URL\n2. **Source Fetching**: Fetches source code from `https://esm.town/v/{path}`\n3. **Language Detection**: Determines language from file extension\n4. **Syntax Highlighting**: Applies syntax highlighting using Prism.js\n5. **Interactive Layer**: Adds mouse event handlers for hover and click interactions\n6. **Block Detection**: Calculates logical code blocks based on cursor position\n7. **Explanations**: Generates explanations for clicked blocks\n\n## Architecture\n\nThe val is structured with three main pluggable functions:\n\n- `defaultSyntaxHighlighter()`: Handles code syntax highlighting\n- `defaultBlockDetector()`: Identifies logical code blocks\n- `defaultBlockExplainer()`: Generates explanations for code blocks\n\nEach function can be replaced with custom implementations via query parameters, making the system highly extensible.\n\n## Error Handling\n\n- Returns 404 if the source URL cannot be fetched\n- Returns 400 for invalid path formats\n- Returns 500 for other errors with error messages\n- Client-side errors are logged to console\n\n## Example Custom Functions\n\nThe project includes several example custom functions to demonstrate extensibility:\n\n### AI-Powered Explainer (`/examples/ai-explainer.ts`)\nUses OpenAI to generate detailed explanations of code blocks. Requires `OPENAI_API_KEY` environment variable.\n\n**Usage:**\n```\n?blockExplainer=https://your-val-url.web.val.run/examples/ai-explainer.ts\n```\n\n### Enhanced Block Detector (`/examples/enhanced-detector.ts`)\nProvides more sophisticated block detection with support for:\n- Functions, classes, interfaces\n- Objects and arrays\n- Control structures\n- Import/export blocks\n- Comments (single and multi-line)\n\n**Usage:**\n```\n?blockDetector=https://your-val-url.web.val.run/examples/enhanced-detector.ts\n```\n\n### Custom Syntax Highlighter (`/examples/custom-highlighter.ts`)\nEnhanced syntax highlighting with:\n- Complexity indicators for each line\n- Visual complexity color coding\n- Hover effects\n- Custom styling\n\n**Usage:**\n```\n?syntaxHighlighter=https://your-val-url.web.val.run/examples/custom-highlighter.ts\n```\n\n### Combined Example\n```\nhttps://your-val-url.web.val.run/nbbaier/sqliteExplorerApp@100-main/main.tsx?blockDetector=https://your-val-url.web.val.run/examples/enhanced-detector.ts&blockExplainer=https://your-val-url.web.val.run/examples/ai-explainer.ts&syntaxHighlighter=https://your-val-url.web.val.run/examples/custom-highlighter.ts\n```\n\n## Browser Compatibility\n\n- Modern browsers with ES6+ support\n- Requires JavaScript enabled for interactive features\n- Responsive design works on desktop and mobile",[],[169],{"_108":217,"_100":218,"_151":219,"_153":-5,"_154":139,"_155":138,"_157":158,"_110":220,"_105":156,"_160":184,"_162":221,"_163":27,"_164":-5,"_165":222,"_103":223},"5955c548-4f84-11f0-ad09-f69ea79377d9","index.ts","857b2e3c-4f7b-11f0-980e-f69ea79377d9",["D",1750609030146],"/**\n * Source Code Annotator Val\n * \n * Displays annotated source code with syntax highlighting, hover effects, and explanatory popups.\n * \n * Usage: /{username}/{valname}@{version}/{filename}\n * Query parameters:\n * - syntaxHighlighter: URL to custom syntax highlighter val\n * - blockDetector: URL to custom block detector val \n * - blockExplainer: URL to custom block explainer val\n */\n\nimport { Hono } from \"https://esm.sh/hono@3.11.7\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Default syntax highlighter\nasync function defaultSyntaxHighlighter(code: string, language: string): Promise {\n // Using Prism.js for syntax highlighting\n return `\n \n \n \n

${escapeHtml(code)}

\n `;\n}\n\n// Default block detector - finds the smallest logical block containing the cursor\nasync function defaultBlockDetector(code: string, line: number, column: number): Promise<{start: number, end: number, type: string}> {\n // Simple implementation - finds function, class, or statement blocks\n const lines = code.split('\\n');\n \n // Find the current line content\n const currentLine = lines[line - 1] || '';\n \n // Simple heuristics for block detection\n if (currentLine.includes('function') || currentLine.includes('=>')) {\n return findFunctionBlock(lines, line);\n } else if (currentLine.includes('class')) {\n return findClassBlock(lines, line);\n } else if (currentLine.includes('if') || currentLine.includes('for') || currentLine.includes('while')) {\n return findControlBlock(lines, line);\n } else {\n return findStatementBlock(lines, line);\n }\n}\n\n// Default block explainer\nasync function defaultBlockExplainer(code: string, blockInfo: {start: number, end: number, type: string}): Promise {\n const lines = code.split('\\n');\n const blockCode = lines.slice(blockInfo.start - 1, blockInfo.end).join('\\n');\n \n switch (blockInfo.type) {\n case 'function':\n return `This is a function block. Functions are reusable pieces of code that perform specific tasks. This function contains ${blockInfo.end - blockInfo.start + 1} lines of code.`;\n case 'class':\n return `This is a class definition. Classes are blueprints for creating objects with shared properties and methods.`;\n case 'control':\n return `This is a control flow statement (if/for/while). It controls the execution flow of the program based on conditions or loops.`;\n case 'statement':\n return `This is a code statement. Statements are individual instructions that perform actions in the program.`;\n default:\n return `This is a code block containing ${blockInfo.end - blockInfo.start + 1} lines. It represents a logical unit of code.`;\n }\n}\n\n// Helper functions for block detection\nfunction findFunctionBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n let braceCount = 0;\n let start = startLine;\n let end = startLine;\n \n // Find function start\n while (start > 0 && !lines[start - 1].includes('function') && !lines[start - 1].includes('=>')) {\n start--;\n }\n \n // Find function end by counting braces\n for (let i = start - 1; i < lines.length; i++) {\n const line = lines[i];\n braceCount += (line.match(/{/g) || []).length;\n braceCount -= (line.match(/}/g) || []).length;\n \n if (braceCount === 0 && i >= start - 1) {\n end = i + 1;\n break;\n }\n }\n \n return { start, end, type: 'function' };\n}\n\nfunction findClassBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n let braceCount = 0;\n let start = startLine;\n let end = startLine;\n \n // Find class start\n while (start > 0 && !lines[start - 1].includes('class')) {\n start--;\n }\n \n // Find class end by counting braces\n for (let i = start - 1; i < lines.length; i++) {\n const line = lines[i];\n braceCount += (line.match(/{/g) || []).length;\n braceCount -= (line.match(/}/g) || []).length;\n \n if (braceCount === 0 && i >= start - 1) {\n end = i + 1;\n break;\n }\n }\n \n return { start, end, type: 'class' };\n}\n\nfunction findControlBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n let braceCount = 0;\n let start = startLine;\n let end = startLine;\n \n // Find control block end\n for (let i = start - 1; i < lines.length; i++) {\n const line = lines[i];\n braceCount += (line.match(/{/g) || []).length;\n braceCount -= (line.match(/}/g) || []).length;\n \n if (braceCount === 0 && i >= start - 1) {\n end = i + 1;\n break;\n }\n }\n \n return { start, end, type: 'control' };\n}\n\nfunction findStatementBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {\n return { start: startLine, end: startLine, type: 'statement' };\n}\n\nfunction escapeHtml(text: string): string {\n return text\n .replace(/&/g, '&')\n .replace(//g, '>')\n .replace(/\"/g, '"')\n .replace(/'/g, ''');\n}\n\nfunction generateUsagePage(): string {\n return `\n\n\n\n \n \n Source Code Annotator - Usage Instructions\n \n \n\n\n

🔍 Source Code Annotator

Interactive source code viewer with syntax highlighting, hover effects, and explanatory popups

\n\n

✨ Features

🎨 Syntax Highlighting

Automatic syntax highlighting using Prism.js for multiple languages

🖱️ Interactive Hover

Hover over code blocks to highlight logical containing blocks

💡 Click Explanations

Click on highlighted blocks to see detailed explanations

🔧 Extensible

Override default functions with custom implementations

\n\n

🚀 Quick Start

To view annotated source code, use this URL format:

\nhttps://your-val-url.web.val.run/{username}/{valname}@{version}/{filename}\n

\n \n

Try These Examples:

\n 📦 Val Town Blob Storage\n - Simple utility functions\n

\n 🗄️ SQLite Explorer App\n - React TypeScript application\n

\n 🤖 OpenAI Integration\n - AI API wrapper\n

\n\n

🎛️ Custom Functions

Enhance the annotator with custom implementations:

\n \n

Available Examples:

\n 🤖 AI Explainer\n - Uses OpenAI for detailed code explanations\n

\n 🔍 Enhanced Detector\n - Sophisticated block detection with more code constructs\n

\n 🎨 Custom Highlighter\n - Enhanced highlighting with complexity indicators\n

\n\n

Usage with Custom Functions:

\n# With AI explanations\n/std/blob?blockExplainer=https://your-val-url.web.val.run/examples/ai-explainer.ts\n\n# With enhanced detection\n/std/blob?blockDetector=https://your-val-url.web.val.run/examples/enhanced-detector.ts\n\n# With custom highlighting\n/std/blob?syntaxHighlighter=https://your-val-url.web.val.run/examples/custom-highlighter.ts\n\n# All together\n/std/blob?syntaxHighlighter=...&blockDetector=...&blockExplainer=...\n

\n\n

📚 Documentation

\n 📖 Full Documentation\n

Complete usage guide, API reference, and customization options

\n 🔧 Custom Functions Guide\n

Learn how to create and use custom highlighters, detectors, and explainers

\n\n

🌐 Supported Languages

TypeScript (.ts, .tsx)

JavaScript (.js, .jsx)

Python (.py)

Rust (.rs)

Go (.go)

Java (.java)

C++ (.cpp, .cc, .cxx)

C (.c)

CSS (.css)

HTML (.html)

JSON (.json)

Markdown (.md)

\n\n \n

\n\n\n `;\n}\n\n// Main route handler\napp.get(\"/*\", async (c) => {\n const path = c.req.path;\n \n // If no source is specified, show usage instructions\n if (path === \"/\" || path === \"\") {\n return c.html(generateUsagePage());\n }\n \n // Extract val path from URL\n const pathMatch = path.match(/^\\/(.+)$/);\n if (!pathMatch) {\n return c.text(\"Invalid path format\", 400);\n }\n \n const valPath = pathMatch[1];\n const sourceUrl = `https://esm.town/v/${valPath}`;\n \n try {\n // Fetch the source code\n const response = await fetch(sourceUrl);\n if (!response.ok) {\n return c.text(`Failed to fetch source: ${response.status}`, 404);\n }\n \n const sourceCode = await response.text();\n \n // Determine language from file extension\n const language = getLanguageFromPath(valPath);\n \n // Get custom function URLs from query parameters\n const syntaxHighlighterUrl = c.req.query('syntaxHighlighter');\n const blockDetectorUrl = c.req.query('blockDetector');\n const blockExplainerUrl = c.req.query('blockExplainer');\n \n // Generate the HTML page\n const html = await generateAnnotatedPage(\n sourceCode, \n language, \n valPath,\n syntaxHighlighterUrl,\n blockDetectorUrl,\n blockExplainerUrl\n );\n \n return c.html(html);\n \n } catch (error) {\n return c.text(`Error: ${error.message}`, 500);\n }\n});\n\nfunction getLanguageFromPath(path: string): string {\n const ext = path.split('.').pop()?.toLowerCase();\n switch (ext) {\n case 'ts': case 'tsx': return 'typescript';\n case 'js': case 'jsx': return 'javascript';\n case 'py': return 'python';\n case 'rs': return 'rust';\n case 'go': return 'go';\n case 'java': return 'java';\n case 'cpp': case 'cc': case 'cxx': return 'cpp';\n case 'c': return 'c';\n case 'css': return 'css';\n case 'html': return 'html';\n case 'json': return 'json';\n case 'md': return 'markdown';\n default: return 'javascript';\n }\n}\n\nasync function generateAnnotatedPage(\n sourceCode: string, \n language: string, \n valPath: string,\n syntaxHighlighterUrl?: string,\n blockDetectorUrl?: string,\n blockExplainerUrl?: string\n): Promise {\n \n const syntaxHighlightedCode = await defaultSyntaxHighlighter(sourceCode, language);\n \n return `\n\n\n \n \n Source Annotator - ${valPath}\n \n \n ${generateStyles()}\n\n\n

Source Code Annotator

Viewing: ${valPath}

Hover over code blocks to highlight them, click to see explanations

\n \n

\n ${syntaxHighlightedCode}\n

\n \n \n

\n\n ${generateJavaScript(sourceCode, syntaxHighlighterUrl, blockDetectorUrl, blockExplainerUrl)}\n\n`;\n}\n\nfunction generateStyles(): string {\n return ``;\n}\n\nfunction generateJavaScript(\n sourceCode: string,\n syntaxHighlighterUrl?: string,\n blockDetectorUrl?: string,\n blockExplainerUrl?: string\n): string {\n return ``;\n}\n\nexport default app.fetch;",[],[218],"files",[149,167,177,188,197,207,216],"counts",{"_228":31,"_229":183,"_230":31,"_231":31},"pulls","branches","forks","envVars","contents",[234,237,240,243],{"_108":168,"_100":169,"_151":170,"_153":152,"_154":139,"_155":171,"_157":158,"_110":235,"_105":31,"_160":173,"_162":174,"_163":27,"_164":-5,"_103":236},["D",1750605503649],[104,169],{"_108":178,"_100":179,"_151":180,"_153":152,"_154":139,"_155":181,"_157":158,"_110":238,"_105":183,"_160":184,"_162":185,"_163":27,"_164":-5,"_103":239},["D",1750605327519],[104,179],{"_108":189,"_100":190,"_151":191,"_153":152,"_154":139,"_155":192,"_157":158,"_110":241,"_105":183,"_160":184,"_162":194,"_163":27,"_164":-5,"_103":242},["D",1750605446946],[104,190],{"_108":198,"_100":199,"_151":200,"_153":152,"_154":139,"_155":201,"_157":158,"_110":244,"_105":183,"_160":184,"_162":203,"_163":27,"_164":-5,"_103":245},["D",1750605397969],[104,199],{"_108":150,"_100":104,"_151":152,"_153":-5,"_154":139,"_155":156,"_157":158,"_110":247,"_105":31,"_160":161,"_162":-5,"_163":27,"_164":-5,"_103":248},["D",1750605322667],[104],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_98":99,"_100":101,"_102":42,"_105":-7,"_103":104,"_106":255,"_147":259,"_224":281,"_173":282,"_232":284,"_293":-5,"_294":27,"_295":-5,"_296":-5,"_297":-5,"_298":299},{"_108":109,"_100":101,"_110":256,"_112":-5,"_113":27,"_114":115,"_116":-5,"_117":-5,"_12":118,"_119":-5,"_120":27,"_121":-5,"_122":31,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_132":27,"_21":257,"_136":258},["D",1750603430192],{"_98":99,"_134":135},{"_105":138,"_100":42,"_108":139,"_140":109,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":101,"_146":99},[260,275,278],{"_108":150,"_100":104,"_151":152,"_153":-5,"_154":139,"_155":156,"_157":158,"_110":159,"_105":31,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":261,"_103":274},[262,265,268,271],{"_108":168,"_100":169,"_151":170,"_153":152,"_154":139,"_155":171,"_157":158,"_110":172,"_105":31,"_160":173,"_162":174,"_163":27,"_164":-5,"_165":263,"_103":264},[],[104,169],{"_108":178,"_100":179,"_151":180,"_153":152,"_154":139,"_155":181,"_157":158,"_110":182,"_105":183,"_160":184,"_162":185,"_163":27,"_164":-5,"_165":266,"_103":267},[],[104,179],{"_108":189,"_100":190,"_151":191,"_153":152,"_154":139,"_155":192,"_157":158,"_110":193,"_105":183,"_160":184,"_162":194,"_163":27,"_164":-5,"_165":269,"_103":270},[],[104,190],{"_108":198,"_100":199,"_151":200,"_153":152,"_154":139,"_155":201,"_157":158,"_110":202,"_105":183,"_160":184,"_162":203,"_163":27,"_164":-5,"_165":272,"_103":273},[],[104,199],[104],{"_108":208,"_100":169,"_151":209,"_153":-5,"_154":139,"_155":210,"_157":158,"_110":211,"_105":212,"_160":173,"_162":213,"_163":27,"_164":-5,"_165":276,"_103":277},[],[169],{"_108":217,"_100":218,"_151":219,"_153":-5,"_154":139,"_155":138,"_157":158,"_110":220,"_105":156,"_160":184,"_162":221,"_163":27,"_164":-5,"_165":279,"_103":280},[],[218],[260,262,265,268,271,275,278],{"_108":150,"_100":104,"_151":152,"_153":-5,"_154":139,"_155":156,"_157":158,"_110":247,"_105":31,"_160":161,"_162":-5,"_163":27,"_164":-5,"_103":283},[104],[285,287,289,291],{"_108":168,"_100":169,"_151":170,"_153":152,"_154":139,"_155":171,"_157":158,"_110":235,"_105":31,"_160":173,"_162":174,"_163":27,"_164":-5,"_103":286},[104,169],{"_108":178,"_100":179,"_151":180,"_153":152,"_154":139,"_155":181,"_157":158,"_110":238,"_105":183,"_160":184,"_162":185,"_163":27,"_164":-5,"_103":288},[104,179],{"_108":189,"_100":190,"_151":191,"_153":152,"_154":139,"_155":192,"_157":158,"_110":241,"_105":183,"_160":184,"_162":194,"_163":27,"_164":-5,"_103":290},[104,190],{"_108":198,"_100":199,"_151":200,"_153":152,"_154":139,"_155":201,"_157":158,"_110":244,"_105":183,"_160":184,"_162":203,"_163":27,"_164":-5,"_103":292},[104,199],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"routes/_app","actionData","errors"]