vue中如何使用prismjs

安装

yarn add prismjs

基本使用

<template>
   <code v-html="Prism.highlight(myJsonStr, Prism.languages.js);" />
</template>
<script setup>
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';

// 后端返回的json字符串
const myJsonStr = "{name: '张三'}";
</script>

优化

1、将不标准的json字符串转换为标准的
2、（可能压缩过的）一行的json字符串 使其换行

<template>
    <!-- 注意这里不要用code标签 否则会把你辛苦添加的换行符去掉 -->
   <pre v-html="jsonStr" />
</template>
<script setup>
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';

// 后端返回的json字符串（基本都是不标准的）
const myJsonStr = "{name: '张三'}";

// 给转换成标准的json字符串 并且支持换行
const handelJsonStr = (str) => {
  const jsonStr = eval('(' + str + ')');
  const jsonStrHuanhang = JSON.stringify(jsonStr, null, '\t');
  const res = Prism.highlight(jsonStrHuanhang, Prism.languages.js);
  return res;
};

let jsonStr = handelJsonStr(myJsonStr);
</script>

参考

https://www.jianshu.com/p/ea2ea7da8ae5