精华内容
下载资源
问答
  • vue-markdown加载器 使用markdown-it将Markdown文件转换为Vue组件。 例子 现场演示 安装 # For Vue1 npm i vue-markdown-loader@0 -D # For Vue2 npm i vue-markdown-loader -D npm i vue-loader vue-template-...
  • 基于vue-markdown开放式项目的二次开发 主要增加了一个支持图片上传接口方法 1.简介 一款使用marked和highlight.js开发的一款markdown编辑器,目前只支持在vue项目中使用。 编辑器涵盖了常用的markdown编辑器功能,...
  • <p>So last night I tried swapping out <em>vue-markdown</em> with <em>vue-marked</em> as a mixin and those files are 10x lighter. <p>Is there some crucial functionality you want to keep from vue-...
  • vue-markdown> <material-input></material-input> </vue-markdown> </code></pre> <p>result: undefined</p><p>该提问来源于开源项目:miaolz123/vue-markdown</p></div>
  • <div><p>I have the same issue as https://github.com/miaolz123/vue-markdown/issues/6. </p> <pre><code>json "vue": "^2.4.2", "vue-markdown"...miaolz123/vue-markdown</p>
  • <div><p>如题,两者能合着用最好了 不是vuep那种编辑实时预览</p><p>该提问来源于开源项目:QingWei-Li/vue-markdown-loader</p></div>
  • Vue- Markdown 使用大全

    千次阅读 2021-02-11 10:57:27
    html1.2 字符串解析方案marked 方案1、安装marked2、使用vue-markdown 方案使用1.3 Markdown 优化方案1. markdown 样式方案-github-markdown-css2. 代码高亮方案-highlight.js1) 安装2) 编码3) 使用4) 封装成插件...

    1. MarkDown 解析器

    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 i github-markdown-css -D
    npm i highlight.js -D
    

    配置

    // vue.config.js 如果没有就在项目根目录新建
    module.exports = {
      chainWebpack: config => {
        config.module.rule('md')
          .test(/\.md/)
          .use('vue-loader')
          .loader('vue-loader')
          .end()
          .use('vue-markdown-loader')
          .loader('vue-markdown-loader/lib/markdown-compiler')
          .options({
            raw: true
          })
      }
    }
    

    使用

    <template>
    	<!-- class markdown-body 必须加,否则标签样式会出现问题 -->
      <div class="markdown-body">
        <markdown />
      </div>
    </template>
    
    <script>
    // 引入 markdown 文件,引入后是一个组件,需要在 components 中注册
    import markdown from '@/assets/ApiDocument.md'
    // 代码高亮
    import 'highlight.js/styles/github.css'
    // 其他元素使用 github 的样式
    import 'github-markdown-css'
    export default {
      components: {
        markdown
      },
    }
    </script>
    

    1.2 字符串解析方案

    marked 方案

    1、安装marked

    npm install marked
    

    2、使用

    <div v-html="readmeContent">
     
    </div>
     
    <script>
      //引入marked
      import marked from 'marked'
      
      export default {
        methods: {
          getMardownFileContent(data) {
    		//处理markdown数据,data为markdown文件读出的字符串
    		this.readmeContent = marked(data || '', {
    		  sanitize: true
    		}); 
        },
      }
      
    </script>
    

    vue-markdown 方案

    npm install vue-loader vue-template-compiler -D
    npm install --save vue-markdown
    

    使用

    import VueMarkdown from 'vue-markdown'
    export default {
      components: {
        VueMarkdown // 注入组件
      },
      data () {
        return { 
          value: "### sdsa" // value的值是要解析的markdown数据
        }
      }
    }
    
    

    使用注入的组件

    <VueMarkdown :source="value"></VueMarkdown>
    

    1.3 Markdown 优化方案

    1. markdown 样式方案-github-markdown-css

    2. 代码高亮方案-highlight.js

    1) 安装

    npm install highlight.js
    

    2) 编码

    Vue自定义指令 文档

    // Vue-cli生成的工程文件的src/main.js
    import hljs from 'highlight.js'
    import 'highlight.js/styles/googlecode.css' //样式文件
    Vue.directive('highlight',function (el) {
      let blocks = el.querySelectorAll('pre code');
      blocks.forEach((block)=>{
        hljs.highlightBlock(block)
      })
    })
    

    3) 使用

    <p v-html="markdownhtml" v-highlight></p>
    

    到这里我们就打工告成了。

    4) 封装成插件

    编写插件
    // highlight.js
    import Vue from 'vue'
    import Hljs from 'highlight.js'
    import 'highlight.js/styles/googlecode.css'
    let Highlight = {}
    Highlight.install = function (Vue, options) {
      Vue.directive('highlight', function (el) {
        let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block) => {
          Hljs.highlightBlock(block)
        })
      })
    }
    export default Highlight
    
    使用插件
    import Highlight from 'path/to/Highlight.js'
    Vue.use(Highlight)
    

    3. 代码行数显示方案-highlightjs-line-numbers.js

    2. Markdown 编辑器-mavonEditor

    官网

    https://github.com/hinesboy/mavonEditor
    

    安装

    npm install mavon-editor --save
    

    使用 Vue

    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
        // use
    Vue.use(mavonEditor)
    

    3. 富文本编辑器解析-vue-quill-editor

    官网

    https://github.com/surmon-china/vue-quill-editor
    

    使用

    可以参考一下方案

    https://blog.csdn.net/liuqiao0327/article/details/107126784/

    展开全文
  • <code>npm i --save vue-markdown</code></p> <p>In my code Vue Typescript I have: <pre><code> <template> <vue-markdown>i am a ~~tast~~ **test**.</vue-markdown> </template> <...
  • <div><p>When i attach a class to the <code>vue-markdown</code> component it is not being styled accordingly. <p>Example: <pre><code> <template lang="pug"> vue-markdown(:source=...
  • Vue-Markdown为你实现在Vue应用中进行Markdown的解析和渲染。Markdown简介Vue-Markdown,是 miaolz123 在 Github 上开源的Markdown解析和渲染的Vue组件,项目仓库位于 https://github.com/miaolz123/vue-markdown,...

    想像Github项目主页渲染READMD.md那样渲染Markdown文本吗?Vue-Markdown为你实现在Vue应用中进行Markdown的解析和渲染。

    4a66cfa693058d32efb129bede3c755a.png

    Markdown

    简介

    Vue-Markdown,是 miaolz123 在 Github 上开源的Markdown解析和渲染的Vue组件,项目仓库位于 https://github.com/miaolz123/vue-markdown,目前版本为 v2.2.4。Vue-Markdown支持丰富的Markdown拓展语法,包括表格、代码语法高亮、定义列表、GFM任务列表、Katex等,功能丰富,可以进行配置选择,且使用简单,是在Vue应用中进行Markdown富文本渲染展示的可靠助手。

    b857cb3533452b0e082c91a707da11f7.png

    Markdown

    安装

    Vue-Markdown使用简单,可以使用NPM安装:

    npm install --save vue-markdown

    或Yarn安装:

    yarn add vue-markdown --save

    示例

    Vue-Markdown使用简单,我们来看一个基本的例子:

      i am a ~~tast~~ **test**.

    在该例子中,我们引入了VueMarkdown组件,并在Vue中使用,然后,使用vue-markdown定义了可以包括Markdown语法的文本,进行渲染。

    Vue-Markdown提供了一个在线的demo,可以进行不同配置的实时Markdown渲染:

    6e1f2b2841ea28beb9202d7fc0ea816c.png

    Vue-Markdown在线demo

    可以看到,Vue-Markdown对左侧的Markdown语法文本进行渲染,支持基本的Markdown语法,和如Emoji等拓展,默认的样式十分美观,可以直接使用。

    Vue-Markdown提供了丰富的Markdown配置支持,包括:

    • source:渲染的Markdown文件;
    • html:是否支持html渲染;
    • breaks:是否把换行符置换为br;
    • linkify:是否自动转换URL为链接;
    • toc:是否自动生成目录;
    • prerender:渲染之前的回调函数;
    • postrender:渲染之后的回调函数。

    在使用时,可以根据自身需求进行配置,获得最佳的用户体验和性能。

    fe21cc82bc21878adb3b2739a95860c6.png

    Vue-Markdown

    总结

    Vue-Markdown实现了在Vue应用中进行Markdown语法渲染,使得富文本的显示变得更为方便,值得使用。

    展开全文
  • Vue-Markdown为你实现在Vue应用中进行Markdown的解析和渲染。Markdown简介Vue-Markdown,是 miaolz123 在 Github 上开源的Markdown解析和渲染的Vue组件,项目仓库位于 https://github.com/miaolz123/vue-markdown,...

    想像Github项目主页渲染READMD.md那样渲染Markdown文本吗?Vue-Markdown为你实现在Vue应用中进行Markdown的解析和渲染。

    634e8b9c0f1f68911ee6ac9f42d996cf.png

    Markdown

    简介

    Vue-Markdown,是 miaolz123 在 Github 上开源的Markdown解析和渲染的Vue组件,项目仓库位于 https://github.com/miaolz123/vue-markdown,目前版本为 v2.2.4。Vue-Markdown支持丰富的Markdown拓展语法,包括表格、代码语法高亮、定义列表、GFM任务列表、Katex等,功能丰富,可以进行配置选择,且使用简单,是在Vue应用中进行Markdown富文本渲染展示的可靠助手。

    ad7b1cc75efada786fc0397673c84547.png

    Markdown

    安装

    Vue-Markdown使用简单,可以使用NPM安装:

    npm install --save vue-markdown

    或Yarn安装:

    yarn add vue-markdown --save

    示例

    Vue-Markdown使用简单,我们来看一个基本的例子:

      i am a ~~tast~~ **test**.

    在该例子中,我们引入了VueMarkdown组件,并在Vue中使用,然后,使用vue-markdown定义了可以包括Markdown语法的文本,进行渲染。

    Vue-Markdown提供了一个在线的demo,可以进行不同配置的实时Markdown渲染:

    79a6336b57fd3b21d859079d05cfda5a.png

    Vue-Markdown在线demo

    可以看到,Vue-Markdown对左侧的Markdown语法文本进行渲染,支持基本的Markdown语法,和如Emoji等拓展,默认的样式十分美观,可以直接使用。

    Vue-Markdown提供了丰富的Markdown配置支持,包括:

    • source:渲染的Markdown文件;
    • html:是否支持html渲染;
    • breaks:是否把换行符置换为br;
    • linkify:是否自动转换URL为链接;
    • toc:是否自动生成目录;
    • prerender:渲染之前的回调函数;
    • postrender:渲染之后的回调函数。

    在使用时,可以根据自身需求进行配置,获得最佳的用户体验和性能。

    6ea87057729fb1c9dc84a90acc148e4b.png

    Vue-Markdown

    总结

    Vue-Markdown实现了在Vue应用中进行Markdown语法渲染,使得富文本的显示变得更为方便,值得使用。

    展开全文
  • 安装vue-markdown npm install vue-markdown --save 在main.js文件中全局引用 //编辑框 import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' Vue.use(mavonEditor) vue文件使用 ...

    安装vue-markdown

    npm install vue-markdown --save

    在main.js文件中全局引用

    //编辑框
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    Vue.use(mavonEditor)

    vue文件使用

    @save: 按下 ctrl + s 时触发,@change: 当值发生改变时 触发
    <mavon-editor style="min-height: 600px" v-model="value"  @save="saveDoc"
                  @change="updateDoc"/>
    methods:{
      updateDoc(markdown, html) {
        // 此时会自动将 markdown 和 html 传递到这个方法中
        console.log("markdown内容: " + markdown);
        console.log("html内容:" + html);
      },
      saveDoc(markdown, html) {
        // 此时会自动将 markdown 和 html 传递到这个方法中
        console.log("markdown内容:" + markdown);
        console.log("html内容:" + html);
      }
    }

    测试结果:

     

    展开全文
  • 项目中遇到了需要单独加载某个 markdown 文件显示在页面中,类似于操作指引的感觉,于是找到了 vue-markdown-loader 这个工具,觉得很好用,于是我打算开个专题看一下里面都做了些什么,有助于对 webpack loader 的...
  • 一个可以自定义编辑和渲染的Vue-Markdown组件, 基于simplemde Github: github.com/yansenlei/v… Demo: jsfiddle.net/leiys/s2jw8… 安装 $ npm i vue-freemde -S 复制代码使用 Import globally import Vue from '...
  • 页面引用vue-markdown组件时可能会报下这个错,解决办法:安装1.1.1版本的entities即可解决 (后面时报错原因,可以不看,单纯记录。。。。) 这是因为安装vue-markdown依赖包时,会同时安装markdown-it,markdown-it...
  • 基于Vue构建的Markdown编辑器 链接 通讯 QQ群:798884474 安装 # use npm npm i @kangc/v-md-editor -S # use yarn yarn add @kangc/v-md-editor 快速开始 import Vue from 'vue' ; import VueMarkdownEditor from '...
  • laravist 的新版就使用了 vue-markdown 来渲染评论。本文主要介绍了Vuejs 中使用 markdown的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家。安装直接使用 npm 来安装:npm install.....
  • github:vue-markdown 下面是vue组件化中使用stylus语法 其中>>> 是为了让组件内也生效 vue组件化开发 >>> * /* 设置滚动条的样式 */ ::-webkit-scrollbar height 5px /*设置横向滚动条的高度...
  • 降价 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
  • 一、简单的介绍一下关于vue-markdown的使用 安装 npm install mavon-editor --save 引入(在main.js中全局引入) import Vue from 'vue' import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/...
  • 1.npm install --save uslug markdown-it markdown-it-toc-and-anchor 2. 主要代码 <template> <div id="lab_exp_book"> ... ... <div class="directory_box"&...
  • vue-js-markdown-editor:markdown网页实时预览原始码
  • 闲暇时间我用Vue框架写了一个博客,编辑器...于是我就自己写了一个组件,可以和普通文本显示器一样,显示文本,也可以执行Vue组件代码(只要标注vue-run)。 下面是介绍: Github代码仓库 https://github.com/...
  • vue-markdown编辑器

    2018-08-23 08:35:13
    在线示例地址 ...1.简介 一款使用marked和highlight.js开发的一款markdown编辑器,目前只支持在vue项目中使用。 编辑器涵盖了常用的...npm i -S vue-meditor 或 直接复制对应的组件到项目目录内 (推荐) 复制...
  • vue-bl-markdown编辑器 一个基于markdown-it高度可扩展的vue编辑器组件 允许提供插槽自定义工具栏 允许通过动态注册组件,允许插入工具栏指定位置 优势:可完全自定义工具栏功能,markdown-it插件调用等 安装 $ npm ...
  • mavonEditor基于Vuemarkdown编辑器example (图片展示)PCPC-GIFUse Setup (开始)Install mavon-editor (安装)$ npm install mavon-editor --saveUse (如何引入)index.js:// 全局注册// import with ES6import Vue ...
  • Vue - Markdown编辑器

    2020-08-04 21:39:31
    最近在做工作室的官网,需要一套博客系统,今天做了个Markdown编辑器,回想起刚开始学前端的时候做一个富文本编辑器都费劲,今天拿Vue做简直不要太轻松。 首先安装两个必须的包 npm install loadsh npm install ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,538
精华内容 615
关键字:

vue-markdown

vue 订阅