vue highlight.js显示行号

在Vue中使用highlight.js显示行号，你可以按照以下步骤操作：

1. 首先，通过npm安装highlight.js和vue-highlight.js：

npm install highlight.js vue-highlight.js

2. 在你的Vue组件中引入highlight.js和vue-highlight.js，并注册该组件：

import Vue from 'vue';
import VueHighlightJS from 'vue-highlight.js';
import 'highlight.js/styles/default.css';

Vue.use(VueHighlightJS);

3. 在需要显示行号的代码块上使用`v-highlightjs`指令，并设置行号显示的属性：

<template>
  <div>
    <pre v-highlightjs="{ lineNumber: true }">
      <code class="javascript">
        // 你的代码
      </code>
    </pre>
  </div>
</template>

现在你的代码块将会显示行号。

相关问题

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插件并设置行号来高亮显示代码。

在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并添加行号。以上是简单的实现示例，你可以根据自己的需求和样式来进一步修改和优化。