ChatGPT インターフェイスのリターン コードの強調表示の実装ロジック

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

openai が提供するインターフェースを使用する場合、返されたデータにコードが含まれている場合、そのコードにはスタイルがなく、通常は ``` に含まれるテキストの一部であることがわかります。

図に示すように:

 公式のものと同じくらい美しいものはどうしてありますか:

 レンダラを使用し、package.json で直接設定する必要があります。

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

依存関係のダウンロード コマンド:

npm i markdown-it

npm i @traptitech/markdown-it-katex

npm i -D @types/markdown-it

npm i highlight.js
 

プラグインのドキュメント:

markdown-it | markdown-it 中国語ドキュメント

ハイライト.js 中国語ドキュメント

使用する必要があるファイルに以下を導入します。

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