DEV Community

Cover image for Shiki: Powerful syntax highlighter for your applications
Deepak Patil
Deepak Patil

Posted on

1 1 2

Shiki: Powerful syntax highlighter for your applications

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
Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs