markdown-it-shiki
v0.9.0
Published
Markdown It plugin for Shiki
Downloads
4,420
Maintainers
Readme
markdown-it-shiki
Markdown It plugin for Shiki
Install
npm i -D markdown-it-shiki
Usage
import MarkdownIt from 'markdown-it'
import Shiki from 'markdown-it-shiki'
const md = MarkdownIt()
md.use(Shiki, {
theme: 'nord'
})
Dark mode
md.use(Shiki, {
theme: {
dark: 'min-dark',
light: 'min-light'
}
})
Add then these to your CSS
/* Query based dark mode */
@media (prefers-color-scheme: dark) {
.shiki-light {
display: none;
}
}
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
.shiki-dark {
display: none;
}
}
/* Class based dark mode */
html.dark .shiki-light {
display: none;
}
html:not(.dark) .shiki-dark {
display: none;
}
Highlight lines
md.use(Shiki, {
highlightLines: true
})
Add these to your CSS
code[v-pre] {
display: flex;
flex-direction: column;
}
.shiki .highlighted {
background: #7f7f7f20;
display: block;
margin: 0 -1rem;
padding: 0 1rem;
}
Then you can highlight lines in code block.
```js {1-2}
const md = new MarkdownIt()
md.use(Shiki)
const res = md.render(/** ... */)
console.log(res)
```