{"id":34956182,"url":"https://github.com/alphajoop/cokkeer","last_synced_at":"2026-04-27T10:31:54.562Z","repository":{"id":328856542,"uuid":"1115963238","full_name":"alphajoop/cokkeer","owner":"alphajoop","description":"Ultra-fast, zero-dependency syntax highlighter optimized for Bun","archived":false,"fork":false,"pushed_at":"2026-04-17T18:04:59.000Z","size":142,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-17T20:13:18.591Z","etag":null,"topics":["bun","highlighter","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alphajoop.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-13T22:58:05.000Z","updated_at":"2026-04-17T18:04:55.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/alphajoop/cokkeer","commit_stats":null,"previous_names":["alphajoop/cokkeer"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/alphajoop/cokkeer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alphajoop%2Fcokkeer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alphajoop%2Fcokkeer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alphajoop%2Fcokkeer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alphajoop%2Fcokkeer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alphajoop","download_url":"https://codeload.github.com/alphajoop/cokkeer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alphajoop%2Fcokkeer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32333196,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"online","status_checked_at":"2026-04-27T02:00:06.769Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bun","highlighter","typescript"],"created_at":"2025-12-26T22:12:21.134Z","updated_at":"2026-04-27T10:31:54.550Z","avatar_url":"https://github.com/alphajoop.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cokkeer\n\n[![npm](https://img.shields.io/npm/v/cokkeer)](https://www.npmjs.com/package/cokkeer)\n[![license](https://img.shields.io/npm/l/cokkeer)](https://github.com/alphajoop/cokkeer/blob/main/LICENSE)\n[![build](https://github.com/alphajoop/cokkeer/actions/workflows/release.yml/badge.svg)](https://github.com/alphajoop/cokkeer/actions)\n\nUltra-fast, zero-dependency syntax highlighter optimized for **Bun** \u0026 **TypeScript**.\n\n## ✨ Features\n\n- ⚡ **Blazing fast** - Optimized tokenizer with minimal overhead\n- 🏗 **Zero runtime dependencies** - No external packages required\n- 🎨 **Built-in themes** - Lightning (light), Dracula (dark), Monokai\n- 🛠 **TypeScript first** - Full type safety and autocomplete\n- 📦 **Lightweight** - Small bundle size\n- 🔌 **Easy integration** - Works with React, Vue, vanilla JS, and more\n- 🎯 **SSR friendly** - No browser-specific APIs\n- 🌐 **Multiple languages** - JavaScript, TypeScript, Python (more coming)\n\n---\n\n## 📦 Installation\n\n### Using npm\n\n```bash\nnpm install cokkeer\n```\n\n### Using Bun (recommended)\n\n```bash\nbun add cokkeer\n```\n\n### Using pnpm\n\n```bash\npnpm add cokkeer\n```\n\n### Using yarn\n\n```bash\nyarn add cokkeer\n```\n\n---\n\n## 🚀 Quick Start\n\n### Basic Usage (Vanilla JavaScript)\n\n```typescript\nimport { highlight } from \"cokkeer\";\n\nconst code = `function greet(name: string) {\n  return \\`Hello, \\${name}!\\`;\n}`;\n\nconst html = highlight(code, \"typescript\", \"dracula\");\nconsole.log(html);\n```\n\n### Browser Usage\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eCokkeer Demo\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"code-container\"\u003e\u003c/div\u003e\n\n    \u003cscript type=\"module\"\u003e\n      import { highlight } from \"https://cdn.jsdelivr.net/npm/cokkeer/dist/index.js\";\n\n      const code = `const x = 42;\nconsole.log(x);`;\n\n      const html = highlight(code, \"javascript\", \"monokai\");\n      document.getElementById(\"code-container\").innerHTML = html;\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n---\n\n## ⚛️ React Integration\n\n### Basic React Component\n\n```tsx\nimport { highlight, type LanguageName, type ThemeName } from \"cokkeer\";\n\ninterface CodeBlockProps {\n  code: string;\n  language?: LanguageName;\n  theme?: ThemeName;\n}\n\nexport function CodeBlock({\n  code,\n  language = \"javascript\",\n  theme = \"dracula\",\n}: CodeBlockProps) {\n  return (\n    \u003cdiv\n      className=\"ln-code\"\n      dangerouslySetInnerHTML={{\n        __html: highlight(code, language, theme),\n      }}\n    /\u003e\n  );\n}\n```\n\n**Advantages of this approach:**\n\n- ✅ Types imported directly from `cokkeer`\n- ✅ Full autocompletion in your IDE\n- ✅ TypeScript validation of languages and themes\n- ✅ More maintainable code\n\n### Usage in Your App\n\n```tsx\nimport { CodeBlock } from \"./components/CodeBlock\";\n\nfunction App() {\n  const exampleCode = `const greeting = \"Hello, Cokkeer!\";\nconsole.log(greeting);`;\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eMy Code Example\u003c/h1\u003e\n      \u003cCodeBlock code={exampleCode} language=\"javascript\" theme=\"monokai\" /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n**Features:**\n\n- ✅ Type-safe with `LanguageName` and `ThemeName`\n- ✅ Copy button with visual feedback\n- ✅ Optional filename display\n- ✅ Customizable styling\n\n### Usage with Multiple Code Blocks\n\n```tsx\nimport { CodeBlock } from \"./components/CodeBlock\";\n\nfunction Documentation() {\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003eJavaScript Example\u003c/h2\u003e\n      \u003cCodeBlock\n        code={`const sum = (a, b) =\u003e a + b;\nconsole.log(sum(5, 3));`}\n        language=\"javascript\"\n        fileName=\"math.js\"\n      /\u003e\n\n      \u003ch2\u003eTypeScript Example\u003c/h2\u003e\n      \u003cCodeBlock\n        code={`interface User {\n  name: string;\n  age: number;\n}\n\nconst user: User = {\n  name: \"Alice\",\n  age: 30\n};`}\n        language=\"typescript\"\n        theme=\"dracula\"\n        fileName=\"types.ts\"\n      /\u003e\n\n      \u003ch2\u003ePython Example\u003c/h2\u003e\n      \u003cCodeBlock\n        code={`def greet(name):\n    return f\"Hello, {name}!\"\n\nprint(greet(\"World\"))`}\n        language=\"python\"\n        theme=\"monokai\"\n        fileName=\"greet.py\"\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### React with SSR (Next.js)\n\n```tsx\n// app/components/CodeBlock.tsx\n\"use client\"; // Client component in Next.js 13+\n\nimport { highlight } from \"cokkeer\";\n\nexport function CodeBlock({\n  code,\n  language = \"javascript\",\n  theme = \"dracula\",\n}) {\n  const html = highlight(code, language, theme);\n  return \u003cdiv dangerouslySetInnerHTML={{ __html: html }} /\u003e;\n}\n```\n\n```tsx\n// app/page.tsx\nimport { CodeBlock } from \"./components/CodeBlock\";\n\nexport default function Home() {\n  return (\n    \u003cmain\u003e\n      \u003ch1\u003eWelcome to My Blog\u003c/h1\u003e\n      \u003cCodeBlock\n        code={`console.log(\"Hello from Next.js!\");`}\n        language=\"javascript\"\n      /\u003e\n    \u003c/main\u003e\n  );\n}\n```\n\n---\n\n## 🎨 Themes\n\nCokkeer includes three built-in themes:\n\n### Lightning Default (Light Theme)\n\n```typescript\nimport { highlight } from \"cokkeer\";\n\nconst html = highlight(code, \"javascript\", \"lightning-default\");\n```\n\n### Dracula (Dark Theme)\n\n```typescript\nconst html = highlight(code, \"typescript\", \"dracula\");\n```\n\n### Monokai (Classic Dark)\n\n```typescript\nconst html = highlight(code, \"python\", \"monokai\");\n```\n\n### Theme Preview\n\n| Theme               | Background | Use Case                               |\n| ------------------- | ---------- | -------------------------------------- |\n| `lightning-default` | Light      | Documentation, blogs, light mode sites |\n| `dracula`           | Dark       | Dark mode apps, modern UIs             |\n| `monokai`           | Dark       | Classic editor theme, developer tools  |\n\n### Creating Custom Themes\n\nYou can create custom themes by defining a `Theme` object:\n\n```typescript\nimport { type Theme } from \"cokkeer\";\n\nconst myCustomTheme: Theme = {\n  background: \"#1e1e1e\",\n  text: \"#d4d4d4\",\n  keyword: \"#569cd6\", // Keywords (def, class, if, etc.)\n  string: \"#ce9178\", // Strings\n  number: \"#b5cea8\", // Numbers\n  comment: \"#6a9955\", // Comments\n  literal: \"#d4d4d4\", // Literals (true, false, null)\n  operator: \"#d4d4d4\", // Operators (+, -, =, etc.)\n  identifier: \"#9cdcfe\", // Identifiers (variable names)\n  punctuation: \"#d4d4d4\", // Punctuation (; , . etc.)\n  type: \"#4ec9b0\", // Types (string, number, boolean, etc.)\n};\n```\n\n**Note:** Currently, custom themes need to be registered in the library. Full custom theme support is coming in a future release. For now, you can use CSS overrides:\n\n```css\n.ln-code {\n  background: #1e1e1e !important;\n  color: #d4d4d4 !important;\n}\n\n.token.keyword {\n  color: #569cd6 !important;\n}\n\n.token.string {\n  color: #ce9178 !important;\n}\n\n.token.number {\n  color: #b5cea8 !important;\n}\n\n.token.comment {\n  color: #6a9955 !important;\n}\n\n.token.identifier {\n  color: #9cdcfe !important;\n}\n\n.token.type {\n  color: #4ec9b0 !important;\n}\n```\n\n---\n\n## 🌍 Supported Languages\n\n| Language       | Aliases            | Example                         |\n| -------------- | ------------------ | ------------------------------- |\n| **JavaScript** | `js`, `javascript` | `highlight(code, \"js\")`         |\n| **TypeScript** | `ts`, `typescript` | `highlight(code, \"typescript\")` |\n| **Python**     | `py`, `python`     | `highlight(code, \"python\")`     |\n\nMore languages coming soon! 🚀\n\n---\n\n## 📖 API Reference\n\n### `highlight(code: string, language?: string, themeName?: string): string`\n\nHighlights the given code string and returns HTML.\n\n**Parameters:**\n\n- `code` (string): The source code to highlight\n- `language` (optional): Language identifier (default: `\"js\"`)\n  - Options: `\"js\"`, `\"javascript\"`, `\"ts\"`, `\"typescript\"`, `\"py\"`, `\"python\"`\n- `themeName` (optional): Theme name (default: system theme)\n  - Options: `\"lightning-default\"`, `\"dracula\"`, `\"monokai\"`\n\n**Returns:** HTML string with inline styles\n\n**Example:**\n\n```typescript\nimport { highlight } from \"cokkeer\";\n\nconst html = highlight(`const x = 42;`, \"javascript\", \"monokai\");\n```\n\n### `highlightBlock(element: Element, themeName?: string): void`\n\nHighlights a DOM element containing code.\n\n**Parameters:**\n\n- `element` (Element): DOM element with code content\n- `themeName` (optional): Theme name\n\n**Example:**\n\n```typescript\nimport { highlightBlock } from \"cokkeer\";\n\nconst codeElement = document.querySelector(\"#code-block\");\nhighlightBlock(codeElement, \"dracula\");\n```\n\n### `getCurrentTheme(themeName?: string): Theme`\n\nGets the current theme object.\n\n**Parameters:**\n\n- `themeName` (optional): Theme name to retrieve\n\n**Returns:** Theme object with color configuration\n\n**Example:**\n\n```typescript\nimport { getCurrentTheme } from \"cokkeer\";\n\nconst theme = getCurrentTheme(\"dracula\");\nconsole.log(theme.background); // \"#282a36\"\nconsole.log(theme.keyword); // \"#ff79c6\"\n```\n\n---\n\n## 🎯 TypeScript Support\n\nCokkeer is built with TypeScript and provides full type definitions out of the box.\n\n### Import Types\n\n```typescript\nimport {\n  highlight,\n  type LanguageName,\n  type ThemeName,\n  type Theme,\n} from \"cokkeer\";\n\n// Use types in your components\ninterface CodeBlockProps {\n  code: string;\n  language?: LanguageName; // Auto-completion: \"js\" | \"javascript\" | \"ts\" | ...\n  theme?: ThemeName; // Auto-completion: \"lightning-default\" | \"dracula\" | \"monokai\"\n}\n\nfunction highlightCode(code: string, lang: LanguageName, themeName: ThemeName) {\n  return highlight(code, lang, themeName);\n}\n```\n\n### Available Types\n\n```typescript\n// Languages supported\ntype LanguageName = \"js\" | \"javascript\" | \"ts\" | \"typescript\" | \"py\" | \"python\";\n\n// Available themes\ntype ThemeName = \"lightning-default\" | \"dracula\" | \"monokai\";\n\n// Theme structure\ninterface Theme {\n  background: string;\n  text: string;\n  keyword: string;\n  string: string;\n  number: string;\n  comment: string;\n  literal: string;\n  operator: string;\n  identifier: string;\n  punctuation: string;\n  type: string;\n  padding?: string;\n  borderRadius?: string;\n  fontFamily?: string;\n}\n\n// Token types for internal use\ntype ThemeTokenKey =\n  | \"background\"\n  | \"text\"\n  | \"keyword\"\n  | \"string\"\n  | \"number\"\n  | \"comment\"\n  | \"literal\"\n  | \"operator\"\n  | \"identifier\"\n  | \"punctuation\"\n  | \"type\";\n```\n\n### Type-Safe React Example\n\n```tsx\nimport { highlight, type LanguageName, type ThemeName } from \"cokkeer\";\nimport { type FC } from \"react\";\n\ninterface Props {\n  code: string;\n  language?: LanguageName;\n  theme?: ThemeName;\n}\n\n// Fully type-safe component\nexport const CodeBlock: FC\u003cProps\u003e = ({\n  code,\n  language = \"javascript\",\n  theme = \"dracula\",\n}) =\u003e {\n  return (\n    \u003cdiv\n      dangerouslySetInnerHTML={{\n        __html: highlight(code, language, theme),\n      }}\n    /\u003e\n  );\n};\n```\n\n### Benefits of Type Safety\n\n- ✅ **Autocomplete** - Your IDE suggests valid languages and themes\n- ✅ **Type checking** - Catch errors before runtime\n- ✅ **Better refactoring** - Rename and find usages with confidence\n- ✅ **Self-documenting** - Types serve as inline documentation\n\n---\n\n## 🔧 Advanced Usage\n\n### Custom Styling\n\nThe generated HTML includes inline styles, but you can override them with CSS:\n\n```css\n.ln-code {\n  font-size: 16px !important;\n  line-height: 1.6 !important;\n  border: 1px solid #e5e7eb;\n}\n\n.token.keyword {\n  font-weight: bold;\n}\n\n.token.string {\n  font-style: italic;\n}\n```\n\n### Integration with MDX\n\n```mdx\nimport { CodeBlock } from \"./components/CodeBlock\";\n\n# My Blog Post\n\nHere's a code example:\n\n\u003cCodeBlock\n  code={`function hello() {\n  return \"world\";\n}`}\n  language=\"javascript\"\n  theme=\"dracula\"\n/\u003e\n```\n\n### Markdown Code Block Processor\n\n````typescript\nimport { highlight } from \"cokkeer\";\n\nfunction processMarkdownCodeBlocks(markdown: string): string {\n  return markdown.replace(/```(\\w+)\\n([\\s\\S]*?)```/g, (_, lang, code) =\u003e\n    highlight(code.trim(), lang, \"dracula\")\n  );\n}\n\nconst markdown = `\n\\`\\`\\`javascript\nconst x = 42;\n\\`\\`\\`\n`;\n\nconst html = processMarkdownCodeBlocks(markdown);\n````\n\n---\n\n## 🏗️ Performance\n\nCokkeer is designed for speed:\n\n- ⚡ **Zero dependencies** - No external packages to slow you down\n- 🚀 **Fast tokenization** - Efficient regex-based parser\n- 📦 **Small bundle** - Minimal impact on your bundle size\n- 💾 **Inline styles** - No CSS file to load separately\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! Please read our [contributing guide](CONTRIBUTING.md) to get started.\n\n### Development Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/alphajoop/cokkeer.git\ncd cokkeer\n\n# Install dependencies\nbun install\n\n# Run tests\nbun test\n\n# Build\nbun run build\n\n# Run in development\nbun run dev\n```\n\n### Adding a New Language\n\n1. Create a file in `src/languages/` (e.g., `rust.ts`)\n2. Define token patterns\n3. Export from `src/index.ts`\n4. Add tests in `tests/`\n\n---\n\n## 📝 License\n\nMIT © [Alpha Diop](https://github.com/alphajoop)\n\n---\n\n## 🔗 Links\n\n- [GitHub Repository](https://github.com/alphajoop/cokkeer)\n- [NPM Package](https://www.npmjs.com/package/cokkeer)\n- [Issue Tracker](https://github.com/alphajoop/cokkeer/issues)\n- [Changelog](https://github.com/alphajoop/cokkeer/blob/main/CHANGELOG.md)\n\n---\n\n## ⭐ Show Your Support\n\nIf you find Cokkeer useful, please consider giving it a star on GitHub!\n\n[![GitHub stars](https://img.shields.io/github/stars/alphajoop/cokkeer?style=social)](https://github.com/alphajoop/cokkeer)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falphajoop%2Fcokkeer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falphajoop%2Fcokkeer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falphajoop%2Fcokkeer/lists"}