Shiki Highlighter JS

Syntax Highlighting Made Easy

Overview

Shiki Highlighter JS is a javascript library built on top of Shikijs. It provides more features than Shikijs. It is a Syntax Highlighting Library and Have Amazing themes. Its supports many languages for highlighting. Even the Code bits Yo're seeing in this documentation page is highlighted using Shiki Highlighter JS

Including the Library

Add the following script to your site and shiki highlighter will be ready for use.

<script src="https://cdn.jsdelivr.net/gh/arnav-kr/Shikijs/dist/V1.2.1/shikiHighlighter.min.js"></script>

Getting Started

So now we have included the script so we can now use shiki highlighter.
Here is a simple example of geting highlighted code and printing to the console.

Shiki.getHTMLCode("function test(){}","javascript","github-dark") .then(res => { console.log(res.code);//highlighted code console.log(res.language);//language of the code "javascript" console.log(res.theme);//theme of the code "github-dark" });

Lets understand the code now.

Shiki is the main object of the library all the methods are available over this.
.getHTMLCode(code,language,theme) is a method of Shiki object which is used to get HTML highlighted code of the original one then you can just put the returned code in DOM. It returns a Promise

Methods

There are 4 methods in Shiki for use.

getHTMLCode()

This method takes three arguments.
First argument is the String containing the code to highlight.
Second argument is the String containing the language of the code.
Third argument is the String containing the the name of theme you want to use.

Note

The third theme argument is optional as the default theme is "github-dark"

highlight()

Shiki.highlight() takes the reference of an HTML Element as the argument and highlights the code contents of that element. It is necessary for the element to have the data-language="" specifing the language of the code else it will not be highlighted. You can Specify the theme by data-theme=""
Example:

HTML:

<div id="myCode" data-language="py" data-theme="nord"></div>

JS:

var element = document.getElementById("myCode"); Shiki.highlight(element); //The text inside myCode div will automatically be highlighted

highlightAll()

Shiki.highlightAll() is an advanced form of Shiki.highlight(). It doesn't take any argument and highlights all element having class="shiki-target" which is required if you want to automatically highlight that element. data-language="" should also be present in the element.

setTheme()

Shiki.setTheme() sets the theme for using. It takes the name of the theme as argument and sets it as the currenttheme.

Properties

Shiki.themes

Shiki.themes returns an Array of all available themes you can use.

Shiki.languages

Shiki.languages returns an Array of all available languages you can use.

Shiki.errorLog

Shiki.errorLog is an Array in which all the errors are stored that occur during highlighting your codes. Every error is stored as an object. The syntax of the error is as follows

{ error:"The Error That Occured", time:"The Time At Which the Error Occured" }

At a Glance

The main object is Shiki which containes all methods and properties.
A table explaining all is given below.

Name Type Arguments Argument Types Return Type
Shiki.getHTMLCode() Method Code, Language, Theme(optional) String, String, String new Promise()
Shiki.highlight() Method HTML Element HTMLElement null
Shiki.highlightAll() Method
Shiki.setTheme() Method Theme String
Shiki.themes Property Array
Shiki.languages Property Array
Shiki.errorLog Property Array

All available themes are as follows:

dark-plus

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

github-dark

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

github-light

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

light-plus

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

material-theme-darker

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

material-theme-default

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

material-theme-lighter

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

material-theme-ocean

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

material-theme-palenight

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

min-dark

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

min-light

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

monokai

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

nord

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

slack-theme-dark-mode

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

slack-theme-ochin

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

solarized-dark

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

solarized-light

class Cat{ constructor(breed, color, height, cuteness){ this.breed = breed; this.color = color || "orange"; this.height = height; this.cuteness = cuteness; } talk(){ console.log("Meow Meow! My color is " + this.color + " My height is " + this.height + "cms from " + this.bread + "i am " this.cuteness); } walk(){ console.log("Cat is Walking!") } sleep(){ console.log("I am sleeping! zzz") } } var cat = new Cat("felis", "white", 55, "cute"); cat.talk(); cat.walk(); cat.sleep();

All available languages are as follows:

abap
actionscript-3
ada
apex
applescript
asm
asp-net-razor
awk
bat
c
clojure
cobol
coffee
cpp.embedded.macro
cpp
crystal
csharp
css
d
dart
diff
dockerfile
elixir
elm
erlang
fsharp
git-commit
git-rebase
gnuplot
go
graphql
groovy
hack
haml
handlebars
haskell
hcl
hlsl
html-ruby-erb
html
ini
java
javascript
js
jinja-html
json
jsonc
jsonnet
jsx
julia
kotlin
latex
less
lisp
logo
lua
makefile
markdown
matlab
mdx
nix
objective-c
ocaml
pascal
perl
perl6
php
pls
postcss
powershell
prolog
pug
puppet
purescript
python
r
razor
ruby
rust
sas
sass
scala
scheme
scss
shaderlab
shellscript
smalltalk
sql
ssh-config
stylus
swift
tcl
toml
ts
tsx
typescript
vb
viml
vue
wasm
xml
xsl
yaml
文言