@slideskit/code

Code block extension for SlidesKit. Adds a code block type powered by Shiki for syntax highlighting.

Installation

npm install @slideskit/core @slideskit/code

Quick Start

import { Presentation } from "@slideskit/core";
import { codeBlockRegistry } from "@slideskit/code";
import "@slideskit/core/styles.css";
import "@slideskit/code/styles.css";

const presentation = {
  meta: { title: "My Deck" },
  defaults: { theme: "default" },
  options: {},
  themes: [
    {
      name: "default",
      colors: { primary: "#0ea5e9", background: "#0f172a", text: "#f8fafc" },
      fonts: { body: "system-ui", headline: "system-ui" },
    },
  ],
  slides: [
    {
      layout: "full",
      title: "Example Code",
      content: [
        {
          type: "code",
          content: {
            code: `function greet(name) {
  return \`Hello, \${name}!\`;
}`,
            lang: "javascript",
            theme: "github-dark",
          },
        },
      ],
    },
  ],
};

function App() {
  return (
    <Presentation
      presentation={presentation}
      blockRegistry={codeBlockRegistry}
    />
  );
}

Code Block Schema

| Prop | Type | Default | Description | |------|------|---------|-------------| | code | string | required | The code string to highlight | | lang | string | "text" | Language (e.g. "javascript", "typescript", "python", "jsx") | | theme | string | "github-dark" | Shiki theme (e.g. "github-dark", "vitesse-dark", "nord", "dracula") |

Supported Languages

Shiki supports 200+ languages. Common ones: javascript, typescript, jsx, tsx, python, go, rust, css, html, json, markdown, bash, sql.

Merging with Other Block Registries

import { withCodeBlock } from "@slideskit/code";
import { videoBlockRegistry } from "@slideskit/video";

const blockRegistry = withCodeBlock(videoBlockRegistry);

<Presentation presentation={presentation} blockRegistry={blockRegistry} />

License

MIT