npm install vue-markdown npm install github-markdown-css npm install highlight.js 2、在main.js文件中引入github-markdown-css样式 import 'github-markdown-css/github-markdown.css'; 3、在test.vue文件中使用markdown插件 <template>
1.1 使用md格式文件解析 md->html vue-cli3 中直接将.md文件转为 html。我用到的是 webpack 的vue-markdown-loader,这个 loader 可以直接将.md文件转换为 vue 的组件,然后可以直接在页面中使用,非常的方便。 安装 npm i vue-markdown-loader -D npm i vue-loader vue-template-compiler -D # 样式 npm ...
<template><div><VueMarkdown>{{ mdCont }}</VueMarkdown></div></template><script>importVueMarkdownfrom'vue-markdown';exportdefault{components:{VueMarkdown},data() {return{mdCont:'### 绘制一个矩形的思路我们这里绘制矩形\n会使用到canvas.strokeRect(x,y, w, h)方法绘制一个描边矩形 { ... } 第二部分:提取其中的 demo 为组件,https://github.com/blank-x/kv/blob/master/build/markdown-loader/...
Vue.use(VueMarkdown); varvm=newVue({ el:"body" }); </script> NPM $ npm install --save vue-markdown Yarn $ yarn add vue-markdown --save CommonJS varVueMarkdown=require('vue-markdown'); newVue({ components:{ 'vue-markdown':VueMarkdown ...
这个loader 接收一个参数,里面包含一个 markdown-it 实例,作者用它来把 markdown 解释成 html。 得到html 后将之包裹在 template 标签内,返回。 `<template>\n` + `<div class="markdown">${html}</div>\n` + `</template>\n` 主要过程其实就这两步。当然,vuepress 还在 markdownLoader 里做了很多...