怎么在 vue 文件直接引入 markdown 进行解析
发布于 4 个月前 作者 vxhly 2967 次浏览 来自 问答

image.png 我想在 VersionLog.vue 文件 直接引入 markdown ,要怎么做, 在网上找的都是 markdown 编辑器,我不要那种的,我需要能直接解析掉,不用编辑器 VersionLog.vue

<template lang="html">
 <div class="" id='editor'>

   <!-- Log start -->
   <div class="article" v-html="compiledMarkdown"></div>
   <!-- Log end -->

 </div>
</template>

<script>
import marked from 'marked'
export default {
 name: 'Log',
 data () {
 return {
  context: ""
 }
},

computed:{
  compiledMarkdown () {
    return marked(this.context, { sanitize: true })
  }
}
}
</script>

15 回复

markdown–loader

来自酷炫的 CNodeMD

@liuqipeng417 之后,怎么写?webpack 需要进行相关配置么?

有人会用 fs 来读取 markdown 文件么

直接在编译阶段就解析成 html 的话,就搜 xx-loader

1,如果你要自己对markdown 文本进行编译处理,可以直接使用text-loader; 2,如果你需要webpack直接帮你将markdown直接编译成html,可直接使用markdown-loader; 3,如果你需要2且编译后的html支持vue,可以使用vue-markdown-loader;

end……

@x-cold sorry,没看懂,我现在还是比较倾向用 fs 读成字符串,然后在使用,但是,在 vue 文件 import fs 直接报错,不知道该怎么写

那你直接在webpack配置text-loader,然后import xxx from ‘xxx.md’;

xxx 即为你读取的markdown字符串

@vxhly 前端是不可以使用fs模块吧

falost

@x-cold 不行哦,image.png还是有错

@vxhly 应该是loader没配置好

@178220709 所以该怎么配置?

x-cold 7楼 感谢!

1)安装npm install text-loader --save-dev 2)在webpack.config.js中添加 { test: /.md$/, loader: ‘text-loader’ } 然后通过import XXX from ‘xxx.md’,即可正确获取.md文件中的md原始内容。 3)安装md解析器如vue-markdown,npm install vue-markdown --save-dev template: <vue-markdown>{{msg}}</vue-markdown> js:
import VueMarkdown from 'vue-markdown’ import xxx from 'XXX.md’ export default { components: { VueMarkdown }, data () { return { msg: xxx } } }

回到顶部