Line Numbers

Learn how to use the line numbers feature in your code editor

Line Numbers

Learn how to use the line numbers feature in your code editor.

Basic Usage

import { CodeEditor } from '@your-package-name'
 
function App() {
  return (
    <CodeEditor
      code={code}
      showLineNumbers={true}
      startLineNumber={1}
    />
  )
}

Features

Customizable line numbers
Relative line numbers
Line number styling
Line number click handling
Line number ranges

Configuration Options

const config = {
  showLineNumbers: true,
  startLineNumber: 1,
  relativeLineNumbers: false,
  style: {
    color: '#666',
    fontSize: '14px',
    fontFamily: 'monospace',
    padding: '0 10px'
  }
}

Usage Examples

Basic Line Numbers
<CodeEditor code={code} showLineNumbers={true} />
Relative Line Numbers
<CodeEditor code={code} showLineNumbers={true} relativeLineNumbers={true} />
Custom Start Number
<CodeEditor code={code} showLineNumbers={true} startLineNumber={100} />

Advanced Features

Line Number Click Handling

<CodeEditor
  code={code}
  showLineNumbers={true}
  onLineNumberClick={(lineNumber) => {
    console.log(`Clicked line ${lineNumber}`)
    // Custom handling logic
  }}
/>

Custom Line Number Styling

const lineNumberStyles = {
  container: {
    borderRight: '1px solid #ddd',
    padding: '0 10px',
    userSelect: 'none'
  },
  number: {
    color: '#666',
    fontSize: '14px',
    fontFamily: 'monospace',
    textAlign: 'right'
  },
  currentLine: {
    color: '#007AFF',
    fontWeight: 'bold'
  }
}

Line Number Ranges

<CodeEditor
  code={code}
  showLineNumbers={true}
  lineNumberRanges={[
    { start: 1, end: 5, style: { color: 'red' } },
    { start: 10, end: 15, style: { color: 'blue' } }
  ]}
/>

Breadcrumbs

Learn how to use the breadcrumbs navigation feature in your application

Range Selection

Learn how to use the range selection feature in your code editor