Codeshine

The ultimate syntax highlighter - beautiful code, zero compromises

Documentation | Playground | Changelog

---

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

150+ Languages Supported

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.

---

Made with love by Ersin KOC