shiki-block-svelte
v1.1.1TypeScript
A Shiki based Svelte Code Block Component ✨
0/weekUpdated 1 months agoMITUnpacked: 9.7 KB
Published by Selemondev
npm install shiki-block-svelte
Shiki Block Svelte ✨
Shiki Code Block is a Shiki based component that allows you to render code in any language and theme. It is highly customizable and supports both light and dark themes.
Installation
You can use Shiki Code Block with your favourite framework or library. Install it as shown below
$3
``sh✨ Auto-detect
npx nypm install shiki-block-svelte
npm
npm install shiki-block-svelte
yarn
yarn add shiki-block-svelte
pnpm
pnpm install shiki-block-svelte
bun
bun install shiki-block-svelte
deno
deno install shiki-block-svelte
`
Svelte Usage
Svelte Marquee uses shiki-block-svelte. You can check it out here.
js
import CodeBlock from 'shiki-block-svelte'
const code = pnpm add shiki-block-svelte
js
theme={{
light: 'vitesse-light',
dark: 'vitesse-dark',
}}
code={code}
/>
`$3
css
/ Dark mode /
@media (prefers-color-scheme: dark) {
:global(.shiki),
:global(.shiki span) {
color: var(--shiki-dark) !important;
background-color: var(--shiki-dark-bg) !important;
/ Optional, if you also want font styles /
font-style: var(--shiki-dark-font-style) !important;
font-weight: var(--shiki-dark-font-weight) !important;
text-decoration: var(--shiki-dark-text-decoration) !important;
}
}
:global(html.dark .shiki),
:global(html.dark .shiki span) {
color: var(--shiki-dark) !important;
background-color: var(--shiki-dark-bg) !important;
font-style: var(--shiki-dark-font-style) !important;
font-weight: var(--shiki-dark-font-weight) !important;
text-decoration: var(--shiki-dark-text-decoration) !important;
}:global(.shiki--code--block) {
width: 100%;
}
:global(pre) {
z-index: 1;
padding: 24px;
border-radius: 10px;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
position: relative;
background-color: #f9f9f9 !important;
}
:global(code) {
display: block;
line-height: 1.7;
font-size: 15px;
}
`Usage With A Shiki Transformer
Check out the shiki-transformer-copy-button.
Install the shiki-transformer-copy-button as shown below:
bash
pnpm add @selemondev/shiki-transformer-copy-button
`$3
js
import { transformerCopyButton } from '@selemondev/shiki-transformer-copy-button'
`js
,
copyIcon: data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E,
})
]" />
`Props
| name | type | description |
|:-------------:|:-------------:|:-------------------------:|
| lang | BundledLanguage | The language for the provided code. |
| code |
| The code snippet. |
| theme | BuiltinTheme | A theme object with light and dark` properties for dark and light mode support. || transformers | [ShikiTransformer[]](https://shiki.style/packages/transformers) | Adds extra features on top of Shiki |
Credits go to this amazing project:
- Shiki - A beautiful yet powerful syntax highlighter.