Code Highlighting

Learn how to use the code highlighting feature in your application

Code Highlighting

Learn how to use the code highlighting feature in your application.

Basic Usage

import { CodeHighlight } from '@your-package-name'
 
function App() {
  return (
    <CodeHighlight
      code={code}
      language="javascript"
      theme="vs-dark"
    />
  )
}

Features

Syntax highlighting
Multiple themes
Custom language support
Line highlighting
Word highlighting

Configuration Options

const config = {
  language: 'javascript',
  theme: 'vs-dark',
  highlightLines: [1, 2, 3],
  highlightWords: ['function', 'const', 'let'],
  showLineNumbers: true,
  fontSize: 14
}

Supported Languages

JavaScript/TypeScript
function hello() { console.log('Hello, World!') }
Python
def hello(): print("Hello, World!")
HTML
<div class="container"> <h1>Hello, World!</h1> </div>

Advanced Features

Custom Language Support

import { registerLanguage } from '@your-package-name'
 
registerLanguage('custom', {
  name: 'Custom Language',
  keywords: ['if', 'else', 'for'],
  operators: ['+', '-', '*', '/'],
  symbols: /[=><!~?:&|+\-*\/\^]+/,
  tokenizer: {
    root: [
      // Custom tokenizer rules
    ]
  }
})

Custom Themes

const customTheme = {
  name: 'my-theme',
  colors: {
    background: '#1E1E1E',
    foreground: '#D4D4D4',
    keyword: '#569CD6',
    string: '#CE9178',
    comment: '#6A9955'
  }
}

Pipe

Learn how to use the pipe feature to transform and process data in your application

Breadcrumbs

Learn how to use the breadcrumbs navigation feature in your application