JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3621
  • Score
    100M100P100Q131342F
  • License MIT

Markdown It plugin for Shiki

Package Exports

  • markdown-it-shiki

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