### 回答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 hl
js from '
highlight.
js';
export default {
data() {
return {
code: "function helloWorld() {\n console.log('Hello, World!');\n}"
};
},
mounted() {
hl
js.
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'主题：
```javascript
import hl
js from '
highlight.
js/lib/core';
import javascript from '
highlight.
js/lib/languages/javascript';
import '
highlight.
js/styles/atom-one-dark.css';
hl
js.registerLanguage('javascript', javascript);
```
然后，在需要高亮代码块的地方，我们可以
使用`<pre>`和`<code>`标签包装代码，并添加一个类名以指定要高亮的语言。例如，我们将代码块的类名设置为'hl
js'和'javascript'：
```html
<pre><code class="hl
js javascript">
// 你的代码
</code></pre>
```
此时，在页面
中显示的代码块将会被
highlight.
js高亮。
接下来，让我们添加行号。我们可以
使用CSS的`::before`伪元素来实现行号效果。首先，我们给包含代码块的`<pre>`标签的类名添加一些样式：
```css
.pre-container {
position: relative;
}
.pre-container .line-number {
position: absolute;
left: 0;
top: 0;
width: 20px;
padding-right: 10px;
text-align: right;
}
```
然后，我们可以在代码块
中添加行号。我们可以通过
Vue的循环指令将行号与代码内容一起渲染出来。在组件的模板部分
中，修改代码如下：
```html
<pre class="pre-container">
<code class="hl
js javascript">
<span v-for="line in codeLines" :key="line" class="line">
<span class="line-number">{{ line }}</span>
<!-- 这里是你的代码 -->
</span>
</code>
</pre>
```
这样，我们就可以在
Vue2
中使用highlight.
js并添加行号。以上是简单的实现示例，你可以根据自己的需求和样式来进一步修改和优化。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
