精华内容
下载资源
问答
  • 然后让我看下 vue 解析 markdown 文件怎么处理 然后我就开始了茫茫求学路 茫茫百度谷歌之旅 为时不知道多少天,总算搞出点效果了吧!!记录一下 搜的时候看到了很多插件,最后用的是 vue-markdown-loader ...

    因为项目需要吧!然后让我看下 vue 解析 markdown 文件怎么处理

    然后我就开始了茫茫求学路 茫茫百度谷歌之旅
    在这里插入图片描述
    为时不知道多少天,总算搞出点效果了吧!!记录一下


    搜的时候看到了很多插件,最后用的是 vue-markdown-loader

    下载相关依赖

    markdown插件

    npm i vue-markdown-loader@0 -D
    

    markdown样式表

    npm install --save github-markdown-css 
    

    代码高亮及行号的依赖

    npm install --save highlightjs-line-numbers.js
    

    相关配置

    webpack.base.config.js 文件里添加:

    {
            test: /\.md$/,
            loader: 'vue-markdown-loader',
            options: {
              preprocess: function (MarkdownIt, Source) {
                MarkdownIt.renderer.rules.table_open = function () {
                  return '<div class="table-container"><table class="table">';
                };
                MarkdownIt.renderer.rules.table_close = function () {
                  return '</table></div>';
                };
                return Source;
              }
            }
     }
    

    相关页面

    我这里用的是 App.vue 页面
    引入:

    import 'highlight.js/styles/github.css'
    import 'github-markdown-css'
    

    把之前的 id = "app" 改成 class = "markdown-body" 以匹配样式表

    样式

    index.html 文件加入以下代码

     <link href="https://cdn.bootcss.com/highlight.js/9.6.0/styles/atelier-lakeside-dark.min.css" rel="stylesheet"/>
    
     <script src="//cdn.bootcss.com/highlight.js/9.11.0/highlight.min.js"></script>
     <script>hljs.initHighlightingOnLoad();</script>
     <script src="//cdn.bootcss.com/highlightjs-line-numbers.js/1.1.0/highlightjs-line-numbers.min.js"></script>
     <script>hljs.initLineNumbersOnLoad();</script>
     //行内数学公式
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML" type="text/javascript"></script>
    

    行号插件 highlightjs-line-numbers.js 的样式要自己调整一下

        <style>
            .hljs-line-numbers {
                text-align: right;
                //以下3行要加 !important 来避免样式覆盖
                border-right: 1px solid #ccc !important;
                margin-right: 10px !important;
                padding-right: 5px !important;
                color: #999;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
        </style>
    

    页面引入

    在这里插入图片描述


    这样就差不多ok啦~
    可以显示表格、代码高亮、代码行号然后标题图片啥的
    但是跨行数学公式还不太行
    先这样吧!
    看下效果~(部分)
    在这里插入图片描述

    展开全文
  • 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字符串,并且将其展示到页面(代码高亮+代码行号显示),具体步骤如下: (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) 代码行号显示

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

    展开全文
  • 上周看了很久的md然后弄得差不多了嘛,但是上次那个只支持md文件的解析,如果是直接解析字符串的话,就没有办法了。 所以,今天看了也搞了好久…...npm install vue-markdown --save 在 webpack.base.config.j...

    上周看了很久的md然后弄得差不多了嘛,但是上次那个只支持md文件的解析,如果是直接解析字符串的话,就没有办法了。
    所以,今天看了也搞了好久…
    解析md文件看这里
    解析md字符串看下面👇


    在上一次的基础上,

    1. 安装依赖
      1. npm install text-loader --save
      2. npm install vue-markdown --save
    2. webpack.base.config.js 里原有loader下加入 loader: 'text-loader'
    3. 在要引入md的页面:
    <template>
      <div class="markdown-body">
        <vue-markdown  :source="msg"></vue-markdown>
      </div>
    </template>
    <script>
    import VueMarkdown from 'vue-markdown'
    export default {
      name: 'mdDisplay',
      data() {
        return {
                       msg:'```html \n<form method="GET" action="/transferFunds ">\n cash: <input type="text" name="cash"> \n to: <input type=" text " name=“to"> \n<input type="submit" name="action" value=""> \n</form> \n```'
    
        }
      },
      components:{
        VueMarkdown,
      }
    }
    </script>
    
    1. 如果没有高亮:
    <vue-markdown  v-highlight>{{msg}}</vue-markdown>
    
    1. main.js里加:
    import VueHighlightJS from 'highlight.js';
    Vue.use(VueHighlightJS)
    Vue.directive('highlight', (el) => {
      let blocks = el.querySelectorAll('pre code')
      blocks.forEach((block) => {
        VueHighlightJS.highlightBlock(block)
      })
    })
    
    1. 效果:

    在这里插入图片描述

    展开全文
  • 解析文件 安装markdown的loader cnpm i html-loader markdown-loader --save-dev 在vue.config.js文件内添加配置,添加完后需要重新启动项目 module.exports = { chainWebpack: config => { config.module ....
  • Vue-Markdown为你实现在Vue应用中进行Markdown解析和渲染。Markdown简介Vue-Markdown,是 miaolz123 在 Github 上开源的Markdown解析和渲染的Vue组件,项目仓库位于 https://github.com/miaolz123/vue-markdown,...
  • laravist 的新版就使用了 vue-markdown 来渲染评论。本文主要介绍了Vuejs 中使用 markdown的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家。安装直接使用 npm 来安装:npm install.....
  • vue项目解析markdown文件

    千次阅读 2019-10-29 18:00:55
    vue项目需要再页面中展示md文档,mavon-editor插件是个很好的插件,不仅支持md文档解析html,还可以当做md在线编辑器使用。 查看系统版本 vue -V 2.9.6 npm -v 6.9.0 安装命令,最新版即可 npm install ...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 215
精华内容 86
关键字:

vue解析markdown

vue 订阅