java代码高亮插件vue html代码高亮插件

转载

mob64ca14061c9e 2024-02-02 11:50:43

文章标签 java代码高亮插件vue html css js vue 文章分类 Java 后端开发

代码块高亮

预备知识

必要歩鄹：数据处理(html转义)
demo 效果(期望效果)
个人demo代码
结合业务
代码压缩包(demo 代码)

代码块高亮

作为一个偶尔会写写博客的程序员，对于代码高亮还是很感兴趣的，终于在今天探索了一下，满足了一大心愿~

预备知识

了解了 highlight.js(代码高亮插件)

官方教程(挺简短的几步就行)
使用 highlightjs 点亮你的代码(网友教程，写的挺好)
不高亮给 code 标签使用 class="plaintext" 或者 class="nohighlight"

highlightjs-line-numbers.js(文档英语不难)(highlight插件不带行号，需要这个插件来帮忙)

坑：注意自定义样式的优先级(莫名多出了几个样式)

单行需要指定才会显示行号

可以规定起始行号
不显示行号给 code 标签使用 class="nohljsln"

必要歩鄹：数据处理(html转义)

html转义工具

在线工具，操作简单

博客：【JS】JS实现Html转义和反转义(html编码和解码)的方法总结

// 上面博客截取的代码(html 转义)
function htmlEncode (html){
    //1.首先动态创建一个容器标签元素，如DIV
    var temp = document.createElement ("div");
    //2.然后将要转换的字符串设置为这个元素的innerText或者textContent
    (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
    //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
    var output = temp.innerHTML;
    temp = null;
    return output;
}

demo 效果(期望效果)

java代码高亮插件vue html代码高亮插件_java代码高亮插件vue

个人demo代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 代码整体风格文件，去styles 文件里选一下 -->
		<link rel="stylesheet" href="./styles/a11y-dark.css">
		<!-- hightlight 官网打包好的js文件 -->
		<script src="./highlight.pack.js"></script>
		<!--  -->
		<script src="https://cdn.bootcdn.net/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
		<script>
			hljs.initHighlightingOnLoad();
			hljs.initLineNumbersOnLoad({
				// 让单行的时候也显示行号
				singleLine: true
			});
		</script>
		
		<style type="text/css">
			body{
				background-color: rgb(240,240,240);
			}
			#contianer{
				width: 75vw;
				margin: 0 auto;
			}
			
			/* for block of numbers */
			pre code .hljs-ln-numbers {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;

				text-align: right;
				color: #ccc;
				border-right: 1px solid #CCC;
				vertical-align: top;
				padding-right: 5px;

				/* your custom style here */
			}

			/* for block of code */
			pre code .hljs-ln-code {
				padding-left: 10px;
				/* padding-left: 30px; */
			}
			
		</style>
	</head>
	<body>
		<div id="contianer">
			<h1>这是其他的文本</h1>
			<pre class="vue">
				<code data-ln-single-line="true">
<template>
  <router-view/>
</template>

<script>
export default {
  name: 'App'
};
</script>
![]()

<style lang="less">
</style>

				</code>
			</pre>
			
			<h2>代码块2</h2>
			<pre class="python">
				<code data-ln-single-line="true">print("hello world!")</code>
			</pre>
			
			<h2>行号从10开始的代码块</h2>
			<pre class="vue">
				<code data-ln-start-from="10">
<template>
  <router-view/>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style lang="less">
</style>

				</code>
			</pre>	
			
			<h2>不显示行号</h2>
			<pre class="vue">
				<!-- 通过 class="nohljsln" 来取消行号 -->
				<code class="nohljsln" data-ln-start-from="10">
<template>
  <router-view/>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style lang="less">
</style>

				</code>
			</pre>		
		</div>
	</body>
</html>