Code Blocks and Developer UX

Verdocs is built with developer documentation in mind. It includes several built-in features to make code blocks more useful and visually appealing.

Syntax Highlighting

Verdocs includes Highlight.js (v11.9.0) with a customized version of the GitHub Dark theme for all code blocks.

Supported Languages

By using standard Markdown fence syntax, you can specify the language of your code block for optimized highlighting:

```rust
fn main() {
    println!("Hello, Verdocs!");
}

It will render as:

fn main() {
    println!("Hello, Verdocs!");
}

Verdocs supports dozens of popular programming languages including Rust, JavaScript, Python, Bash, YAML, and many others.

Enhanced Developer Experience

In addition to syntax highlighting, Verdocs automatically injects several features into every code block to enhance usability:

  1. Language Labels: Every code block is automatically tagged with its language in the top-left corner (e.g., "RUST", "BASH", "YAML").
  2. Copy-to-Clipboard Button: Each code block features a built-in copy button that appears on hover, making it easy for users to grab code snippets.
  3. Responsive Layout: Code blocks are styled with a clean, dark interface and include horizontal scrolling for long lines of code.

Optimization Tips

Accessibility
Verdocs ensures high contrast within code blocks to maintain accessibility for all users, regardless of their visual preferences.

On this page
Syntax Highlighting Supported Languages Enhanced Developer Experience Optimization Tips