在vue2中使用highlight.js没有行号

### 回答1：
在 Vue 2 中使用 highlight.js 没有行号，可以尝试以下方法：

1. 在 highlight.js 的样式文件中添加行号样式。
2. 使用第三方插件 vue-highlightjs-line-numbers，它可以在 Vue 中轻松地添加行号。
3. 手动在组件中添加行号，可以使用 JavaScript 将行号插入到代码块中。

如果你使用的是 Vue-CLI, 可以在全局的main.js中引入highlight.js的样式文件，再添加行号样式。

### 回答2：
在Vue2中使用highlight.js时，默认情况下是没有行号显示的。highlight.js是一个用于代码语法高亮的库，它的目的是突出显示代码中的关键字和语法，而不是提供行号功能。

如果你希望在代码块中显示行号，你可以采取一些额外的操作。以下是一种可能的解决方案：

1. 首先，你需要在Vue项目中安装highlight.js。你可以使用npm或yarn来安装：

npm install highlight.js
或
yarn add highlight.js

2. 在你的Vue组件中引入highlight.js，并使用它来高亮代码。你可以在你的Vue组件中导入highlight.js的样式文件，然后在适当的位置使用`<pre>`和`<code>`标签来包裹要高亮的代码。例如：

<template>
  <div>
    <pre><code class="javascript">{{ code }}</code></pre>
  </div>
</template>

<script>
import 'highlight.js/styles/default.css';
import hljs from 'highlight.js';

export default {
  data() {
    return {
      code: "function helloWorld() {\n  console.log('Hello, World!');\n}"
    };
  },
  mounted() {
    hljs.highlightBlock(this.$el.querySelector('code'));
  }
}
</script>

<style scoped>
pre {
  counter-reset: linenumber; /* 为行号计数器设置初始值 */
}

pre code:before {
  display: block;
  content: counter(linenumber); /* 行号显示内容 */
  counter-increment: linenumber; /* 递增行号计数器 */
  margin-right: 10px; /* 行号与代码的间距 */
}
</style>

这个例子中，我们引入了highlight.js的默认样式，并且在`mounted`生命周期钩子函数中使用了highlight.js将代码块高亮显示。同时，我们在`<pre>`和`<code>`标签上添加了一些样式，并使用CSS的`counter()`函数来显示行号。

这样，你就可以实现在Vue2中高亮显示代码并显示行号的效果了。希望对你有所帮助！

### 回答3：
在Vue2中使用highlight.js时，通常不会自动包含行号。然而，我们可以通过一些额外的步骤来实现这个功能。

首先，我们需要在项目中引入highlight.js和所需的语言或风格。可以通过npm包管理器安装highlight.js：

npm install highlight.js --save

接下来，在需要使用highlight.js的地方，我们可以创建一个组件或直接在页面中引入需要高亮的代码块。假设我们在组件中引入highlight.js。

在Vue组件的脚本部分，我们首先需要导入highlight.js和需要的语言或风格。例如，我们导入'javascript'语言和'atom-one-dark'主题：

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/atom-one-dark.css';

hljs.registerLanguage('javascript', javascript);

然后，在需要高亮代码块的地方，我们可以使用`<pre>`和`<code>`标签包装代码，并添加一个类名以指定要高亮的语言。例如，我们将代码块的类名设置为'hljs'和'javascript'：

<pre><code class="hljs javascript">
// 你的代码
</code></pre>

此时，在页面中显示的代码块将会被highlight.js高亮。

接下来，让我们添加行号。我们可以使用CSS的`::before`伪元素来实现行号效果。首先，我们给包含代码块的`<pre>`标签的类名添加一些样式：

.pre-container {
  position: relative;
}

.pre-container .line-number {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  padding-right: 10px;
  text-align: right;
}

然后，我们可以在代码块中添加行号。我们可以通过Vue的循环指令将行号与代码内容一起渲染出来。在组件的模板部分中，修改代码如下：

<pre class="pre-container">
  <code class="hljs javascript">
    <span v-for="line in codeLines" :key="line" class="line">
      <span class="line-number">{{ line }}</span>
      <!-- 这里是你的代码 -->
    </span>
  </code>
</pre>

这样，我们就可以在Vue2中使用highlight.js并添加行号。以上是简单的实现示例，你可以根据自己的需求和样式来进一步修改和优化。