high fidelity highlighting200+ languages4000+ VS Code themessimple & extensibledesigner friendlymature ecosystemshikibeautiful & modernsyntax highlighter

Shiki supports TextMate grammar, the syntax highlighting format used by VS Code, Atom and Sublime Text.

The benefits are:

  • Support for 115 languages
  • Ease of adding language support — just include its TextMate grammar
  • Editor-grade granularity

On granularity: Shiki highlights code as fine as VS Code. Other highlighters, such as Prism and highlight.js, have way coarser highlighting. For example, take a look at this TSX snippet, highlighted by highlight.js, Prism and Shiki in Solarized Light theme.

// highlight.js's resultfunctionBlog({ posts }) {return(<ul>{posts.map((post)=>(<li>{post.title}</li>))}</ul>)} // This function gets called at build time on server-side. exportasyncfunctiongetStaticProps() {constres=awaitfetch('https://.../posts')constposts=awaitres.json()return{props: {posts}}}exportdefaultBlog // From https://nextjs.org/docs/basic-features/data-fetching // prism's resultfunctionBlog({ posts }) {return(<ul>{posts.map((post)=>(<li>{post.title}</li>))}</ul>)} // This function gets called at build time on server-side. exportasyncfunctiongetStaticProps() {constres=awaitfetch('https://.../posts')constposts=awaitres.json()return{props: {posts}}}exportdefaultBlog // From https://nextjs.org/docs/basic-features/data-fetching // Shiki's resultfunctionBlog({ posts }) {return(<ul>{posts.map((post)=>(<li>{post.title}</li>))}</ul>)} // This function gets called at build time on server-side. exportasyncfunctiongetStaticProps() {constres=awaitfetch('https://.../posts')constposts=awaitres.json()return{props: {posts}}}exportdefaultBlog // From https://nextjs.org/docs/basic-features/data-fetching

Prism is missing italic, bold styling, color #D30102, and color #073642.
While Shiki distinguishes between keywords such as export and async, Prism mixes them all.
highlight.js highlights even less than Prism.

All 115 languages supported by Shiki:

abap | actionscript-3 | ada | apache | apex | apl | applescript | asm | awk | bat | c | clojure | cobol | coffee | cpp | crystal | csharp | css | d | dart | diff | docker | elixir | elm | erb | erlang | fsharp | gherkin | git-commit | git-rebase | gnuplot | go | graphql | groovy | hack | haml | handlebars | haskell | hcl | hlsl | html | ini | java | javascript | jinja-html | json | jsonc | jsonnet | jsx | julia | kotlin | latex | less | lisp | logo | lua | make | markdown | matlab | mdx | nginx | nim | nix | objective-c | objective-cpp | ocaml | pascal | perl | php | plsql | postcss | powershell | prolog | pug | puppet | purescript | python | r | raku | razor | riscv | ruby | rust | sas | sass | scala | scheme | scss | shaderlab | shellscript | smalltalk | solidity | sparql | sql | ssh-config | stylus | svelte | swift | system-verilog | tcl | toml | tsx | turtle | twig | typescript | vb | verilog | vhdl | viml | vue | wasm | wenyan | xml | xsl | yaml

Try it in the playground

All themes supported by Shiki:

dark-plus | github-dark | github-light | light-plus | material-darker | material-default | material-lighter | material-ocean | material-palenight | min-dark | min-light | monokai | nord | slack-dark | slack-ochin | solarized-dark | solarized-light

Try it in the playground

All themes supported by Shiki:

dark-plus | github-dark | github-light | light-plus | material-darker | material-default | material-lighter | material-ocean | material-palenight | min-dark | min-light | monokai | nord | slack-dark | slack-ochin | solarized-dark | solarized-light

Try it in the playground