代码生成预览支持高亮显示

ruoyi-ui/src/main.js

@@ -19,8 +19,11 @@ import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
 import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
 import Pagination from "@/components/Pagination";
-//自定义表格工具扩展
+// 自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar"
+// 代码高亮插件
+import hljs from 'highlight.js'
+import 'highlight.js/styles/github-gist.css'
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -50,6 +53,7 @@ Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
 
 Vue.use(permission)
+Vue.use(hljs.vuePlugin);
 
 /**
  * If you don't want to use mock-server

ruoyi-ui/src/views/tool/gen/index.vue

@@ -165,7 +165,7 @@
           :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
           :key="key"
         >
-          <pre>{{ value }}</pre>
+          <highlightjs autodetect :code="value" />
         </el-tab-pane>
       </el-tabs>
     </el-dialog>