Vue解析markdown字符串,并且将其展示到页面(代码高亮+代码行号显示)

有目标就不怕路远。年轻人.无论你现在身在何方.重要的是你将要向何处去。只有明确的目标才能助你成功。没有目标的航船.任何方向的风对他来说都是逆风。因此,再遥远的旅程,只要有目标.就不怕路远。没有目标,哪来的劲头?一车尔尼雷夫斯基

导读:本篇文章讲解 Vue解析markdown字符串,并且将其展示到页面(代码高亮+代码行号显示),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

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 指令即可。

Vue解析markdown字符串,并且将其展示到页面(代码高亮+代码行号显示)

(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),访问的效果如下图所示

Vue解析markdown字符串,并且将其展示到页面(代码高亮+代码行号显示)

(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样式,可以选择自己喜欢的样式引入。

以上代码效果如图所示:

Vue解析markdown字符串,并且将其展示到页面(代码高亮+代码行号显示)

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

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

Vue解析markdown字符串,并且将其展示到页面(代码高亮+代码行号显示)

  • pojoaque.css对应效果如下:

Vue解析markdown字符串,并且将其展示到页面(代码高亮+代码行号显示)

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

Vue解析markdown字符串,并且将其展示到页面(代码高亮+代码行号显示)

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

Vue解析markdown字符串,并且将其展示到页面(代码高亮+代码行号显示)

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

Vue解析markdown字符串,并且将其展示到页面(代码高亮+代码行号显示)

(7) 代码行号显示

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/134805.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!