Code Block

Block-level code container with a language dropdown. Foundation for syntax highlighting (Prism or Shiki) and on-demand formatting (Prettier).

Install

pnpm add @typix-editor/extension-code-block

Live demo

Language helpers

import {
  LANGUAGE_KEYS,
  LANGUAGE_MAP,
  getLanguageDisplayName,
  normalizeLanguage,
  searchLanguages,
} from "@typix-editor/extension-code-block";

• LANGUAGE_KEYS — array of every supported language key
• getLanguageDisplayName("ts") → "TypeScript"
• normalizeLanguage("javascript") → "js"
• searchLanguages("type") → fuzzy-match results

Vendor the UI

npx typix ui add code-block

Related