Die Implementierungslogik der Hervorhebung des Rückgabecodes der ChatGPT-Schnittstelle

Offizielle API: POST https://api.openai.com/v1/chat/completions

Wenn wir die von openai bereitgestellte Schnittstelle verwenden und die zurückgegebenen Daten Code enthalten, werden wir feststellen, dass der Code keinen Stil hat und es sich im Allgemeinen um einen Text handelt, der in „“ enthalten ist.

Wie im Bild gezeigt:

 Wie kann es so schön sein wie das offizielle:

 Sie müssen einen Renderer verwenden und ihn direkt in package.json konfigurieren:

"dependencies": {
    //其他无关依赖省略
    "@traptitech/markdown-it-katex": "^3.6.0",
    "markdown-it": "^13.0.1",
    "highlight.js": "^11.7.0",
  },
  "devDependencies": {
    //其他无关依赖省略
    "@types/markdown-it": "^12.2.3"
  }

Befehl zum Herunterladen von Abhängigkeiten:

npm i markdown-it

npm i @traptitech/markdown-it-katex

npm i -D @types/markdown-it

npm i highlight.js
 

Plugin-Dokumentation:

markdown-it | markdown-it Chinesische Dokumentation

Highlight.js Chinesische Dokumentation

Geben Sie in der Datei ein, die verwendet werden muss:

<script setup>
import { reactive, onMounted } from 'vue';
import MarkdownIt from 'markdown-it'
import mdKatex from '@traptitech/markdown-it-katex'
import hljs from 'highlight.js';

const mdi = new MarkdownIt({
  linkify: true,
  highlight(code, language) {
    const validLang = !!(language && hljs.getLanguage(language))
    if (validLang) {
      const lang = language ?? ''
      return highlightBlock(hljs.highlight(lang, code, true).value, lang)
    }
    return highlightBlock(hljs.highlightAuto(code).value, '')
  }
})
mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })

function highlightBlock(str, lang) {
  return `<pre class="pre-code-box"><div class="pre-code-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">复制代码</span></div><div class="pre-code"><code class="hljs code-block-body ${lang}">${str}</code></div></pre>`
}

const getMdiText = (value) => {
    return mdi.render(value)
}

const state = reactive({
    htmlStr: '' 
})

onMounted(() => {
    state.htmlStr = getMdiText("包含代码的文本") //htmlStr就是已经包含html样式的文本
});


<script>

<template>
    <div v-html="state.htmlStr"></div>
</template>