Examples

Learn how to use Codeshine through practical examples.

Basic Usage

Simple Highlighting

import { Codeshine } from '@oxog/codeshine'; const codeshine = new Codeshine(); const html = codeshine.highlight(`function greet(name: string) {  return \`Hello, \${name}!\`;}`, { language: 'typescript' }); document.getElementById('code').innerHTML = html;

With Line Numbers

const html = codeshine.highlight(code, {  language: 'javascript',  lineNumbers: true,  startLine: 1});

Highlighting Specific Lines

const html = codeshine.highlight(code, {  language: 'python',  lineNumbers: true,  highlightLines: [1, 3, '5-7'], // Lines 1, 3, and 5-7});

Theme Customization

Using Built-in Themes

import { Codeshine, themes } from '@oxog/codeshine'; const codeshine = new Codeshine({  theme: themes.dracula});

Available Themes

import { themes } from '@oxog/codeshine'; // Dark themesthemes.vsDark        // VS Code Dark+themes.dracula       // Draculathemes.oneDark       // One Dark Prothemes.github        // GitHub Darkthemes.tokyoNight    // Tokyo Nightthemes.nord          // Nord // Light themesthemes.vsLight       // VS Code Light+themes.githubLight   // GitHub Lightthemes.oneLight      // One Light

Diff Highlighting

Show Code Changes

const code = `function add(a, b) {-  return a - b;+  return a + b;}`; const html = codeshine.highlight(code, {  language: 'javascript',  diff: true});

Focus Mode

Emphasize Important Code

const html = codeshine.highlight(code, {  language: 'typescript',  focusLines: [3, 4, 5], // Only these lines are fully visible});

Word Highlighting

Highlight Specific Words

const html = codeshine.highlight(code, {  language: 'javascript',  highlightWords: ['function', 'return'],});

Highlight Ranges

const html = codeshine.highlight(code, {  language: 'javascript',  highlightRanges: [    { line: 1, start: 0, end: 8 }, // "function"    { line: 2, start: 2, end: 8 }, // "return"  ],});

UI Features

Copy Button

const html = codeshine.highlight(code, {  language: 'typescript',  copyButton: true,});

Language Badge

const html = codeshine.highlight(code, {  language: 'rust',  showLanguage: true,});

Filename Header

const html = codeshine.highlight(code, {  language: 'typescript',  filename: 'src/utils/helper.ts',});

Streaming for Large Files

Progressive Rendering

import { createStream } from '@oxog/codeshine'; const stream = createStream({  language: 'javascript',  chunkSize: 100, // lines per chunk  onChunk: (html, progress) => {    container.innerHTML += html;    console.log(`Progress: ${progress}%`);  },  onComplete: (fullHtml) => {    console.log('Done!');  }}); // Feed large file contentstream.write(largeFileContent);stream.end();

React Integration

Basic React Usage

import { CodeBlock } from '@oxog/codeshine/react'; function App() {  return (    <CodeBlock      code={`console.log('Hello, World!');`}      language="javascript"      lineNumbers      theme="dracula"    />  );}

With All Features

import { CodeBlock } from '@oxog/codeshine/react'; function App() {  return (    <CodeBlock      code={code}      language="typescript"      lineNumbers      startLine={10}      highlightLines={[1, 3, '5-7']}      focusLines={[3, 4]}      diff      copyButton      showLanguage      filename="example.ts"      theme="github"      className="my-code-block"    />  );}

Using the Hook

import { useCodeshine } from '@oxog/codeshine/react'; function CustomCodeBlock({ code, language }) {  const { html, tokens } = useCodeshine(code, {    language,    lineNumbers: true  });   return (    <div      className="custom-wrapper"      dangerouslySetInnerHTML={{ __html: html }}    />  );}

Plugin System

Creating a Custom Plugin

import { Codeshine } from '@oxog/codeshine';import type { Plugin, Token } from '@oxog/codeshine'; const lineNumberPlugin: Plugin = {  name: 'custom-line-numbers',  transform(tokens: Token[]): Token[] {    // Transform tokens before rendering    return tokens.map(token => ({      ...token,      content: token.content.toUpperCase()    }));  }}; const codeshine = new Codeshine({  plugins: [lineNumberPlugin]});

Auto Language Detection

Automatic Detection

import { detectLanguage } from '@oxog/codeshine'; const code = `def hello():    print("Hello, World!")`; const language = detectLanguage(code);console.log(language); // 'python'

With Highlighting

const html = codeshine.highlight(code, {  language: 'auto', // Auto-detect  lineNumbers: true});