DOCSEARCHbyAlgolia
Submit Docs

Shiki Syntax Highlighter

repository·main·Indexed 12 days ago

https://github.com/shikijs/shiki

A powerful syntax highlighter based on TextMate grammars for web environments. Version 4.4.3 features a modular ecosystem including @shikijs/core for minimal installations, regex engines via @shikijs/engine-oniguruma and @shikijs/engine-javascript, and integrations for Monaco Editor, markdown-it, and rehype. It supports advanced features like VSCode-style bracket highlighting, streaming colorization for LLMs, and TypeScript Twoslash annotations.

Tokens
114.8K
Snippets
372
Records
444
Agent score
88%

What's inside Shiki

  2. Introduction to Shiki

    main
    Shiki (式) is a syntax highlighter based on TextMate grammars and themes, the same engine used by VS Code. It provides highly accurate syntax highlighting for almost any mainstream programming language without requiring manual maintenance of regular expressions, CSS, or HTML. It is designed to evolve alongside VS Code's language and theme updates.

  3. Overview of Shiki syntax highlighter

    main
    Shiki is a high-quality syntax highlighter that uses TextMate grammars to provide accurate and powerful code highlighting. It is designed to produce beautiful, production-ready syntax highlighting for web applications.

  4. Use @shikijs/engine-javascript for regex processing

    main
    The @shikijs/engine-javascript package provides a regex engine for Shiki that utilizes JavaScript's native RegExp implementation. It achieves compatibility with Shiki's requirements by using oniguruma-to-es to transpile Oniguruma regex syntax and behavior into native JavaScript regex. This is a suitable engine choice when you want to avoid the overhead of a WebAssembly-based engine like Oniguruma and prefer using the host environment's native regex capabilities.

  5. Use @shikijs/engine-oniguruma for WebAssembly-based RegExp engine

    main
    The @shikijs/engine-oniguruma package provides a Shiki engine that uses the Oniguruma RegExp engine implemented in WebAssembly. This is useful when you need advanced regular expression features that might not be available in the standard JavaScript RegExp engine, or when you require consistent regex behavior across different environments.

  7. Explore Shiki integrations

    main

    Shiki provides several official integrations for different ecosystems and tools:

    • markdown-it Plugin: For use with the markdown-it parser.
    • Rehype Plugin: For use with the rehype ecosystem (common in Remark/Unified pipelines).
    • TypeScript Twoslash Integration: For advanced TypeScript type information in code blocks.
    • Monaco Editor Syntax Highlight: For integrating Shiki highlighting into the Monaco editor.
    • CLI: A command-line interface for Shiki tasks.
    • Common Transformers: A collection of useful transformers for code block manipulation.

  8. Use @shikijs/stream for streaming colorization

    main
    The @shikijs/stream package provides streaming colorization capabilities for Shiki. It is specifically designed for use cases where text is arriving in chunks, such as highlighting real-time outputs from Large Language Models (LLMs).

  9. Use Shiki with rehype via rehype-shiki

    main
    The rehype-shiki plugin allows you to integrate Shiki syntax highlighting into your rehype processing pipeline. This is useful when working with Markdown or HTML processing tools that use rehype (such as remark-rehype). It transforms code blocks in your document into highlighted HTML using Shiki's engine.

  11. Use @shikijs/colorized-brackets for VSCode-style bracket highlighting

    main
    @shikijs/colorized-brackets is a transformer for Shiki that adds VSCode-style colorized brackets to your syntax highlighting. It allows you to visually distinguish matching brackets (parentheses, square brackets, curly braces, etc.) within your code snippets.

  12. Understand bundled languages and grammars

    main

    Shiki includes a set of bundled languages redistributed via tm-grammars. These grammars are not maintained by Shiki directly, but are sourced from the textmate-grammars-themes repository.

    If you need to load custom languages that are not part of the default bundle, you should follow the guide for loading custom languages.