给后台写了一个优雅的自定义风格的数据日志上报页面

查看后台数据日志是非常常见的场景，经常看到后台的小伙伴从服务器日志复制一段json数据字符串，然后找一个JSON工具网页打开，在线JSON格式化校验。有的时候，一些业务需要展示mqtt或者socket的实时信息展示，如果不做任何修改直接展示一串字符串，可以说相当不优雅了，后台同学看了，青光眼都待变成老花眼。比如下面这一串，能看是能看，就是看起来贼费劲，所有类型的字体样式都一样。。。

这个问题，不难解决，也就是前端同学，一首歌的时间，就能帮你画出根据你喜好的自定义的数据日志展示页面。可以自定义标记出，不同数据类型的自定义颜色，字体大小展示，都是可以设置的。

如果你觉得默认的代码高亮样式不合适，可以更换 Highlight.js 提供的主题样式。Highlight.js 提供了多种主题样式，你可以选择一种更适合你的项目的样式。

1.自定义自己喜欢的 Highlight.js 主题

1. 选择合适的主题 ：Highlight.js 提供了多种主题样式，你可以在 Highlight.js 官方文档 上查看和选择。首先安装highlight.js组件库。

   npm install highlight.js

2. 导入新的主题样式 ：根据选择的主题样式，如果是vue框架，在 main.js 中导入相应的 CSS 文件。例如，如果你选择了 atom-one-dark 主题，修改 main.js文件，确保 main.js 文件导入了新的主题样式：

import Vue from 'vue';
import App from './App.vue';
import 'highlight.js/styles/atom-one-dark.css';  // 使用 atom-one-dark 主题

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

2.如果仍然不满意，可以自定义样式

你可以在 CodeDisplay.vue 的样式部分添加自定义样式来覆盖默认的主题样式。例如，修改字体颜色、背景颜色。CodeDisplay.vue组件代码如下

<template>
  <div class="code-container">
    <pre><code :class="language" v-html="highlightedCode"></code></pre>
  </div>
</template>

<script>
import hljs from 'highlight.js';

export default {
  name: 'CodeDisplay',
  props: {
    code: {
      type: String,
      required: true
    },
    language: {
      type: String,
      default: 'plaintext'
    }
  },
  computed: {
    highlightedCode() {
      return hljs.highlight(this.language, this.code).value;
    }
  },
  watch: {
    code() {
      this.updateHighlightedCode();
    },
    language() {
      this.updateHighlightedCode();
    }
  },
  methods: {
    updateHighlightedCode() {
      this.$forceUpdate();
    }
  }
};
</script>

<style>
.code-container {
  max-width: 800px;
  margin: 20px auto;
  background: white;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
pre {
  background: #282c34; /* 自定义背景颜色 */
  color: #abb2bf; /* 自定义字体颜色 */
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
}
code {
  font-family: 'Fira Code', 'Courier New', Courier, monospace; /* 自定义字体 */
  font-size: 14px; /* 自定义字体大小 */
  color: #e5e9f0; /* 自定义代码字体颜色 */
}
.hljs-keyword {
  color: #c678dd; /* 自定义关键字颜色 */
}
.hljs-string {
  color: #98c379; /* 自定义字符串颜色 */
}
.hljs-comment {
  color: #5c6370; /* 自定义注释颜色 */
}
.hljs-function {
  color: #61afef; /* 自定义函数名颜色 */
}
</style>

如果不生效是渲染的声明周期问题，可以把样式放到index.css文件中，在main.js中导入index.css文件 index.css文件

code {
  font-family: 'Fira Code', 'Courier New', Courier, monospace; /* 自定义字体 */
  font-size: 14px; /* 自定义字体大小 */
  color: #e0ecd7; /* 自定义代码字体颜色 */
}
.hljs-attr{
  color: #dfcf18;
  font-weight: bold;
}
.hljs-number{
  font-weight: bolder;
}
.hljs-keyword {
  color: #c678dd; /* 自定义关键字颜色 */
  font-weight: bold;
}
.hljs-string {
  color:#5af146 ; /* 自定义字符串颜色 */
}
.hljs-comment {
  color: #5c6370; /* 自定义注释颜色 */
}
.hljs-function {
  color: #61afef; /* 自定义函数名颜色 */
}

在main.js中导入index.css文件

import Vue from 'vue';
import App from './App.vue';
import 'highlight.js/styles/atom-one-dark.css';  // 使用 atom-one-dark 主题
import './index.css';  //导入自定义的样式


Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

3.最后一步，在页面中引入CodeDisplay组件：

<template> 
     <CodeDisplay :code="code" language="javascript" />
</template> 
<script>
import CodeDisplay from './components/CodeDisplay.vue'; 
export default { 
name: 'App', 
components: { CodeDisplay }, 
data() { 
    return { 
    code: `// Example JavaScript code function greet(name) { return \`Hello, \${name}!\`; } 
    console.log(greet('World'));` }; } }; 
</script>

其他建议

1. 浏览其他主题：可以多尝试几个主题，找到最适合你的项目的样式。
2. 进一步自定义：如果默认的主题不完全满足需求，可以进一步自定义主题样式。
3. highlight.js很强大，也支持很多其他语言的自定义识别展示，等很多类型的语言，以下都包括，但不限，具体请参照官网说明。

• C

• C++

• C#

• CIL

• CSS

• Dart

• Diff

• Django

• Dockerfile

• Dylan

• Go

• Gradle

• HTML/XML

• HTTP

• JSON

• Java

• JavaScript

• Makefile

• Markdown

• Nginx

• PHP

• Python

• Ruby

• Rust

• SCSS

• Shell Session

• SQL

• Swift

• TypeScript

• Vue.js Component

通过这些步骤，你可以更换或自定义代码高亮样式，使其符合你的项目需求并提供更好的视觉体验。

4.如果需要json字符串格式转换，也可以使用vue-json-viewer插件

<template>
  <el-dialog class="cancelOpinions" :title="msg.title" :visible.sync="showDialog" :destroy-on-close="true" :close-on-click-modal="false"
    :width="dialogWidth" @close="handleClose" append-to-body>
    <div class="map_info">
      <vue-json-viewer :value="formInline.info" :expand-depth="depth"></vue-json-viewer>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import vueJsonViewer from 'vue-json-viewer'
export default {
  props: {
    addVisible: {
      type: Boolean,
      default: false
    },
    msg: {
      type: Object,
      default: () => { }
    }
  },
  components: { vueJsonViewer },
  data() {
    return {
      showDialog: false,
      loading: false,
      dialogWidth: '800px',
      title: 'map_info',
      formInline: {
        info: "",
      },
      depth: 1,
    }
  },
  mounted() {
    this.showDialog = this.addVisible
  },
  methods: {
    // 弹出框关闭后触发
    handleClose() {
      // 子组件调用父组件方法，并传递参数
      this.$emit('moreShow', false)
    },
  },
  watch: {
    // 监听 showAddmoreVisible 改变
    addVisible(val) {
      this.showDialog = val
    },
    msg() {
      this.formInline.map_info = this.msg || {};
    }
  },
}
</script>
<style>
.cancelOpinions .el-dialog__header {
  text-align: left;
}

.cancelOpinions .el-dialog__body {
  padding: 0 32px;
}

.cancelOpinions .el-textarea__inner {
  padding: 9px 16px;
}

.cancelOpinions .el-form {
  margin: 0;
}

.cancelOpinions .el-form .el-input,
.cancelOpinions .el-form .el-select,
.cancelOpinions .el-form .el-textarea {
  width: 80px 0%;
}

.cancelOpinions .el-form--inline .el-form-item {
  width: 48%;
}

.cancelOpinions .el-form--inline .el-form-item__label {
  margin: 0;
  text-align: left;
}

#containerMap {
  width: 100%;
  height: 300px;
  border-radius: 4px;
  box-sizing: border-box;
}

.map_info {
  height: calc(70vh - 130px);
  overflow: auto;
}
</style>

下面再看下，json字符串看起来是不是清爽多了，数据格式一目了然：