https://github.com/easydevv/astro-shiki-transformers
An example of using the advanced codeblock theme with shiki-transformers in the Astro framework.
https://github.com/easydevv/astro-shiki-transformers
astro astrojs framework javascript shiki shiki-transformers ssg static-site-generator template
Last synced: about 1 year ago
JSON representation
An example of using the advanced codeblock theme with shiki-transformers in the Astro framework.
- Host: GitHub
- URL: https://github.com/easydevv/astro-shiki-transformers
- Owner: EasyDevv
- License: mit
- Created: 2024-08-05T22:49:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-05T23:21:01.000Z (over 1 year ago)
- Last Synced: 2025-01-22T13:52:50.092Z (about 1 year ago)
- Topics: astro, astrojs, framework, javascript, shiki, shiki-transformers, ssg, static-site-generator, template
- Language: CSS
- Homepage: https://stackblitz.com/edit/astro-shiki-transformers
- Size: 93.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Astro with @shikijs/transformers
This project is based on the Astro framework and uses @shikijs/transformers for advanced code highlighting and formatting.
## Tech Stack
- [Astro.js](https://astro.build/)
- [@shikijs/transformers](https://shiki.style/guide/transformers)
## Project Overview
This project combines Astro's powerful static site generation capabilities with Shiki's advanced code highlighting features. By adding @shikijs/transformers, you can create richer and more interactive code blocks compared to plain Shiki.
## Quick Start
You can run this project directly in your browser without any local setup:
[Run on StackBlitz](https://stackblitz.com/edit/astro-shiki-transformers)
This StackBlitz link allows you to instantly explore and experiment with the project in a live development environment.
## Key Features
Using @shikijs/transformers, you can leverage advanced code representation features such as:
- **Diff Highlighting**: Visually display code changes
- **Line Highlighting**: Emphasize specific code lines
- **Focus**: Draw attention to important parts of the code
These features make code examples clearer and easier to understand.
## Local Installation
If you prefer to run the project locally:
1. Clone this repository:
```bash
git clone https://github.com/EasyDevv/astro-shiki-transformers.git
```
2. Navigate to the project directory:
```bash
cd astro-shiki-transformers
```
3. Install dependencies:
```bash
npm install
```
## Usage
1. Run the development server:
```bash
npm run dev
```
2. Open `http://localhost:4321` in your browser to view the project.
## Shiki Transformers Configuration and Usage Examples
Shiki Transformers are configured in the `astro.config.mjs` file. Here's an example of setting up some useful transformers:
```js
import { defineConfig } from 'astro/config';
import {
transformerNotationDiff,
transformerNotationHighlight,
transformerNotationWordHighlight,
transformerNotationFocus,
transformerNotationErrorLevel,
transformerMetaHighlight,
transformerMetaWordHighlight,
transformerRenderWhitespace,
} from '@shikijs/transformers';
export default defineConfig({
markdown: {
syntaxHighlight: 'shiki',
shikiConfig: {
theme: 'github-dark',
transformers: [
transformerNotationDiff(),
transformerNotationHighlight(),
transformerNotationWordHighlight(),
transformerNotationFocus(),
transformerNotationErrorLevel(),
transformerMetaHighlight(),
transformerMetaWordHighlight(),
transformerRenderWhitespace(),
],
},
},
});
```
After this configuration, you can use it in your markdown files like this:
````markdown
```ts
console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
console.log('goodbye')
```
````
## License
This project is distributed under the MIT License. See the `LICENSE` file for more details.