0.9.0 • Published 12 months ago
markdown-it-shiki v0.9.0
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)
```
0.9.0
12 months ago
0.8.1
1 year ago
0.8.0
1 year ago
0.7.2
1 year ago
0.7.1
1 year ago
0.7.0
1 year ago
0.6.1
2 years ago
0.6.0
2 years ago
0.5.0
2 years ago
0.5.1
2 years ago
0.4.0
2 years ago
0.3.0
2 years ago
0.2.1
3 years ago
0.2.0
3 years ago
0.2.3
3 years ago
0.2.2
3 years ago
0.1.0
3 years ago
0.1.1
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago