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.

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

dark-plus

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

dracula-soft

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

dracula

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

github-dark-dimmed

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

github-dark

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

github-light

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

hc_light

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

light-plus

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

material-theme-darker

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

material-theme-lighter

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

material-theme-ocean

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

material-theme-palenight

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

material-theme

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

min-dark

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

min-light

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

monokai

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

nord

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

one-dark-pro

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

poimandres

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

rose-pine-dawn

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

rose-pine-moon

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

rose-pine

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

slack-dark

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

slack-ochin

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

solarized-dark

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

solarized-light

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

vitesse-dark

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

vitesse-light

 1 function App() {
 2     const [clicks, setClicks] = useState(0);
 3 
 4     function handleClick() {
 5         setClicks(clicks + 1);
 6     }
 7 
 8     return <div onClick={handleClick}>
 9         { /* Print clicks */ }
10+        Clicks: {  }
10-        Clicks: { clicks }
11     </div>
12 }

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.