Vue结合showdown实现代码高亮，如何应用于长尾关键词优化？

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

前言：当我们将makedown文档转换为网页并在网页上展示时，我们希望能以优雅的方式呈现，并符合我们想要的网页风格。接下来，我将介绍一个插件，它可以帮助我们实现所需的功能。

插件介绍：这款插件是一款基于Markdown的网页编辑器，它支持将Markdown文档转换为格式，并提供丰富的自定义选项，以适应不同的网页风格。以下是一些主要功能：

1. Markdown转：一键将Markdown文档转换为格式，支持实时预览。

2.自定义样式：提供多种主题和样式选项，可轻松调整网页风格。

3.扩展功能：支持插入表格、图片、视频等多种元素，丰富网页内容。

4.实时预览：编辑过程中实时预览，方便调整格式和内容。

5.跨平台支持：适用于Windows、macOS和Linux操作系统。

安装与使用方法：

1.下载插件：从官方网站下载插件安装包。

2.安装插件：根据操作系统提示完成插件安装。

3.打开编辑器：打开编辑器，创建新的Markdown文档。

4.编辑文档：使用Markdown语法编辑文档，并实时预览效果。

5.导出：编辑完成后，点击导出按钮，将文档转换为格式。

通过这款插件，我们可以轻松地将Markdown文档转换为美观、实用的网页，满足我们的需求。

前言：当我们想把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>

效果如下：

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