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;
}