Syntax Highlighting with Shiki

Syntax Highlighting with Shiki

The CodeHighlight component provides beautiful syntax highlighting powered by Shiki, supporting multiple programming languages, themes (light/dark/auto), line numbers, line highlighting, copy-to-clipboard, and various display options.

Key Features

• Multiple Languages: Support for TypeScript, JavaScript, Python, Rust, Go, JSON, YAML, Markdown, and more
• Theme Support: Light, dark, and auto (system preference) themes
• Line Numbers: Optional line numbering with customizable starting line
• Line Highlighting: Highlight specific lines or ranges
• Copy-to-Clipboard: Built-in copy functionality with visual feedback
• Responsive Design: Mobile-friendly with proper overflow handling
• Accessibility: Full keyboard navigation and screen reader support
• Word Wrap: Optional word wrapping for long lines

Basic Usage

TypeScript Example

Loading syntax highlighting...

JavaScript Example

Loading syntax highlighting...

Python Example

Loading syntax highlighting...

Rust Example

Loading syntax highlighting...

Go Example

Loading syntax highlighting...

Configuration Examples

JSON Configuration

Loading syntax highlighting...

YAML Configuration

Loading syntax highlighting...

Advanced Features

Line Highlighting

Highlight specific lines or ranges using the highlightLines prop:

Loading syntax highlighting...

Custom Starting Line Number

Start line numbers from any value:

Loading syntax highlighting...

Word Wrap for Long Lines

Enable word wrapping for better readability on narrow screens:

Loading syntax highlighting...

Shell Script Example

Loading syntax highlighting...

SQL Example

Loading syntax highlighting...

Markdown Example

Loading syntax highlighting...

Usage in Documentation

The CodeHighlight component can be used anywhere in the documentation:

In MDX Files

import CodeHighlight from '../../../components/interactive/CodeHighlight.astro'

<CodeHighlight
  code={'your code here'}
  language="typescript"
  showLineNumbers
/>

Component Props

Prop	Type	Default	Description
code	string	-	Code content to highlight (required)
language	BundledLanguage	'typescript'	Programming language
theme	'light' | 'dark' | 'auto'	'auto'	Syntax highlighting theme
showLineNumbers	boolean	false	Display line numbers
highlightLines	string	-	Lines to highlight (e.g., “1,3-5,7”)
startLineNumber	number	1	Starting line number
title	string	-	Optional title/filename
showCopyButton	boolean	true	Show copy-to-clipboard button
copyButtonPosition	'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'	'top-right'	Copy button position
maxHeight	string | number	-	Maximum height for scrolling
wordWrap	boolean	false	Enable word wrapping

Supported Languages

The component supports all Shiki bundled languages, including:

Common Languages:

• JavaScript, TypeScript, JSX, TSX
• Python, Java, C, C++, C#, Go, Rust
• HTML, CSS, SCSS, Less
• JSON, YAML, TOML, XML
• Markdown, MDX

Shell & Scripting:

• Bash, Shell, PowerShell
• Lua, Perl, Ruby, PHP

Data & Query:

• SQL, GraphQL
• Dockerfile, Makefile

And many more!

When to Use CodeHighlight vs Monaco Editor

Use CodeHighlight When:

• Displaying static code examples in documentation
• Showing syntax-highlighted snippets without editing
• Needing multiple language support in a single page
• Prioritizing performance and bundle size
• Building component showcases with code examples

Use Monaco Editor When:

• Building interactive code playgrounds
• Providing live code editing capabilities
• Needing IntelliSense and type checking
• Creating tutorial environments with editable code
• Building online IDE features

Technical Implementation

The CodeHighlight component uses:

• Shiki: Fast, beautiful syntax highlighter powered by the same engine as VS Code
• Client-side Rendering: Lazy loading with client:load for optimal performance
• Theme Detection: Automatic system theme detection in ‘auto’ mode
• React Integration: Full React component with hooks for state management
• Astro Wrapper: Seamless integration with Astro’s component system

Accessibility Features

• ✅ Keyboard Navigation: Full keyboard support for scrolling and interaction
• ✅ Screen Reader Support: Proper ARIA labels and semantic HTML
• ✅ Color Contrast: High contrast themes for better readability
• ✅ Focus Indicators: Visible focus states for all interactive elements
• ✅ Responsive Design: Works on mobile, tablet, and desktop

Related Documentation

• Live Code Editor - Interactive Monaco Editor
• Copy Demo - Copy-to-clipboard functionality
• Theme Toggle - Theme switching
• Component Architecture - Component design patterns