【Vue开发实战】实战篇#45：如何构建可交互的组件文档让代码高亮的显示在页面

说明

【Vue 开发实战】学习笔记。

效果

要实现这个代码的显示

使用 raw-loader 实现代码输出到页面

https://github.com/webpack-contrib/raw-loader

npm install raw-loader --save-dev


我们不走 webpack 的配置&＃xff0c;使用下面一种方式

import chartCode from "!!raw-loader!&＃64;/components/Chart.vue";


我们在分析页添加 Chart.vue 的代码

<template><div>{{$t(&＃39;message&＃39;)["app.dashboard.analysis.timeLabel"]}}<a-date-picker/><Chart :option&＃61;"chartOption" style&＃61;"width: 600px; height: 400px;"/>{{chartCode}}div>
template><script>
import Chart from "&＃64;/components/Chart.vue";
import request from "&＃64;/utils/request.js";
import chartCode from "!!raw-loader!&＃64;/components/Chart.vue";export default {data() {return {chartOption: {},chartCode}},components: {Chart},mounted() {this.getChartData();this.interval &＃61; setInterval(() &＃61;> {this.getChartData();}, 3000);},beforeDestroy() {clearInterval(this.interval);},methods: {getChartData() {request({url: "/api/dashboard/chart",method: "get",params: {id: "kaimo313"}}).then(response &＃61;> {this.chartOption &＃61; {title: {text: &＃39;ECharts 入门示例&＃39;},tooltip: {},legend: {data: [&＃39;销量&＃39;]},xAxis: {data: [&＃39;衬衫&＃39;, &＃39;羊毛衫&＃39;, &＃39;雪纺衫&＃39;, &＃39;裤子&＃39;, &＃39;高跟鞋&＃39;, &＃39;袜子&＃39;]},yAxis: {},series: [{name: &＃39;销量&＃39;,type: &＃39;bar&＃39;,data: response.data}]}})}},
};
script><style>style>


我们可以看到效果已经出来了&＃xff0c;不过没有样式

使用 vue-highlightjs 做代码样式处理

https://github.com/metachris/vue-highlightjs

npm install --save vue-highlightjs


在 main.js 里添加下面代码&＃xff1a;主题可以自己查找&＃xff1a;https://github.com/highlightjs/highlight.js/blob/main/src/styles&＃xff0c;比如这里我使用了 monokai-sublime 的主题

import VueHighlightJS from &＃39;vue-highlightjs&＃39;;
import &＃39;highlight.js/styles/monokai-sublime.css&＃39;;Vue.use(VueHighlightJS);


分析页添加这个高亮的显示

<pre v-highlightjs><code class&＃61;"html">{{chartCode}}code>pre>


效果如下&＃xff1a;