Code block syntax highlighting languages supported
The VeloCMS editor supports 40+ syntax highlighting languages in code blocks, powered by Shiki. Here's the full list and how to set the language for each block.
VeloCMS code blocks support syntax highlighting for over 40 programming languages via Shiki, a high-accuracy TextMate grammar-based highlighter. Insert a code block with /codeblock, then pick the language from the dropdown that appears at the top of the block. The highlight applies immediately in the editor preview and in the published post.
Commonly used languages
- javascript / js — JavaScript (ESM, CJS)
- typescript / ts — TypeScript
- tsx — TypeScript with JSX (React components)
- jsx — JavaScript with JSX
- python / py — Python 3
- bash / sh — Shell scripts and terminal commands
- sql — SQL queries
- json — JSON documents
- yaml / yml — YAML configuration
- css — CSS and PostCSS
- html — HTML markup
- markdown / md — Markdown
- rust — Rust
- go — Go
- java — Java
- php — PHP
- ruby — Ruby
- swift — Swift
- kotlin — Kotlin
- c / cpp — C and C++
- dockerfile — Dockerfile
- nginx — Nginx config files
- toml — TOML configuration
- graphql — GraphQL schema and queries
Setting the language
After inserting a code block, click the language badge in the top-left corner of the block. A searchable dropdown lists all supported languages. Start typing to filter — 'py' shows Python, 'ts' shows TypeScript and tsx. The language setting is stored in the article's AST, so changing it later doesn't alter the code content — only the highlight grammar applied to it.
If a language isn't in the list, set the block to 'text' or 'plain' — this disables highlighting and renders the code in the monospace font without colour. It's better than picking the wrong language and getting garbled highlighting.
Copy button and line numbers
All code blocks in published posts render with a Copy to clipboard button in the top-right corner. Line numbers are optional — toggle them from the block's toolbar (the three-dot menu at the top-right of the block while in the editor). Line numbers are useful for tutorial articles where you'll reference specific lines in your prose, such as 'on line 14, change the timeout value to 30000'.