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

Our syntax highlighter supports 151 programming languages:

Supported Languages
abapactionscript-3adaapacheapexaplapplescriptaraasmastroawkballerinabat, batchberry, bebibtexbicepbladeccadence, cdcclarityclojure, cljcmakecobolcodeql, qlcoffeecppcrystalcsharp, c#, cscsscueddartdaxdiffdockerdream-makerelixirelmerberlang, erlfishfsharp, f#, fsgherkingit-commitgit-rebaseglslgnuplotgographqlgroovyhackhamlhandlebars, hbshaskell, hshclhlslhtmlhttpimbaini, propertiesjavajavascript, jsjinja-htmljisonjsonjson5jsoncjsonnetjssm, fsljsxjuliakotlinlatexlessliquidlisplogoluamake, makefilemarkdown, mdmarkomatlabmdxmermaidnginxnimnixobjective-c, objcobjective-cppocamlpascalperlphpplsqlpostcsspowerquerypowershell, ps, ps1prismaprologprotopug, jadepuppetpurescriptpython, pyrraku, perl6razorrelriscvrstruby, rbrust, rssassassscalaschemescssshaderlab, shadershellscript, bash, console, sh, shell, zshsmalltalksoliditysparqlsqlssh-configstatastylus, stylsvelteswiftsystem-verilogtasltcltextomltsxturtletwigtypescript, tsvvb, cmdverilogvhdlviml, vim, vimscriptvue-htmlvuewasmwenyan, 文言wgslxmlxslyaml, ymlzenscript

Themes

Hyvor Blogs supports 28 VS Code themes.

Supported Themes
dark-plusdracula-softdraculagithub-dark-dimmedgithub-darkgithub-lighthc_lightlight-plusmaterial-theme-darkermaterial-theme-lightermaterial-theme-oceanmaterial-theme-palenightmaterial-thememin-darkmin-lightmonokainordone-dark-propoimandresrose-pine-dawnrose-pine-moonrose-pineslack-darkslack-ochinsolarized-darksolarized-lightvitesse-darkvitesse-light

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 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.