import { Highlighter , renderToHtml } from "shiki" ; import { visit } from "unist-util-visit" ; import { renderToHTML } from "@/components/shiki/renderer" ; type TRemarkShikiOptions = { highlighter : Highlighter ; renderToHTML ? : typeof renderToHtml | typeof renderToHTML ; ignoreUnknownLanguage ? : string ; } ; export function remarkShiki ( options ) { const { highlighter , renderToHTML } = options ; const loadedLanguages = highlighter . getLoadedLanguages ( ) ; const ignoreUnknownLanguage = options . ignoreUnknownLanguage == null ? true : options . ignoreUnknownLanguage ; return transformer ; function transformer ( tree ) { visit ( tree , "code" , visitor ) ; function visitor ( node ) { const lang = ignoreUnknownLanguage && ! loadedLanguages . includes ( node . lang ) ? null : node . lang ; if ( renderToHTML ) { const theme = highlighter . getTheme ( ) ; const tokens = highlighter . codeToThemedTokens ( node . value , lang , theme , { includeExplanation : false , } ) ; const { fg , bg } = theme ; const html = renderToHTML ( tokens , { fg , bg , langId : lang } , node . meta ) ; node . type = "html" ; node . value = html ; } else { const highlighted = highlighter . codeToHtml ( node . value , lang ) ; node . type = "html" ; node . value = highlighted ; } } } }