code-highlighting.md

title	description	section	difficulty	tags
Code Highlighting Plugin	Syntax highlighting with Shiki, line numbers, and line highlighting	Plugins	beginner	plugin code highlighting shiki

Code Highlighting Plugin

Syntax highlighting with Shiki, line numbers, and line highlighting.

Quick Start

Add to MDSveX Config

import { codeHighlightPlugin } from '@goobits/docs-engine/plugins';

export default {
  preprocess: [
    mdsvex({
      remarkPlugins: [
        codeHighlightPlugin({
          theme: 'dracula',
          showLineNumbers: false
        }),
        // ... other plugins
      ],
    }),
  ],
};

---

Configuration

The plugin accepts {@CodeHighlightOptions} to customize highlighting behavior.

:::tabs

// TypeScript configuration
interface CodeHighlightOptions {
  theme?: string;           // Default: 'dracula'
  showLineNumbers?: boolean; // Default: false
}

// JavaScript configuration
codeHighlightPlugin({
  theme: 'dracula',
  showLineNumbers: false
})

:::

Available Themes

• dracula - Dark theme with vibrant colors
• github-dark - GitHub dark theme
• github-light - GitHub light theme
• monokai - Classic Monokai
• nord - Nord color scheme
• one-dark-pro - VS Code One Dark Pro
• solarized-dark - Solarized dark
• solarized-light - Solarized light

codeHighlightPlugin({
  theme: 'nord'
})

---

Features

Syntax Highlighting

Automatically highlights code based on language:

```typescript
interface User {
  name: string;
  email: string;
}
```

Line Numbers

Enable line numbers globally:

codeHighlightPlugin({
  showLineNumbers: true
})

Line Highlighting

Highlight specific lines using the {line-range} syntax:

```typescript {2-3}
interface User {
  name: string;    // highlighted
  email: string;   // highlighted
}
```

Multiple ranges:

```typescript {1,4-6}
interface User {       // highlighted
  name: string;
  email: string;
  age?: number;        // highlighted
  role: 'admin' | 'user'; // highlighted
  createdAt: Date;     // highlighted
}
```

Here's a real example highlighting important configuration options:

export default {
  preprocess: [
    mdsvex({                    // This is highlighted
      remarkPlugins: [
        calloutsPlugin(),
        tocPlugin(),            // These three
        linksPlugin(),          // are also
        codeHighlightPlugin(),  // highlighted
      ],
    }),
  ],
};

Diff Syntax

Show additions and deletions:

```diff
- const old = 'removed';
+ const new = 'added';
  const unchanged = 'stays';
```

---

Supported Languages

Shiki supports 100+ languages including:

Web: JavaScript, TypeScript, HTML, CSS, SCSS, JSON Backend: Python, Ruby, PHP, Go, Rust, Java, C# Shell: Bash, PowerShell, Zsh Data: SQL, GraphQL, YAML, TOML Docs: Markdown, MDX Config: Dockerfile, Nginx, Apache

Full list: Shiki Languages

---

Examples

TypeScript with Line Numbers

```typescript {showLineNumbers}
export async function load() {
  const data = await fetch('/api/data');
  return { data };
}
```

Highlighted Lines

```javascript {2,5-7}
function calculateTotal(items) {
  const subtotal = items.reduce((sum, item) => sum + item.price, 0);
  const tax = subtotal * 0.1;

  return {
    subtotal,
    tax,
    total: subtotal + tax
  };
}
```

Diff Example

Note: This documentation uses diff highlighting to show the change from string concatenation to template literals:

  function greet(name) {
-   console.log('Hello ' + name);
+   console.log(`Hello ${name}`);
  }

See how the - line is highlighted in red and + line in green? That's our diff syntax in action!

---

File Titles

Add file path as title:

```typescript
// src/routes/+page.server.ts
export const load = async () => {
  return { message: 'Hello' };
};
```

---

Copy Button

Code blocks automatically include a copy button (styled via CSS).

Customize appearance:

.code-block__copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.code-block__copy:hover {
  background: rgba(255, 255, 255, 0.2);
}

---

Best Practices

1. Always specify language - Enables proper highlighting
2. Use line highlighting sparingly - Only for key lines
3. Keep code blocks concise - 10-20 lines ideal
4. Add file paths for context - Show where code lives
5. Use consistent theme - Match your site's design

---

Performance

Shiki performs syntax highlighting at build time (zero runtime cost):

• No JavaScript needed for highlighting
• Pre-rendered HTML with inline styles
• Fast page loads
• Works without JavaScript

---

Related Documentation

Prerequisites: Basic markdown knowledge

Next Steps:

• Code Tabs - Tabbed code examples

Related:

• Shiki Documentation - Complete theme and language reference