mavon-editor代码显示行号

要在 mavon-editor 中显示代码行号，可以在使用 `<mavon-editor>` 组件时，设置 `lineNumbers` 属性为 `true`，如下所示：

<template>
  <mavon-editor v-model="markdown" :lineNumbers="true"></mavon-editor>
</template>

<script>
import 'mavon-editor/dist/css/index.css'
import Vue from 'vue'
import mavonEditor from 'mavon-editor'

Vue.use(mavonEditor)

export default {
  data() {
    return {
      markdown: ''
    }
  }
}
</script>

设置 `lineNumbers` 属性为 `true` 后，就可以在 mavon-editor 中显示代码行号了。

相关问题

mavon-editor 代码显示行号 添加:lineNumbers="true" 无效

如果在 `mavon-editor` 组件中设置 `lineNumbers="true"` 无效，可能是因为该属性的名称应该为 `line-numbers`，而不是 `lineNumbers`。

以下是正确的示例：

<template>
  <mavon-editor v-model="markdown" :line-numbers="true"></mavon-editor>
</template>

<script>
import 'mavon-editor/dist/css/index.css'
import Vue from 'vue'
import mavonEditor from 'mavon-editor'

Vue.use(mavonEditor)

export default {
  data() {
    return {
      markdown: ''
    }
  }
}
</script>

在上面的示例中，将 `lineNumbers="true"` 改为了 `:line-numbers="true"`，这样就能正确显示代码行号了。

mavon-editor 代码显示行号 添加:lineNumbers="true" :line-numbers="true" 无效

如果在 `mavon-editor` 组件中设置 `lineNumbers="true"` 和 `:line-numbers="true"` 都无效，可能是因为你的版本过低，需要升级到最新版本才能支持该功能。

你可以升级到最新版本的 `mavon-editor`，并按照以下方式设置 `line-numbers` 属性：

<template>
  <mavon-editor v-model="markdown" :line-numbers="true"></mavon-editor>
</template>

<script>
import 'mavon-editor/dist/css/index.css'
import Vue from 'vue'
import mavonEditor from 'mavon-editor'

Vue.use(mavonEditor)

export default {
  data() {
    return {
      markdown: ''
    }
  }
}
</script>

如果你已经升级到最新版本，并按照以上方式设置了 `line-numbers` 属性，但仍然无效，请检查是否存在其它代码或样式对该属性进行了覆盖，或者在其它地方对样式进行了重置，导致该属性无效。