[Question] 关于居中布局在页面上解析错误的问题

[CaptainZZY]

各位大佬，为什么在markdown里面的居中布局在页面上会变成这个样子啊，感觉像是没被解析成功一样，求指教

[KegFmn]

各位大佬，为什么在markdown里面的居中布局在页面上会变成这个样子啊，感觉像是没被解析成功一样，求指教

我也是，一开始我是另外使用了highlight依赖解析markdown，后面我自己吧mavon-editor改成只有预览模式去解析就可以了

[Arctic2333]

各位大佬，为什么在markdown里面的居中布局在页面上会变成这个样子啊，感觉像是没被解析成功一样，求指教

我也是，一开始我是另外使用了highlight依赖解析markdown，后面我自己吧mavon-editor改成只有预览模式去解析就可以了

我也是把工具条什么的去掉 不可编辑 预览模式 就假装渲染好了 毕设随便一点

[CaptainZZY]

各位大佬，为什么在markdown里面的居中布局在页面上会变成这个样子啊，感觉像是没被解析成功一样，求指教

我也是，一开始我是另外使用了highlight依赖解析markdown，后面我自己吧mavon-editor改成只有预览模式去解析就可以了

请问一下大佬是在哪改成预览模式的呀？

[Arctic2333]

各位大佬，为什么在markdown里面的居中布局在页面上会变成这个样子啊，感觉像是没被解析成功一样，求指教

我也是，一开始我是另外使用了highlight依赖解析markdown，后面我自己吧mavon-editor改成只有预览模式去解析就可以了

请问一下大佬是在哪改成预览模式的呀？

<mavon-editor
  ref="md"
  v-model="notebook.markdown"
  :subfield="subfield"
  :default-open="defaultOpen"
  :editable="editable"
  :toolbars-flag="toolbarsFlag"
  style="min-height: 800px ;min-width: 100%;margin-top: 15px"
/>

data（）里面： subfield: false, defaultOpen: 'preview', editable: false, toolbarsFlag: false

[CaptainZZY]

各位大佬，为什么在markdown里面的居中布局在页面上会变成这个样子啊，感觉像是没被解析成功一样，求指教

我也是，一开始我是另外使用了highlight依赖解析markdown，后面我自己吧mavon-editor改成只有预览模式去解析就可以了

请问一下大佬是在哪改成预览模式的呀？

<mavon-editor
  ref="md"
  v-model="notebook.markdown"
  :subfield="subfield"
  :default-open="defaultOpen"
  :editable="editable"
  :toolbars-flag="toolbarsFlag"
  style="min-height: 800px ;min-width: 100%;margin-top: 15px"
/>

data（）里面： subfield: false, defaultOpen: 'preview', editable: false, toolbarsFlag: false

谢谢大佬，我去试试看

[JerryWang24]

可以使用markdownIt对象的render方法渲染出来，记得需要添加相关样式

import { mavonEditor } from 'mavon-editor' const markdownIt = mavonEditor.getMarkdownIt() markdownIt.render(content)

样式 .markdown-body strong{ font-weight: bolder; } .markdown-body .hljs-center { text-align: center; } .markdown-body .hljs-right { text-align: right; } .markdown-body .hljs-left { text-align: left; } .markdown-body .hljs { overflow: auto; }

[ling-1]

原生的markdown不支持"居中对齐，左右对齐，上下角标“等语法，mavon-editor基于 markdown-it与其插件实现的，而 markdown-it只支持解析原生markdown，对于“ 居中对齐，左右对齐，上下角标”这些复杂语法则是依靠markdown-it的插件实现的。因此解析需要引入markdown-it插件，下面是一个简单示例

 const MarkdownIt = require('markdown-it')()
    .use(require('markdown-it-katex-external'))
    .use(require('markdown-it-emoji'))
    .use(require('markdown-it-container'), 'hljs-center')  // 容器插件
    .use(require('markdown-it-container'), 'hljs-left')
    .use(require('markdown-it-container'), 'hljs-right')
    .use(require('markdown-it-sup'))                       // 上角标插件
    .use(require('markdown-it-sub'))                       // 下角标插件
    .use(require('markdown-it-footnote'))                  // 脚注插件
    .use(require('markdown-it-abbr'))                      // 缩写插件
    .use(require('markdown-it-ins'))                       // 插入插件
    .use(require('markdown-it-mark'))                      // 标记插件 

同时还需要在 "main.js"引入mavon-editor样式并绑定在 v-html上，外层可自定义自己的样式。如还有疑问可邮件联系我，可当天回复。