Code Blocks

Code blocks get several VitePress-style enhancements automatically — no configuration needed beyond choosing your syntax themes.

What you get for free

Every fenced code block renders with:

• A copy button in the top-right corner
• A language label showing the block’s language (e.g., ruby, yaml, sh)

These work with any standard Markdown fenced code block:

```ruby
puts "Hello, world!"
```

Syntax highlighting

Syntax colors come from Rouge themes, configured in _config.yml:

jekyll_vitepress:
  syntax:
    light_theme: github
    dark_theme: github.dark

The theme generates scoped CSS for both modes at build time. When the user toggles between light and dark mode, code blocks switch palettes automatically. Any installed Rouge theme name works here — if you specify an invalid name, the plugin falls back to github / github.dark and logs a warning.

Title bars

You can add a file-title bar to any code block using Kramdown’s Inline Attribute List syntax. Place {: data-title="filename"} on the line immediately after the closing fence:

```ruby
class WeatherTool
  def call(city:)
    "sunny in #{city}"
  end
end
```
{: data-title="app/tools/weather_tool.rb"}

This renders a title bar above the code block showing the filename, complete with a file-type icon inferred from the extension. The theme includes built-in icons for common file types.

Titled block examples

class WeatherTool
  def call(city:)
    "sunny in #{city}"
  end
end

export function formatDate(input: string): string {
  return new Date(input).toISOString()
}

jekyll_vitepress:
  branding:
    site_title: My Docs