Skip to content

Commit

Permalink
chore: update README.md and demo page
Browse files Browse the repository at this point in the history
  • Loading branch information
AVGVSTVS96 committed Aug 8, 2024
1 parent 8fd6d8e commit bea895f
Show file tree
Hide file tree
Showing 3 changed files with 343 additions and 90 deletions.
50 changes: 32 additions & 18 deletions package/README.md
Original file line number Diff line number Diff line change
@@ -1,40 +1,35 @@
> [!WARNING]
> This package is still a work in progress, it is not yet recommended for production use. Contributions are welcome! My goal is to eventually build this out as a drop in replacement for `react-syntax-highlighter`
> This package is still a work in progress, it is not yet recommended for production use. Contributions are welcome! My goal is to eventually build this out as a near-drop-in replacement for `react-syntax-highlighter`

# 🎨 [react-shiki](https://react-shiki.vercel.app/)

Syntax highlighting component for react using [Shiki](https://shiki.matsu.io/)
Syntax highlighting component and hook for react using [Shiki](https://shiki.matsu.io/)


See the [demo](https://react-shiki.vercel.app/) page with multiple theme examples and usage instructions!
[See the demo page for a version of this README with highlighted code blocks showcasing several Shiki themes!](https://react-shiki.vercel.app/)

## Features
- No `dangerouslySetInnerHTML`, output from Shiki is parsed using `html-react-parser`
- Provides a `ShikiHighlighter` component for highlighting code as children, as well as a `useShikiHighlighter` hook for users who want more control over the rendering of highlighted code
- Supports all Shiki languages and themes
- Includes minimal default styles for code blocks
- Shiki dynamically imports only the languages and themes used on a page, optimizing for performance
- `ShikiHighlighter` component displays a language label for each code block when `showLanguage` is set to `true` (default)
- Users can customize the styling of the generated code blocks by passing a `style` object or a `className`
- 🖼️ Provides a `ShikiHighlighter` component for highlighting code as children, as well as a `useShikiHighlighter` hook for more flexibility
- 🔐 No `dangerouslySetInnerHTML`, output from Shiki is parsed using `html-react-parser`
- 📦 Supports all Shiki languages and themes
- 📚 Includes minimal default styles for code blocks
- 🚀 Shiki dynamically imports only the languages and themes used on a page, optimizing for performance
- 🖥️ `ShikiHighlighter` component displays a language label for each code block when `showLanguage` is set to `true` (default)
- 🎨 Users can customize the styling of the generated code blocks by passing a `style` object or a `className`

## Installation

```bash
(pnpm|bun|yarn) add react-shiki
```
or
## Installation

```bash
npm install react-shiki
[pnpm|bun|yarn|npm] [add|install] react-shiki
```

## Usage

You can use the `ShikiHighlighter` component, or the `useShikiHighlighter` hook to highlight code.


`useShikiHighlighter` is a custom hook that takes in the code to be highlighted, the language, and the theme, and returns the highlighted code as React elements:
`useShikiHighlighter` is a hook that takes in the code to be highlighted, the language, and the theme, and returns the highlighted code as React elements. It's useful for users who want full control over the rendering of highlighted code.
```tsx
const highlightedCode = useShikiHighlighter(code, language, theme);
```
Expand All @@ -61,6 +56,25 @@ The component accepts several props in addition to language and theme:
- `as: string` - The component to be rendered. Defaults to 'pre'.
- `className: string` - Class name to be passed to the component.

```tsx
function Houston() {
return (
<ShikiHighlighter
language="jsx"
theme="houston"
showLanguage={false}
addDefaultStyles={true}
as="div"
style={{
textAlign: 'left',
}}
>
{code.trim()}
</ShikiHighlighter>
);
}
```

It can also be used with `react-markdown`:
```tsx
import type { ReactNode } from 'react';
Expand Down
12 changes: 10 additions & 2 deletions playground/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,16 @@ function App() {
<img src={shikiLogo} className="logo shiki" alt="Shiki logo" />
</a>
</div>
<h1>react-shiki testing</h1>
<h2>Syntax highlighter component for react using shiki</h2>
<h1>
🎨{' '}
<a href="https://github.com/avgvstvs96/react-shiki">
react-shiki
</a>
</h1>{' '}
<h2>
Syntax highlighter component for react using{' '}
<a href="https://shiki.matsu.io/">Shiki</a>
</h2>
<HighlightCodeBlocks />
<div style={{ marginBlock: '10rem' }} />
<footer style={{ opacity: '55%', fontSize: '14px' }}>
Expand Down
Loading

0 comments on commit bea895f

Please sign in to comment.