精华内容
下载资源
问答
  • vue-markdown 一个基于vue.js的markdown语法解析插件
  • Vue解析 markdown 文件

    千次阅读 2020-07-13 18:25:55
    如题,如何在Vue解析markDown文件然后展示在网页上呢?一开始我也不太清楚,就拿着我的冲浪板在网络海洋里冲浪,但是没想到是一片珊瑚礁海域,让我心力憔悴,失去了学习的热情。 在我的不依不挠之下,终于从各种抄...

    一、前言

    如题,如何在Vue中解析markDown文件然后展示在网页上呢?一开始我也不太清楚,就拿着我的冲浪板在网络海洋里冲浪,但是没想到是一片珊瑚礁海域,让我心力憔悴,失去了学习的热情。
    在我的不依不挠之下,终于从各种抄来抄去,三言两语的碎片博客中找到了解决方法。
    注意,是解析文件,而不是文本,解析文本的其实网上已经有很多博客了,但是解析文件的其实还是零零碎碎,不太准确。
    如果你也在珊瑚礁海域绝望之中,希望这篇博客可以帮到你。

    二、实现过程

    首先

    我们需要使用npm引入三个包,为啥用npm而不用cnpm呢?cnpm不是速度快吗?在这里,我个人还是建议用npm,三个包的体积并不是很大,下载时间两者相差其实不大,而npm会更加的准确。

    npm i markdown-loader html-loader marked --save
    

    说明: markdown-loaderhtml-loader是为了让vue能够解析md格式的文件,读取出来,然后使用marked将读取出来的数据转换成html格式渲染到页面上。

    然后

    就在需要解析数据的页面的js里面引入marked, 这一步就很简单了,直接看代码

    <script>
      // 引用marked
      const marked = require('marked')
    </script>
    

    接下来

    准备引入 *.md 文件,但是引入之前还需要做一个规则配置,如果没有配置的话会报无法解析“#”的错误。
    配置:找到webpack.base.conf.js,将下面代码复制到model下的rules里面去,注意别漏了逗号。

    {
             test: /\.md$/,
             use: [
                { loader: 'html-loader' },
                { loader: 'markdown-loader', options: {} }
             ]
          },
    

    然后是这样的
    在这里插入图片描述
    配置好后就可以引入md文件了,注意文件路径别错了。
    在这里插入图片描述
    这时,md格式的数据就被解析成了html格式的数据,我们只需要将html格式的数据渲染上去就行了。
    在这里插入图片描述

    最后

    实现的效果是这样的(可能你的页面有些不一样因为没有滚动条或者样式)
    在这里插入图片描述用于测试的md文件我是直接拷贝CSDN的博客,是这样的
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200713181913581.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwMjU3Mg==,size_16,color_FFFFFF,t_70

    三、总结

    整体来说,实现的效果还是很不错的,目的达到了,当然了,还有其他方法可以实现这个,但是我觉得我这个是最方便的方法之一了。
    还有就是,CSDN上的markdown语法并不是原生的markDown语法,直接复制粘贴,最终解析出来的排版可能会有所差别。
    tips:水平有限,大神勿喷

    展开全文
  • vue解析markdown

    2021-10-13 21:43:37
    npm install ...安装完这三个包就ok了,我是vue的项目。 <script> const marked = require('marked') methods:{ //res.data是从markdown中取出的数据 const htmlMD = marked(res.da

    npm install html-loader@0.5.4 --save-dev html-loader 安装的时候,如果不加版本号,就会报错,加上就好了
    npm i markdown-loader
    npm install marked
    安装完这三个包就ok了,我是vue的项目。

    <script>
    const marked = require('marked')
    methods:{
    //res.data是从markdown中取出的数据 
     const htmlMD = marked(res.data);
     this.data = htmlMD}
    
    

    页面里面
    <div v-html="data"></div>

    在vue.config.js中加入

     configureWebpack: {
        module: {
          rules: [
            // 配置读取 *.md 文件的规则
            {
              test: /\.md$/,
              use: [
                { loader: "html-loader" },
                { loader: "markdown-loader", options: {} }
              ]
            }
          ]
        }
      },
    
    展开全文
  • Vue解析markdown字符串,并且将其展示到页面(代码高亮+代码行号显示),具体步骤如下: (1) 安装依赖 // marked用于将markdown转换成html cnpm install marked -S // 用于代码高亮显示 cnpm install highlight.js...

    Vue解析markdown字符串,并且将其展示到页面(代码高亮+代码行号显示),具体步骤如下:

    (1) 安装依赖

    // marked用于将markdown转换成html
    cnpm install marked -S
    
    // 用于代码高亮显示
    cnpm install highlight.js -S
    
    // 代码行号显示插件
    cnpm install highlightjs-line-numbers.js

    (2) 在main.js文件中引入highlight.js

    import highlight from 'highlight.js';
    Vue.use(highlight);

    (3) 创建一个全局指令,用于代码高亮显示

    在main.js文件中,创建一个自定义全局指令,如下所示:

    //封装成一个指令
    Vue.directive('highlight', (el) => {
      let blocks = el.querySelectorAll('pre code')
      blocks.forEach((block) => {
        highlight.highlightBlock(block)
      })
    })

    在vue组件中,只需要使用 v-highlight 指令即可。

    (4) 创建一个vue组件,用于展示markdown内容

    <template>
        <div>
            <!-- vue展示markdown内容 -->
            <div v-highlight v-html="msg" class="styleClass"></div>
        </div>
    </template>
    
    <script>
        export default {
            name: "markdown-test",
            data() {
                return {
                    msg:'```\n' +
                        'public static void main(String[] args) {\n' +
                        '\tSystem.out.println("Hello World!!!");\n' +
                        '}\n' +
                        '```'
                };
            }
        }
    </script>
    
    <style scoped>
    .styleClass{
        width: 400px;
        height: 400px;
        border: 1px solid red;
        margin: 0 auto;
        padding: 20px;
        text-align: left;
    }
    </style>

    (5) 通过步骤(4),访问的效果如下图所示

    (6) 引入代码高亮插件

    <script>
        // 将markdown转换成html
        import marked from 'marked';
        // 引入样式
        import "highlight.js/styles/darcula.css";
    
        export default {
            name: "markdown-test",
            data() {
                return {
                    msg:'```\n' +
                        'public static void main(String[] args) {\n' +
                        '\tSystem.out.println("Hello World!!!");\n' +
                        '}\n' +
                        '```'
                };
            },
            mounted() {
                this.msg = marked(this.msg); // 将markdown转换成html
            }
        }
    </script>

    注意:如果没有引入highlight.js对应的css样式,则可能不会有高亮显示的效果。highlight.js有多种css样式,可以选择自己喜欢的样式引入。

    以上代码效果如图所示:

    highlight.js常见css样式如下所示

    • atelier-cave-light.css对应效果如下:

    • pojoaque.css对应效果如下:

    • kimbie.light.css对应效果如下:

    • atelier-forest-dark.css对应效果如下:

    • arduino-light.css对应效果如下:

    (7) 代码行号显示

    整了好久,没整出来行号。。。后面再补上。。。

    展开全文
  • 既可以用来编辑Markdown语法,又可以用来解析 效果图 安装 npm install mavon-editor --save or cnpm install mavon-editor --save 引入 全局注册(大部分页面都需要markdown解析的推荐使用) /...

    Markdown编辑器的使用

    • 我们这里推荐使用 mavonEditor,这是一款基于Vue的markdown编辑器。既可以用来编辑Markdown语法,又可以用来解析
    • 效果图

    安装

    npm install mavon-editor --save
    or
    cnpm install mavon-editor --save	
    

    引入

    全局注册(大部分页面都需要markdown解析的推荐使用)

       // import with ES6
        import Vue from 'vue'
        import { mavonEditor } from 'mavon-editor'
        import 'mavon-editor/dist/css/index.css'
        // use
        Vue.use(mavonEditor)
        new Vue({
            'el': '#main',
            data() {
                return { value: '' }
            }
        })
    

    局部注册(只有一到连个页面会用到markdown推荐使用这个)

    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    export default({
    	components:{// 在页面中注册组件
    		mavonEditor 
    	}
    })
    

    使用

    <template>
      <div class="mavonEditor">
       	  <!-- markdownText: 双向绑定的数据 
       	  	   toolbars:编辑器的配置	-->
          <mavon-editor
           v-model="markdownText" 
           :toolbars="markdownOption" 
           @change="change" 
           style="min-height: 500px"
          />
          <button  @click="submit">提交</button>
      </div>
    </template>
    <script>
    export default {
    /*
        默认工具栏按钮全部开启, 传入自定义对象
        例如: {
             bold: true, // 粗体
             italic: true,// 斜体
             header: true,// 标题
        }
        此时, 仅仅显示此三个功能键
     */
      data() {
        return {
          markdownOption: {
    	      bold: true, // 粗体
    	      italic: true, // 斜体
    	      header: true, // 标题
          },
          markdownText: ''//传至服务器的数据
        },
        method: {
        // 所有操作都会被解析重新渲染
        change (value, render) {
          // render 为 markdown 解析后的结果(转化成了HTML格式)
          this..markdownText = render;
        }
      }
    };
    </script>
    

    markdownOption 配置项

    在这里插入图片描述

    解析markdown语法

    <telmplate>
    	<div class="content">
              <mavon-editor
                class="md"
                :value="htmlContent" // 渲染解析的数据绑定
                :subfield="prop.subfield" 
                :defaultOpen="prop.defaultOpen"
                :toolbarsFlag="prop.toolbarsFlag"
                :editable="prop.editable"
                :scrollStyle="prop.scrollStyle"
              />
    	</div>
    </template>	
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    
    <script>
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    export default {
      components: {
        mavonEditor
      }, 
      computed: {
      // 解析器配置
        prop () {
          let data = {
            subfield: false,// 单双栏模式
            defaultOpen: 'preview',//edit: 默认展示编辑区域 , preview: 默认展示预览区域 
            editable: false,	// 是否允许编辑
            toolbarsFlag: false,
            scrollStyle: true
          }
          return data
        }
      },
      data() {
          return{
            htmlContent: ''
          }
      },
      mounted () {
      //从后台获取数据
        getInfo(){
          this.htmlContent = data;
        }
      }
        
    </script>
    

    图片上传

    
    <template>
        <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
    </template>
    exports default {
        methods: {
            // 绑定@imgAdd event
            $imgAdd(pos, $file){
                // 第一步.将图片上传到服务器.
               var formdata = new FormData();
               formdata.append('image', $file);
               axios({
                   url: 'server url',
                   method: 'post',
                   data: formdata,
                   headers: { 'Content-Type': 'multipart/form-data' },
               }).then((url) => {
                   // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
                   /**
                   * $vm 指为mavonEditor实例,可以通过如下两种方式获取
                   * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后,`$vm`为`mavonEditor`
                   * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>,`$vm`为 `this.$refs.md`
                   */
                   $vm.$img2Url(pos, url);
               })
            }
        }
    }
    
    展开全文
  • 1.依赖showdown.js 安装 npm i showdown 配置 //引入 我的在全局引入 import showdown from 'showdown' //官方示例 ...text = '# hello, markdown!', //HTML是我们编辑后Mark...
  • markdown高亮vue vue-markdown-highlight (vue-markdown-highlight) Highlight.js syntax highlighter component for Vue. Vue的Highlight.js语法荧光笔组件。 安装 (Installation) Via NPM: Install ...
  • 然后让我看下 vue 解析 markdown 文件怎么处理 然后我就开始了茫茫求学路 茫茫百度谷歌之旅 为时不知道多少天,总算搞出点效果了吧!!记录一下 搜的时候看到了很多插件,最后用的是 vue-markdown-loader ...
  • 上周看了很久的md然后弄得差不多了嘛,但是上次那个只支持md文件的解析,如果是直接解析字符串的话,就没有办法了。 所以,今天看了也搞了好久…...npm install vue-markdown --save 在 webpack.base.config.j...
  • 通过简单的标记语法,它可以使普通文本内容具有一定的格式。 相比WYSIWYG编辑器 优点: 因为是纯文本,所以只要支持Markdown的地方都能获得一样的编辑效果,可以让作者摆脱排版的困扰,专心写作。 操作简单。比如:...
  • Markdown在我们程序界也是一个必备的技能。 ...本文主要介绍如果在 Vue 中使用 Markdown,废话说了很多了,我们就这开始按摩。 为什么使用Marked.js库 Vue 没有像React 那么多 MD 的插件。如...
  • cnpm i markdown-it --save 2.使用 <!-- * @Author: your name * @Date: 2020-08-09 17:57:37 * @LastEditTime: 2020-08-09 17:58:07 * @LastEditors: Please set LastEditors * @Description: In User ...
  •  一个功能齐全的markdown**解析器**和**编译器**,用JavaScript编写。速度建成。 marked该怎么使用?  **安装** npm install -g marked //全局安装 **使用** let marked = require...
  • vue markdown 降价 (vue-markdown) A Powerful and Highspeed Markdown Parser for Vue. Vue的强大,高速Markdown解析器。 Quick start: i am a tast test. 快速开始: 我是一个TAST... 支持的Markdown语法: au...
  • mavonEditor既可作为编辑使用,也可作为解析使用 API:https://github.com/hinesboy/mavonEditor 注意:识别h5语法以及LaTex计算公式 用法 引入 npm install mavon-editor --save // main.js全局注册 // ...
  • vue中将markdown转换成html并渲染样式

    千次阅读 热门讨论 2020-05-26 19:43:38
    我最近是在自己写一个博客系统,然后里面的博客编写使用的是markdown语言。在写博客的时候,使用的是mavon-editor组件,所以主要要解决的是博客在前端展示界面的问题。 1.下载依赖 npm install marked 2.在需要使用...
  • vue-markdown-loader源码解析

    千次阅读 2018-12-06 10:15:20
    项目中遇到了需要单独加载某个 markdown 文件显示在页面中,类似于操作指引的感觉,于是找到了 vue-markdown-loader 这个工具,觉得很好用,于是我打算开个专题看一下里面都做了些什么,有助于对 webpack loader 的...
  • mavonEditor:基于 VueMarkdown 编辑器,支持所见即所得编辑模式、阅读模式等
  • 在此系列文章的第一篇,我们介绍了 Vuepress 如何让 Markdown 支持 Vue 组件的,但没有提到非 Vue 组件的其他部分如何被解析。 今天,我们就来看看 Vuepress 是如何利用 markdown-it 来解析 markdown 代码的。 ...
  • Vue中使用markdown

    千次阅读 2019-08-02 12:36:30
    Vue中使用markdown 文章目录Vue中使用markdown依赖mavon-editor 配置安装引入----局部引入使用marked安装引入---局部引入使用效果highlight.js安装引入---局部引入使用参考结尾如有错误,望请指出,共同进步,不胜...
  • 所以写文章不用愁了,那如何解析Markdown呢!我前前后后用了mavon-editor(包太大),vue-marked(功能少)等等插件来实现!结果不满足预期。所以不如使用marked.js直接解析呢!包小效率高,于是就对marked.js进行...
  • vue使用marked解析markdown文本遇到的坑及解决方法 1. 前言 最近在搭建自己的博客网站 https://lyuanzhi.com,不免遇到了要把markdown文本转化为html代码的问题(这里我把markdown文本全都放在数据库里面了,而不是...
  • 介绍 特性 环境搭建 全局安装 创建项目目录 始化项目,建立并编辑 package.json ...VuePress是一个用来构建博客以及简易网站的项目,基于vuejs,由尤雨溪亲自主持的一个静态项目,静态打包。 基...
  • vueMarkdown插件

    2020-03-16 20:46:12
    markdown编辑器 mavon-editor 官方文档:https://github.com/hinesboy/mavonEditor 现介绍mavon-editor的使用 安装 npm install mavon-editor --save main.js import mavonEditor from 'mavon-editor' import '...
  • export default { data () { return { mdContent: '', // markdown语法的内容, 如果没有设置为'',不能设置为null,为null会报错 toolbars: toolbars, // markdown提示栏 img_file: {}, htmlCont: '' // 转化成html...
  • vue 实现 markdown书写博客 showdown

    千次阅读 2021-02-20 02:11:35
    本文记录了vue 引入showdown 实现 markdown书写博客
  • 编辑器效果图 1、安装插件 cnpm install mavon-editor -S 2、在main.js中引入插件 import mavonEditor from 'mavon-editor' ...Vue.use(mavonEditor) 3、在组件中使用< mavon-editor />组件来显示编...
  • Vuemarkdown格式转html,语法高亮 此需求分为多个步骤: 1、将markdown文件的字符串转为html,展示在页面上 2、对语法要进行高亮展示 3、markdown的样式调整 1、将markdown文件的字符串转为html,展示在页面上 ...
  • Webpack加载器,用于将Markdown文件转换为ALIVE Vue组件。 可配置的解析器。 内置带有语法。 现场演示支持。 对于文档示例极为有用。 热装。 例 该页面由markdown文件生成。 来源: 安装 NPM: npm install ...
  • :party_popper:通常Markdown解析器自带的基本功能; :four_leaf_clover:支持流程图,甘特图,时间表图,任务列表; :chequered_flag:支持粘贴HTML自动转换为Markdown; 插入支持插入原生Emoji,设置常用表情列表...

空空如也

空空如也

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

vue解析markdown语法

vue 订阅