ember-shiki

🌈 ember-shiki

Embed code snippets with pretty syntax highlighting in Ember.js, powered by Shiki

ember-shiki is an addon which makes using Shiki in Ember a breeze. It offers a drop-in component to get syntax highlighting for code. This is perfect for documentation sites, blogs, or wherever you need pretty formatted code.

• ✅ TypeScript and Glint ready
• 🧵 V2 addon format
• 🚀 FastBoot support
• 📦 Lazy loaded packages — minimal impact on initial load
• #️⃣ Syntax highlighting for 170+ languages — including .gjs and .gts
• 🎨 Theme support: 29 included themes — load any external
• 🔢 Line number support
• 🔤 Custom fonts — including font ligature support
• 📋 Copy code to clipboard
• 🏷️ Code block naming
• 🗂️ Group code blocks with tabs
• ✨ Line highlighting
• 🖌️ Stylable via CSS variables

Compatibility

• Embroider or ember-auto-import v2
• Ember.js v4.4 or above
• Node.js v16 or above

Installation

npm install ember-shiki
# or
yarn add ember-shiki
# or
pnpm install ember-shiki

Usage

Basic usage:

import { CodeBlock } from 'ember-shiki';

<template>
  <CodeBlock
    @code="console.log('hello world');"
    @language="js"
  />
</template>

See the deployed docs app for an interactive demo and information on all options.

Contributing

See the Contributing guide for details.

Acknowledgements

Heavily inspired by VitePress.

License

This project is licensed under the MIT License.