Syntax highlighting is a feature in text editors and Integrated Development Environments (IDEs) that assigns different colours and styles to various elements of the code. By visually distinguishing keywords, strings, comments, and other components, it enhances readability and makes coding more intuitive. This not only helps in quickly understanding and navigating through the code but also aids in spotting errors and improving overall productivity.
While there are multiple options available for syntax highlighting like highlightJS, prismJS, quillJS and many more, Shiki stands out of them as it provides a more feature-packed tool for integration with multiple languages.
As Shiki is built on VS Code's syntax highlighting engine, It offers the same features as the VS Code editor. Also, it has almost all the themes as provided by VS Code. So using shiki gives your personal preferred appearance to code.
Sample code snippet of Shiki with ReactJS :
import { codeToHtml } from 'shiki'
const code = 'const a = 1' // input code
const html = await codeToHtml(code, {
lang: 'javascript',
theme: 'vitesse-dark'
})
console.log(html) // highlighted html string
Shiki is supported by any modern javascript runtime allowing seamless integrations. Along with this Shiki offers modifications and configurations as per requirement using Transformers and Decorations API.
Whether be it JS, HTML or any other language Shiki can provide flawless syntax highlighting for websites and editors.
JTLYK All the codes on this website are highlighted using Shiki.
Top comments (0)