84 lines
2.9 KiB
Markdown
84 lines
2.9 KiB
Markdown
# 08. Add Syntax Highlighting Integration
|
|
|
|
meta:
|
|
id: theme-refactoring-08
|
|
feature: theme-refactoring-json-format
|
|
priority: P1
|
|
depends_on: [theme-refactoring-04, theme-refactoring-05]
|
|
tags: [implementation, syntax]
|
|
|
|
objective:
|
|
- Add syntax highlighting support using theme colors
|
|
- Generate syntax rules from theme definitions
|
|
- Support markdown syntax highlighting
|
|
- Integrate with OpenTUI syntax highlighting
|
|
|
|
deliverables:
|
|
- `src/utils/syntax-highlighter.ts` - Syntax highlighting utilities
|
|
- `src/utils/syntax-rules.ts` - Syntax rule generation
|
|
|
|
steps:
|
|
- Step 8.1: Create `src/utils/syntax-rules.ts`
|
|
- Implement `getSyntaxRules(theme: ThemeColors)` function
|
|
- Define syntax scopes and their mappings
|
|
- Map theme colors to syntax scopes:
|
|
- Default text
|
|
- Keywords (return, conditional, repeat, coroutine)
|
|
- Types (function, class, module)
|
|
- Variables (parameter, member, builtin)
|
|
- Strings, numbers, booleans
|
|
- Comments
|
|
- Operators and punctuation
|
|
- Markdown-specific scopes (headings, bold, italic, links)
|
|
- Diff scopes (added, removed, context)
|
|
- Add style properties (foreground, bold, italic, underline)
|
|
|
|
- Step 8.2: Create `src/utils/syntax-highlighter.ts`
|
|
- Implement `generateSyntax(theme: ThemeColors)` function
|
|
- Implement `generateSubtleSyntax(theme: ThemeColors)` function
|
|
- Apply opacity to syntax colors for subtle highlighting
|
|
- Use theme's `thinkingOpacity` property
|
|
|
|
- Step 8.3: Integrate with OpenTUI syntax highlighting
|
|
- Import `SyntaxStyle` from `@opentui/core`
|
|
- Use `SyntaxStyle.fromTheme()` to create syntax styles
|
|
- Apply syntax styles to code components
|
|
|
|
- Step 8.4: Add syntax scope mappings
|
|
- Map common programming language scopes
|
|
- Map markdown and markup scopes
|
|
- Map diff and git scopes
|
|
- Add scope aliases for common patterns
|
|
|
|
tests:
|
|
- Unit:
|
|
- Test `getSyntaxRules` generates correct rules
|
|
- Test `generateSyntax` creates valid syntax styles
|
|
- Test `generateSubtleSyntax` applies opacity correctly
|
|
- Test syntax rules cover all expected scopes
|
|
|
|
- Integration/e2e:
|
|
- Test syntax highlighting with different themes
|
|
- Verify syntax colors match theme definitions
|
|
- Test markdown highlighting
|
|
|
|
acceptance_criteria:
|
|
- `src/utils/syntax-rules.ts` file exists with rule generation
|
|
- `src/utils/syntax-highlighter.ts` file exists with style generation
|
|
- Syntax highlighting works with theme colors
|
|
- Markdown highlighting is supported
|
|
- Syntax rules cover common programming patterns
|
|
|
|
validation:
|
|
- Run: `bun run typecheck` - Should pass
|
|
- Run: `bun test src/utils/syntax-rules.test.ts`
|
|
- Run: `bun test src/utils/syntax-highlighter.test.ts`
|
|
- Test syntax highlighting in application
|
|
- Verify syntax colors are readable
|
|
|
|
notes:
|
|
- Use opencode's syntax rule generation as reference
|
|
- Include comprehensive scope mappings
|
|
- Support common programming languages
|
|
- Reference: `/home/mike/code/PodTui/opencode/packages/opencode/src/cli/cmd/tui/context/theme.tsx` (lines 622-1152)
|