前端显示-高亮代码（prismjs highlight ）

最新推荐文章于 2025-01-09 23:55:06 发布

Jay_帅小伙

最新推荐文章于 2025-01-09 23:55:06 发布

阅读量191

点赞数

文章标签：前端 highlight prismjs

本文链接：https://blog.youkuaiyun.com/qq_42975676/article/details/134990009

版权

文章介绍了如何使用VitePress中的prismjs库进行代码片段的语法高亮处理，包括语言转换和加载支持的代码语言。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import chalk from 'chalk'
import escapeHtml from 'escape-html'
import prism from 'prismjs'
import consola from 'consola'

const loadLanguages = require('prismjs/components/index')
loadLanguages(['markup', 'css', 'javascript'])


function wrap(code: string, lang: string): string {
  if (lang === 'text') {
    code = escapeHtml(code)
  }
  return `<pre v-pre><code>${code}</code></pre>`
}


export const highlight = (str: string, lang?: string) => {
  if (!lang) {
    return wrap(str, 'text')
  }
  lang = lang.toLowerCase()
  const rawLang = lang

  if (lang === 'vue' || lang === 'html') {
    lang = 'markup'
  }
  if (lang === 'md') {
    lang = 'markdown'
  }
  if (lang === 'ts') {
    lang = 'typescript'
  }
  if (lang === 'py') {
    lang = 'python'
  } if (lang === 'vue' || lang === 'html') {
    lang = 'markup'
  }
  if (lang === 'md') {
    lang = 'markdown'
  }
  if (lang === 'ts') {
    lang = 'typescript'
  }
  if (lang === 'py') {
    lang = 'python'
  }
  if (!prism.languages[lang]) {
    try {
      loadLanguages([lang])
    } catch {
      // eslint-disable-next-line no-console
      consola.warn(
        chalk.yellow(
          `[vitepress] Syntax highlight for language "${lang}" is not supported.`
        )
      )
    }
  }
  if (prism.languages[lang]) {
    const code = prism.highlight(str, prism.languages[lang], lang)
    return wrap(code, rawLang)
  }
  return wrap(str, 'text')

}```