Why Codeshine?

| Feature | Codeshine | Prism | Highlight.js | Shiki | |---------|:---------:|:-----:|:------------:|:-----:| | Zero Dependencies | ✅ | ❌ | ✅ | ❌ | | TypeScript Native | ✅ | ❌ | ❌ | ✅ | | 150+ Languages | ✅ | ✅ | ✅ | ✅ | | React/Vue/Svelte | ✅ | ❌ | ❌ | ✅ | | Line Highlighting | ✅ | Plugin | ❌ | ✅ | | Streaming | ✅ | ❌ | ❌ | ❌ | | Diff View | ✅ | ❌ | ❌ | ✅ | | Auto Detection | ✅ | ✅ | ✅ | ❌ |

Features

• Zero Dependencies - No external dependencies, pure TypeScript
• 150+ Languages - JavaScript, TypeScript, Python, Rust, Go, Haskell, and many more
• 14 Themes - VS Code, Dracula, Nord, One Dark, GitHub, Tokyo Night, and more
• Framework Support - React, Vue 3, Svelte components included
• Rich Features - Line numbers, line highlighting, diff view, word highlighting
• Streaming - Progressive rendering for large files
• CDN Ready - Use directly in browser via unpkg/jsdelivr
• Plugin System - Extensible with custom transformers
• Auto Detection - Automatic language detection
• TypeScript First - Full type safety with strict mode

Installation

# npm
npm install @oxog/codeshine

# pnpm
pnpm add @oxog/codeshine

# yarn
yarn add @oxog/codeshine

# bun
bun add @oxog/codeshine

CDN Usage

<!-- ESM (recommended) -->
<script type="module">
  import { highlight } from 'https://unpkg.com/@oxog/codeshine/dist/browser/codeshine.esm.min.js';

  document.getElementById('code').innerHTML = highlight('const x = 1;', {
    language: 'javascript'
  });
</script>

<!-- IIFE (for older browsers) -->
<script src="https://unpkg.com/@oxog/codeshine/dist/browser/codeshine.iife.min.js"></script>
<script>
  const { highlight } = Codeshine;
  document.getElementById('code').innerHTML = highlight('const x = 1;', {
    language: 'javascript'
  });
</script>

Quick Start

import { highlight } from '@oxog/codeshine';

const html = highlight(`
function greet(name) {
  return \`Hello, \${name}!\`;
}
`, { language: 'javascript' });

document.getElementById('code').innerHTML = html;

With Options

import { highlight, themes } from '@oxog/codeshine';

const html = highlight(code, {
  language: 'typescript',
  theme: themes.dracula,
  lineNumbers: true,
  highlightLines: [2, 3],
  copyButton: true,
  showLanguageBadge: true,
  filename: 'example.ts'
});

React Integration

import { CodeBlock, useCodeshine } from '@oxog/codeshine/react';

// Simple usage
function App() {
  return (
    <CodeBlock
      code={`console.log('Hello!');`}
      language="javascript"
      theme="dracula"
      lineNumbers
      copyButton
    />
  );
}

// With hook
function Editor() {
  const { highlight, setTheme, theme } = useCodeshine('github-dark');

  return (
    <div dangerouslySetInnerHTML={{ __html: highlight(code, { language: 'js' }) }} />
  );
}

Vue 3 Integration

<script setup>
import { CodeBlock, useCodeshine } from '@oxog/codeshine/vue';

const code = `const x = 1;`;
</script>

<template>
  <CodeBlock
    :code="code"
    language="javascript"
    theme="dracula"
    :line-numbers="true"
  />
</template>

Svelte Integration

<script>
  import { CodeBlock } from '@oxog/codeshine/svelte';

  const code = `const x = 1;`;
</script>

<CodeBlock
  {code}
  language="javascript"
  theme="dracula"
  lineNumbers
/>

Themes

Dark Themes

github-dark | dracula | one-dark | nord | tokyo-night | monokai | vs-dark | catppuccin-mocha | high-contrast-dark

Light Themes

github-light | one-light | solarized-light | vs-light | catppuccin-latte | high-contrast-light

import { themes, Codeshine } from '@oxog/codeshine';

// Use built-in theme
const codeshine = new Codeshine({
  theme: themes.tokyoNight
});

// Or by name
const html = highlight(code, {
  language: 'js',
  theme: 'tokyo-night'
});

Supported Languages

Tier 1 (Core): JavaScript, TypeScript, JSX, TSX, HTML, CSS, JSON, Markdown

Tier 2 (Popular): Python, Java, C, C++, C#, Go, Rust, Ruby, PHP, Swift, Kotlin

Tier 3 (Web/Config): Bash, GraphQL, PowerShell, SQL, TOML, XML, YAML

Tier 4 (Data): CSV, Diff, JSON5, Regex

Tier 5 (Extended): Lua, Dockerfile, Perl, R, Scala, Haskell, Elixir, Clojure, F#, Dart, Zig, Nim, Solidity, GLSL, HLSL, and more

Tier 6 & 7: Assembly, VHDL, Verilog, COBOL, Fortran, Ada, Prolog, Erlang, OCaml, and many more specialized languages

Advanced Features

Diff View

const code = `
function add(a, b) {
-  return a - b;
+  return a + b;
}
`;

const html = highlight(code, {
  language: 'javascript',
  diff: true
});

Line Highlighting & Focus

const html = highlight(code, {
  language: 'python',
  highlightLines: [1, 3, '5-7'],
  focusLines: [3, 4, 5], // Dim everything except these
});

Streaming (Large Files)

import { createHighlightStream } from '@oxog/codeshine';

for await (const chunk of createHighlightStream(largeCode, {
  language: 'javascript',
  chunkSize: 50
})) {
  container.innerHTML += chunk;
}

Auto Detection

import { detectLanguage } from '@oxog/codeshine';

const result = detectLanguage(unknownCode);
console.log(result); // { language: 'python', confidence: 0.95 }

Custom Plugins

import { Codeshine } from '@oxog/codeshine';

const codeshine = new Codeshine({
  plugins: [{
    name: 'my-plugin',
    version: '1.0.0',
    transformers: [{
      name: 'add-links',
      phase: 'post',
      transform: (html) => html.replace(/TODO/g, '<mark>TODO</mark>')
    }]
  }]
});

Bundle Size

| Bundle | Size | Gzip | |--------|------|------| | ESM | 590 KB | 131 KB | | ESM (min) | 374 KB | 107 KB | | IIFE | 653 KB | 134 KB | | IIFE (min) | 374 KB | 107 KB |

Note: Bundle includes all 150+ language definitions. Tree-shaking available for selective imports.

Browser Support

• Chrome 80+
• Firefox 80+
• Safari 14+
• Edge 80+

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT License - see LICENSE for details.