Syntax Highlighting

Hyvor Blogs has a powerful syntax highlighter with the following features:

  • Line numbering
  • Line highlighting
  • Diff (+ and -)
  • Line focusing

Most importantly, syntax highlighting is done at the time of rendering posts in our back-end. Therefore, it does not require any additional Javascript or CSS. To change syntax highlighting settings, go to Console → Settings → Post Content.

Languages

Loading languages

Themes

Loading themes

Adding Code Blocks to Your Post

See Code Block in Writing.

Annotations

Annotations are used for highlighting, focusing, and numbering lines. You can add annotations to the code block in the Editor. Let's see some examples.

Annotation
Description
h=1
Highlights the first line
h=1-5
Highlights line 1 to 5
h=1,5,6
Highlights line 1, 5, and 6
h=1-4,7
Highlights line 1 to 4, and then 7
f=1
Focuses number 1 (Works exactly as highlight)
+=12
Highlights the 12th line in green (for Diff add)
-=20
Highlights the 20th line in red (for Diff remove)
renumber=4:21
Number of the 4th line will be changed to 21. The next line will have 22
renumber=6:null
Number of the 6th line will be hidden
h=1 +=12
You can have multiple space separated annotations
numbers=true
Enable line numbers (to override global settings)
numbers=false
Disable line numbers (to override global settings)

Tips

  • Under the hood, Hyvor Blogs use Shiki for syntax highlighting. Therefore, we can support and VSCode-supported language or theme. If you want to add any, contact us.
  • Colors for syntax comes from our side, but styles like padding, margins, space between lines, and font sizes comes from the theme of your blog.