codemirror行号

要在 CodeMirror 编辑器中显示行号，需要在初始化编辑器时设置 lineNumbers 选项为 true，如下所示：

var editor = CodeMirror.fromTextArea(document.getElementById("myTextArea"), {
  lineNumbers: true
});

这将在编辑器左侧显示行号。如果需要定制行号的样式，可以使用 CSS 来修改 .CodeMirror-linenumber 类的样式。

相关问题

vue-codemirror 显示行号

怎么设置？

可以在 Vue 组件的 template 中添加以下代码：

<template>
  <div>
    <codemirror
      v-model="code"
      :options="{
        lineNumbers: true
      }"
    />
  </div>
</template>

其中，lineNumbers: true 表示开启行号显示。可以根据需要进行修改。

el-input和codemirror结合显示行号

在Vue.js中，`el-input`是一个基础的输入框组件，而`codemirror`则是一个强大的富文本编辑器，常用于编写代码的场景，它默认包含行号功能。将这两个组件结合起来，你可以创建一个既能输入文本又能展示代码格式，并且有行号的实时反馈的输入框。

首先，你需要安装`element-ui`和`codemirror`库，可以通过npm或yarn添加依赖：

npm install element-ui codemirror @vue/codemirror-component

然后，在Vue组件中，可以这样做：

<template>
  <div>
    <el-input v-model="code" :ref="inputRef"></el-input>
    <div class="code-mirror">
      <codemirror :value="code" :options="mirrorOptions" />
    </div>
  </div>
</template>

<script>
import { CodeMirrorComponent } from '@vue/codemirror-component'
import 'codemirror/mode/javascript/javascript'

export default {
  components: {
    CodeMirrorComponent
  },
  data() {
    return {
      code: '',
      inputRef: null,
      mirrorOptions: {
        mode: 'javascript',
        lineNumbers: true, // 显示行号
        lineWrapping: true, // 自动换行
      }
    }
  },
  mounted() {
    this.inputRef.codemirror = CodeMirror(this.$refs.inputRef.$el, this.mirrorOptions)
  },
  watch: {
    code(newCode) {
      this.inputRef.codemirror.setValue(newCode) // 更新输入框内容的同时更新CodeMirror实例
    }
  }
}
</script>

<style scoped>
.code-mirror {
  margin-top: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>