如何用Vue集成showdown实现代码块高亮显示？

本文共计839个文字，预计阅读时间需要4分钟。

前言：当我们将Mardown文档转换为格式，并在网页上展示时，希望能以优雅的方式呈现，并实现自己想要的网页风格。接下来，我将给大家介绍一款插件，以达到我们所期望的功能。

插件介绍：这款插件可以将Mardown文档转换为，并支持自定义样式，满足您对网页风格的需求。以下是该插件的安装和使用方法：

安装方法：

1.首先，您需要下载该插件：[插件下载地址](https://example.com/plugin_download)

2.解压下载的文件，并将插件文件夹放置在您的网站根目录下。

3.在您的网站配置文件中，添加以下代码以启用插件功能：

javascript // 配置插件路径 const markdownPluginPath='/path/to/markdown/plugin';

// 引入插件 const MarkdownIt=require(markdownPluginPath);

// 创建Markdown实例 const md=new MarkdownIt();

// 使用插件 md.use(require(markdownPluginPath + '/plugin_name'));

使用方法：

1.将Mardown内容放置在网页的指定位置。

2.使用插件将Mardown内容转换为格式。

3.根据需要，对生成的进行样式调整，以实现您想要的网页风格。

功能特点：

1.支持自定义样式，满足您对网页风格的需求。

2.支持多种Markdown语法，如、列表、链接、图片等。

3.支持代码高亮显示。

4.支持自定义插件功能，满足您的特定需求。

注意事项：

1.确保您的服务器已安装Node.js环境。

2.插件路径需要根据实际情况进行修改。

3.在使用插件时，请确保遵循相关法律法规。

前言：当我们想把makedown文档转译为html在网页上显示，并且能漂亮的展示出自己想要的网页形式，接下来我给大家介绍插件来达到我们所想要的功能。
注：下面安装及使用方式是基于vue进行滴。

1、安装showdown

npm install showdown --save

2、将showdown引入到使用的页面中

<template> <div v-html="htms"></div> </template> <script> import showdown from "showdown" converter.setOption('tables', true); // 将表格显示出来 export default { data() { return { htms: "" } }, created() { this.setMakedown() }, methods: { setMakedown() { this.htms = converter.makeHtml('# 这是一个标题') } } } </script>

最终展示效果

但是这时有个问题出现，如果我们去添加代码块儿时，代码是统一颜色，代码块也没有背景色，同时也没有高亮样式，接下来我们解决代码没有高亮问题。

1、安装highlight

npm install highlight --save

2、 在main.js添加自定义指令

import hljs from "highlight.js" import 'highlight.js/styles/default.css'; // 定义自定义指令 highlight 代码高亮 Vue.directive('highlight',function (el) { let blocks = el.querySelectorAll('pre code'); blocks.forEach((block)=>{ hljs.highlightBlock(block) }) })

3、 将“ v-highlight ”添加到使用的div标签上

<template> <div v-html="htms" v-highlight></div> </template>

效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。