# shikijs/shiki

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/shikijs-shiki).**

12,946 stars · 571 forks · TypeScript · mit

## Links

- GitHub: https://github.com/shikijs/shiki
- Homepage: http://shiki.style/
- awesome-repositories: https://awesome-repositories.com/repository/shikijs-shiki.md

## Topics

`markdown` `shiki` `syntax-highlighting` `textmate-grammar`

## Description

Shiki is a syntax highlighting engine that generates color-coded HTML or ANSI output from source code. It functions as a static code highlighter, utilizing standard grammar definitions to parse text and apply accurate visual styling for documentation and terminal displays.

The engine distinguishes itself by using a TextMate grammar parser to interpret text patterns, ensuring that code displays match the visual appearance of professional editors. It operates through an isomorphic runtime that supports both browser and server environments, utilizing WebAssembly for consistent execution and pre-compiled grammar serialization to manage performance and memory overhead.

The library supports a range of integration methods, including server-side rendering and static site generation, to facilitate the creation of readable code examples in technical documentation and web content. It maps semantic tokens to specific color values through theme injection during the final rendering phase.

## Tags

### User Interface & Experience

- [Code Highlighting](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-markup/code-highlighting.md) — A high-performance engine that generates color-coded HTML or ANSI output from source code for documentation and terminal display.
- [Semantic Token Mappers](https://awesome-repositories.com/f/user-interface-experience/design-token-management/theme-token-definitions/semantic-token-mappers.md) — Maps semantic tokens to specific color values by applying theme definitions during the final rendering phase of the process.
- [Syntax Highlighting Integrations](https://awesome-repositories.com/f/user-interface-experience/syntax-highlighting-integrations.md) — Adding professional color-coded source code displays to websites, documentation, or blog posts using standard grammar definitions.

### Development Tools & Productivity

- [Syntax Highlighting Engines](https://awesome-repositories.com/f/development-tools-productivity/syntax-highlighting-engines.md) — A library that applies accurate color styling to source code by parsing text with standard grammar definitions for professional visual output.

### Software Engineering & Architecture

- [TextMate Parsers](https://awesome-repositories.com/f/software-engineering-architecture/trees/syntax-tree-construction/grammar-based-parsers/textmate-parsers.md) — Parses source code into semantic tokens by matching text patterns against standard TextMate grammar definitions used in professional editors.
- [Runtime Abstraction Layers](https://awesome-repositories.com/f/software-engineering-architecture/runtime-abstraction-layers.md) — Provides a unified interface that allows the highlighting engine to operate identically in both Node.js and browser environments.

### Part of an Awesome List

- [Syntax Highlighting](https://awesome-repositories.com/f/awesome-lists/devtools/syntax-highlighting.md) — Themeable highlighter powered by TextMate grammars.

### Web Development

- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/server-side-rendering.md) — Processing and styling code snippets on the server before sending them to the browser to ensure immediate visual consistency.
- [Static Site Generation](https://awesome-repositories.com/f/web-development/static-site-generation.md) — Generating pre-rendered, color-styled code blocks during the build process to improve page load performance and search engine optimization.