---
title: "Code Highlighting"
sidebar_position: 2.0
sidebar_custom_props:
  section: "Features"
  section_position: 2
---

# Code Highlighting

The theme includes built-in syntax highlighting for 30+ programming languages powered by Shiki.

## Supported Languages

The theme supports syntax highlighting for the following languages:

- **Web**: HTML, CSS, JavaScript, TypeScript, JSX, TSX, Vue, MDX
- **Backend**: Python, Java, C#, Go, Rust, Ruby, PHP
- **DevOps**: Docker, Terraform, YAML, TOML, Shell Script, PowerShell
- **Data**: SQL, JSON, JSONC, CSV, GraphQL
- **Documentation**: Markdown, LaTeX, XML
- **Configuration**: NGINX, INI, .env, Git commit/rebase, CODEOWNERS
- **Other**: Lua, HCL, SCSS, Sass

## Basic Usage

Use standard fenced code blocks with language identifiers:

````markdown
```python
def hello_world():
    print("Hello, Slidev!")
```

```javascript
const greeting = "Hello, World!";
console.log(greeting);
```

```bash
docker run -d -p 8080:80 nginx
```
````

## Line Highlighting

Highlight specific lines to draw attention to important code:

````markdown
```javascript {2,4-6}
const a = 1
const b = 2  // highlighted
const c = 3
const d = 4  // highlighted
const e = 5  // highlighted
const f = 6  // highlighted
```
````

## Theme Configuration

The syntax highlighting uses different themes for light and dark modes:

- **Dark mode**: One Dark Pro
- **Light mode**: One Light

These themes are configured in `setup/shiki.ts` and automatically switch based on the presentation mode.

## Adding Custom Languages

To add support for additional languages, modify `setup/shiki.ts`:

```typescript
export default defineShikiSetup((): ShikiSetupReturn => {
  return {
    themes: {
      dark: "one-dark-pro",
      light: "one-light",
    },
    langs: [
      // Add your language here
      "kotlin",
      "swift",
      // ... existing languages
    ],
  };
});
```