mavon-editor代码显示行号
时间: 2023-07-10 15:43:37 浏览: 110
要在 mavon-editor 中显示代码行号,可以在使用 `<mavon-editor>` 组件时,设置 `lineNumbers` 属性为 `true`,如下所示:
```html
<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代码块显示行号
mavon-editor是一个用于Vue.js的Markdown编辑器,它支持显示代码块的行号。要在mavon-editor中显示代码块的行号,您需要使用Vue Prism编辑器作为mavon-editor的代码块解析器。Vue Prism编辑器是一个简单的代码编辑器,它提供了语法突出显示和行号功能。
您可以按照以下步骤来实现在mavon-editor中显示代码块的行号:
1. 首先,确保您已经正确导入mavon-editor和Vue Prism编辑器的相关文件。
2. 在mavon-editor的配置中,将代码块解析器设置为Vue Prism编辑器。例如:
```
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import VuePrismEditor from 'vue-prism-editor'
Vue.use(mavonEditor)
Vue.use(VuePrismEditor)
```
3. 在您的代码中,使用`v-pre`指令来禁止对代码块进行进一步解析。例如:
```
<mavon-editor v-model="markdownText" :preview-style="previewStyle" :subfield="false" :default-open="true">
<template v-slot:code="{ code }">
<vue-prism-editor v-pre class="line-numbers" :lineNumbers="true" :code="code"></vue-prism-editor>
</template>
</mavon-editor>
```
通过以上步骤,您可以在mavon-editor中显示带有行号的代码块。
mavon-editor 代码显示行号 添加:lineNumbers="true" 无效
如果在 `mavon-editor` 组件中设置 `lineNumbers="true"` 无效,可能是因为该属性的名称应该为 `line-numbers`,而不是 `lineNumbers`。
以下是正确的示例:
```html
<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"`,这样就能正确显示代码行号了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)