vue中使用highlight.js设置行号

### 回答1：
在 Vue 中使用 highlight.js 设置行号的方法如下：

1. 安装 highlight.js 和 v-highlight.js Vue 插件：

npm install highlight.js v-highlight.js --save

2. 在 main.js 中引入 highlight.js 并注册 v-highlight.js 插件：

import hljs from 'highlight.js'
import VueHighlightJS from 'v-highlight.js'
Vue.use(VueHighlightJS, {
  languages: {
    js: hljs.javascript,
    html: hljs.xml,
    css: hljs.css
  }
})

3. 在组件中使用 v-highlight 指令，并设置 line-numbers 类名：

<template>
  <div>
    <pre v-highlight="code" class="line-numbers">{{ code }}</pre>
  </div>
</template>

<script>
export default {
  data () {
    return {
      code: '<div>hello world</div>'
    }
  }
}
</script>

4. 在 CSS 中设置行号样式：

.line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}

.line-numbers > span {
  pointer-events: none;
  position: absolute;
  left: -3.8em;
  width: 3.2em;
  text-align: right;
  padding-right: 0.8em;
  counter-increment: linenumber;
}

.line-numbers > span:before {
  content: counter(linenumber);
  color: #999;
}

注意：如果要支持其它语言需要在第二步中引入对应的语言高亮库。

### 回答2：
在Vue中使用highlight.js设置行号相对简单。首先，我们需要在项目中安装highlight.js库。可以通过npm或yarn进行安装。安装完成后，我们可以在Vue的组件中引入highlight.js。

npm install highlight.js

然后，在Vue的组件中引入highlight.js。

import hljs from 'highlight.js';
import 'highlight.js/styles/monokai-sublime.css';

接下来，在Vue组件的mounted钩子函数中进行highlight.js的初始化和设置行号。

mounted() {
  const codes = document.getElementsByTagName('code');
  for (let i = 0; i < codes.length; i++) {
    const highlightCode = codes[i];
    hljs.lineNumbersBlock(highlightCode);
  }
}

在HTML中，我们可以使用`<code>`标签将需要高亮显示的代码包裹起来。示例代码如下：

<template>
  <div>
    <pre><code class="javascript">function helloWorld() {
  console.log('Hello World');
}</code></pre>
  </div>
</template>

最后，在组件的样式中，我们需要为highlight.js设置一些样式。

pre {
  padding: 10px;
  background-color: #f7f7f7;
}

code {
  font-size: 14px;
  color: #333;
}

这样，我们使用highlight.js设置行号的功能就完成了。当组件被渲染时，highlight.js会自动对`<code>`标签中的代码进行高亮显示，并显示行号。

### 回答3：
在Vue中使用highlight.js设置行号需要进行一下几个步骤：

1. 首先，从highlight.js官方网站（https://highlightjs.org/）下载所需要的highlight.js插件文件。

2. 将下载得到的highlight.js插件文件放置到你的Vue项目的某个目录中，比如/src/plugins/。

3. 在Vue项目的入口文件main.js中导入highlight.js插件。可以使用import语句将highlight.js插件导入：

import hljs from 'path/to/highlight.js';

4. 接下来，在Vue组件中需要使用行号的地方，可以使用`v-highlightjs`指令来设置行号。例如，如果你想要在一个`<pre>`标签中的代码块中设置行号，可以像下面这样使用指令：

<pre v-highlightjs>
    <code>
        // 在这里写你的代码
    </code>
</pre>

5. 在Vue组件的`mounted`钩子函数中调用highlight.js的初始化函数，以便在页面加载完成后自动设置行号。可以使用以下代码：

mounted() {
    hljs.initHighlighting.called = false;
    hljs.initHighlighting();
}

6. 最后，在Vue组件的样式文件中添加一些CSS样式来设置行号的显示。这是可选的，你可以根据自己的需求自定义样式。例如，可以使用以下样式：

pre [class*="hljs-line"] {
    position: relative;
    padding-left: 3.8em;
    counter-increment: linenumber;
}

pre [class*="hljs-line"]::before {
    content: counter(linenumber);
    position: absolute;
    left: 0.5em;
    color: #999;
    font-size: 0.8em;
}

以上就是在Vue中使用highlight.js设置行号的步骤。通过这些步骤，你可以在Vue项目中方便地使用highlight.js插件并设置行号来高亮显示代码。