代码块高亮
作为一个偶尔会写写博客的程序员，对于代码高亮还是很感兴趣的，终于在今天探索了一下，满足了一大心愿~
预备知识
- 了解了 highlight.js（代码高亮插件）
- 官方教程（挺简短的几步就行）
- 使用 highlightjs 点亮你的代码（网友教程，写的挺好）
- 不高亮给
code标签使用class="plaintext" 或者 class="nohighlight"
-
highlightjs-line-numbers.js（文档英语不难）（highlight插件不带行号，需要这个插件来帮忙）
- 坑：注意自定义样式的优先级（莫名多出了几个样式）
- 单行需要指定才会显示行号
- 可以规定起始行号
- 不显示行号给
code标签使用class="nohljsln"
- 坑：注意自定义样式的优先级（莫名多出了几个样式）
必要歩鄹：数据处理（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 效果（期望效果）
个人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>
结合业务
比如网站上要展示用户代码了，可以获取到代码，通过html转义（前面那段js代码方法调用一下），渲染到 code 标签里
（试了个测试demo，崩了，后续想起来再补吧）
ps：实际用途不太大的
代码压缩包（demo 代码）
崩了就不放了