技术标签: Highlight.js 换行 Highlight vue 前端 vue实践 js-beautify
用的是 vue+ Highlight.js + js-beautify
效果如下图
首先我们会用到 <pre></pre>
和 <code></code>
标签,包裹我们要展示的 html 代码,因为只有这样他们才能保持换行/缩进等
格式化代码用到的是 js-beautify
js-beautify 是分别为 js,css,html 提供了 3 个 JS,不必一次性引入那么多不需要的内容,比如我要实现的效果只需要引入 html 的即可
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-html.min.js"></script>
npm install js-beautify@next
import {
js_beautify, css_beautify, html_beautify } from 'js-beautify'
<pre><code id="html_code"></code></pre>
<pre><code id="css_code"></code></pre>
<pre><code id="js_code"></code></pre>
<script>
document.querySelector('#html_code').innerText = html_beautify(
'<div><div>html格式化</div><div>第二行</div></div>',
{
indent_size: 2,
space_in_empty_paren: true
}
)
document.querySelector('#css_code').innerText = js_beautify('body{background:red;width:100%;}', {
indent_size: 2,
space_in_empty_paren: true
})
document.querySelector('#js_code').innerText = css_beautify(
"var test = 'a';function(){console.log('test',test)}",
{
indent_size: 2,
space_in_empty_paren: true
}
)
</script>
配置项的参数有很多,具体可以参照 GitHub 提供的参数配出相应的格式 注意 pre 标签后,不要
有空格和回车,不然也会渲染出来,也一定要有 pre
标签,不然代码缩进的空格也渲染不出来
小小吐槽一下 html_beautify
,感觉这个 api 有点鸡肋,还不如 innerHtml 来得快,比如
<pre><code id="html_template_code"></code></pre>
<div style="display: none;" id="html_template">
<div>
<h1>标签格式化</h1>
<div>html格式化</div>
</div>
</div>
<script>
document.querySelector('#html_template_code').innerText = document.querySelector('#html_template').innerHTML
</script>
也能达到一样的效果,并且还少引入了一个库~
用到的就是 highlight.js
highlight.js 中文网、highlight.js 官网
<!-- 核心的JS库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
<!-- 代码高亮的样式 -->
<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/atom-one-dark.min.css" rel="stylesheet" />
npm install highlight.js
// highlight.js 代码高亮指令
import Hljs from "highlight.js";
import "highlight.js/styles/stackoverflow-light.css"; // 代码高亮风格,选择更多风格需导入 node_modules/hightlight.js/styles/ 目录下其它css文件
在对应的 code/pre
标签上,标注上对应的语言,比如:
<pre><code class="language-html"></code></pre>
<pre><code class="language-javascript"></code></pre>
<pre><code class="language-css"></code></pre>
在页面渲染好了之后,执行下面的方法,就可以高亮代码了
hljs.highlightAll()
如果节点是往后渲染,或者你只想更新某个代码块,可以用下面的方法
hljs.highlightBlock(document.querySelector('#html_code'))
更多的还有 hljs.config
等 api,可以翻一下文档
如下图,刚才用 js-beautify 还搞的好好的,高亮后换行都没了
有文章说是 pre 的 css 问题,其实研究一下高亮后的 html,其实和 pre 没多大关系,如果你没写pre
标签那就真的有关系
看下正确示范:
怎么做到的?把 innerText
,改为 innerHTML
。下面仔细说说
渲染后界面看上去确实是一样的,改换行的换行,改空格的空格,不过内部的 html 就很不一一样。
<br>
标签highlight.js
执行高亮的时候是针对 dom 节点,然后改变 dom 节点插入标签进行高亮的,显然把代码中的 <br>
标签给过滤了(因为看到文档有一个是否使用<br>
标签的配置,所以自身的 br 标签就和他冲突了,纯属个人猜测)
html = html.replace(/</g, '<').replace(/>/g, '>')
html = html.replace(/</g, '<').replace(/>/g, '>')
也是 innerHTML 和 innerText 的区别,innerHTML 时会进行编码重新转换,把 <>
重新渲染为字符,innerText 则是字符原样输出
别看第一段代码块没换行,其实中间的空格符隐藏了 \n
。所以这也是为啥强调要用 pre
和 code
标签的原因,普通的div
或者其他标签都会把\n
和连续的空格给过滤掉。
明白了上面的内容后,再来看一边上色效果
代码块如下:
再怎么看,这都是 span
标签,那 span 标签是怎么控制什么时候换行,什么时候不换行,纯 css 是做不到的,答案还是 \n
所以明白为什么 br 无效 \n 有效,为啥要用 innerHTML 了把
使用方式有很多种,可以用上面的 hljs
的 api 进行。也可以用 vue 的特性(自定义指令)来完成这一系列的东西
import Hljs from 'highlight.js'
let Highlight = {
}
// 自定义插件
Highlight.install = function(Vue) {
// 自定义指令 v-highlight
Vue.directive('highlight', {
// 被绑定元素插入父节点时调用
inserted: function(el) {
Hljs.highlightBlock(el)
},
// 指令所在组件的 VNode 及其子 VNode 全部更新后调用
componentUpdated: function(el) {
Hljs.highlightBlock(el)
}
})
}
export default Highlight
指令写好后记得要用 Vue 注册一下:
import Vue from 'Vue'
import Highlight from '上面那段代码的对应目录'
Vue.use(Highlight)
// 使用的时候
<code v-highlight>这里写代码</code>
结合上面的指令,直接封装一个,先格式化代码,在高亮代码的指令!
贪图方便我就不用项目了,直接建了个 html,用 cdn 引入对应的库实现了一个
核心的要点上面也都说过了,当然代码还有更好的实现方式和更多的拓展性,剩下的就多看文档了~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-html.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/atom-one-dark.min.css" rel="stylesheet" />
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<div id="app">
<pre><code v-code class="language-html">
<div><div>html格式化</div><div>第二行</div></div>
</code></pre>
<hr />
<pre><code v-code class="language-css">
body{background:red;width:100%;}
</code></pre>
<hr />
<pre><code v-code class="language-javascript">
var test = 'a';function(){console.log('test',test)}
</code></pre>
</div>
<script>
let code = {
}
function getBeautifyCode(el) {
if (!el || !el.innerHTML) return ''
var code = el.innerHTML || ''
let className = el.classList ? el.classList.value || '' : ''
if (className.indexOf('html') !== -1) {
code = html_beautify(code)
.replace(/</g, '<')
.replace(/>/g, '>')
}
if (className.indexOf('css') !== -1) {
code = css_beautify(code)
}
if (className.indexOf('javascript') !== -1) {
code = js_beautify(code)
}
return code
}
code.install = function(Vue) {
Vue.directive('code', {
// 被绑定元素插入父节点时调用
inserted: function(el) {
el.innerHTML = getBeautifyCode(el)
hljs.highlightBlock(el)
},
// 指令所在组件的 VNode 及其子 VNode 全部更新后调用
componentUpdated: function(el) {
el.innerHTML = getBeautifyCode(el)
hljs.highlightBlock(el)
}
})
}
Vue.use(code)
new Vue({
el: '#app'
})
</script>
</body>
</html>
在上诉的步骤都完成了之后,并不能在编辑器这么使用,因为编辑器和 vue 并没有什么特定的 dom 节点的关系(在编辑器加载后,vue 上的数据并不会影响编辑器的内容,只能通过编辑器的 onchange 来给 vue 同步数据)
所以先用指令,生成一段 html 代码,拿到 v-code 渲染后的 innerHtml,在插入到编辑器中,注意编辑器中也要用 pre
包裹着要插入的 html 代码,由于各个富文本编辑器都不太一样,也就不好展开~
如果你也有编辑器的这种需求,在进行一系列改动后执行保存操作(getContent)。拿到改动后的 html 代码,提交给接口,刷新列表,把新的数据重新赋值到编辑器的时候发现 js-beautify
不生效了?!
这是因为进过我们格式化和代码高亮过后的代码,已经存在了很多空格和换行符,其实这些空格(或者称为缩进)是我们不想保存的,保存了这部分缩进后下次进行代码格式化的时候js-beautify
会认为这是故意留下的回车/空格符,导致一系列的问题
所以在我们再次获取到 html 代码的时候执行一个操作:
html = html.replace(/[\r\n]/g, '').replace(/>\s*?</g, '><')
把换行符和 2 个尖括号中间的内容的非字符,都替换掉,就可以了
文章浏览阅读1.1k次。OLAP中数据存储的问题OLAP 需要队列进行选择,行式存储按行存数据,使用索引加快对数据的查找(索引包括聚集索引(表记录的排列顺序与索引的排列顺序一致)和非聚簇索引(非聚集索引指定了表中记录的逻辑顺序,但记录的物理顺序和索引的顺序不一致))。这种方式对按列的存储和检索不是很高效,查询某一列数据需要将所有行的数据扫描一次,而且对统计分析也不友好。列式存储原理若使用列式存储可以只用扫描出需要的列,行、列存储的对比。文件格式parquet 文件格式:如下图所示:parquet file = hea_列式存储
文章浏览阅读4.3w次,点赞184次,收藏1.2k次。我们可以把字符串储存在char类型的数组中,如果char类型的数组末尾包含一个表示字符串末尾的空字符\0,则该数组中的内容就构成了一个字符串因为字符串需要用\0结尾,所以在定义字符串的时候,字符数组的长度要预留多一个字节用来存放\0,\0就是数字0例如。_c语言字符串
文章浏览阅读2k次,点赞8次,收藏15次。后台管理项目免不了要做权限控制,常见的分为路由级别和按钮级别,在此主要针对于按钮权限,比如说某个用户或者角色对数据有没有增删改查的权限,例如以下功能,巡查人员可以点击导入和新建,而一般用户只能选择下载模板。在 directives文件夹下分别创建permission、debounce、throttle三个ts文件,分别用于存放权限控制,防抖和节流的业务逻辑,结构清晰,方便维护以及更低的耦合度。在index.ts文件中分别导入每个自定义指令对象,再遍历注册每一个指令。_vue3 v-permission
文章浏览阅读553次。1、maven-dependency-versions-check-plugin, Maven 插件查找依赖版本冲突转载于:https://www.cnblogs.com/yixiu868/p/11583582.html_maven-dependency-versions-check-plugin
文章浏览阅读472次。圈起来的地方是需要注意的这里的代码可以多选,也可以把多选的复选框全部取消勾选如果singleSelect改为true,就不能取消勾选,至于为什么,我还没弄懂(笑哭)_easyui datagrid 设置singleselect:true 后不能取消选择
文章浏览阅读479次。nesC语言编程基础1.接口NesC程序主要由各式组件(component)构成,组件和组件之间通过特定的接口(interface)互相沟通。一个接口内声明了提供相关服务的方法(C语言函数)。例如数据读取接口(Read)内就包含了读取(read)、读取结束(readDone)函数。接口只是制定了组件之间交流的规范,也就是通过某一个接口,只能通过该接口提供的方法实现两个组件之间的交流。但是接口终归只是接口,只是一组函数的声明,并为包含对接口的实现。1 interface Read<val._nesc语言
文章浏览阅读1.3k次。前后端分离之Spring Security Api验证实践为什么需要RESTful重定向问题为什么需要RESTful使用RESTful之前,会发现各种奇葩的url命名,对url的功能经常需要结合源代码来确认,让人头痛,使用RESTful规范之后,很多问题得以解决。仅仅依靠URL和Method就能定为功能。重定向问题需要重新定义逻辑(JDK8推荐使用Lambda表达式)登录 ,默认下..._spring security api
文章浏览阅读10w+次,点赞25次,收藏117次。图像处理之常见二值化方法汇总图像二值化是图像分析与处理中最常见最重要的处理手段,二值处理方法也非常多。越精准的方法计算量也越大。本文主要介绍四种常见的二值处理方法,通常情况下可以满足大多数图像处理的需要。主要本文讨论的方法仅针对RGB色彩空间。 方法一:该方法非常简单,对RGB彩色图像灰度化以后,扫描图像的每个像素值,值小于127的将像素值设为0(黑色),值大于等于12_二值化
文章浏览阅读1.9k次。JAVA程序设计与应用开发(第2版)——《GUI清华大学出版社》_gui开发
文章浏览阅读491次。大家好,给大家分享一下PYTHON实训总结及体会1500字,很多人还不知道这一点。这将使你在做实验时的难度加大。然后两下子就将实验报告做完。但学到的知识与难度成正比。一定要将课本上的知识吃透。【篇一:实验心得体会】就像以前做物理实验一样。在老师讲解时就会听不懂。你要清楚电桥的各种接法。这将使你极大地浪费时间。在做测试技术的实验前。因为这是做实验的基础。_python实验体会
文章浏览阅读9.6k次,点赞9次,收藏117次。特性或指标总述本文将从以下特性进行简单的叙述。结合了《ADC设计基础》和TI的一些教学视频。分辨率转换误差转换速度采样率奈奎斯特采样准则混叠和抗混叠滤波器DNLINL热噪声谐波失真THDSNRENOBSFDRIMD孔径抖动孔径延迟奈奎斯特区补充分辨率一般ADC都说注明是8bit,16bit或者是24bit。这里的数值也就是分辨率的意思。分辨率是衡量A..._adc电流电压零漂值
文章浏览阅读1.1k次。RAID卡介绍:提到RAID卡就不得不提到什么是RAID。RAID是英文Redundant Array of Independent Disks的缩写,翻译成中文即为独立磁盘冗余阵列,或简称磁盘阵列。简单的说,RAID是一种把多块独立的硬盘(物理硬盘)按不同方式组合起来形成一个硬盘组(逻辑硬盘),从而提供比单个硬盘更高的存储性能和提供数据冗余的技术。组成磁盘阵列的不同方式成为RAID级别(RAID..._把raid缓存强制开启 显示参数无效