美化前（都擠在一行）
image.png
以下為vue3 tsx寫法
import { defineComponent, watch } from 'vue';
export default defineComponent({
props: {
code: {
type: Object || Array,
required: true,
},
},
setup(props) {
// json格式美化
function prettyFormat(code: any) {
try {
for (const key in code) {
if (typeof code[key] === 'function') {
let str = code[key];
str = str.toString();
code[key] = str.replace(/\n/g, '<br/>');
}
}
// 設(shè)置縮進為2個空格
let str = JSON.stringify(code, null, 2);
str = str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>');
// str = str.replace(/\n/g, '/r')
return str;
} catch (e) {
console.error('異常信息:' + e);
return '';
}
}
return () => {
return <pre v-html={prettyFormat(props.code)}></pre>;
};
},
});
美化后
image.png
