如果我们需要在网页展示代码片段，该不会截图吧？当然不！这个时候我们可以使用一些插件实现这个效果，让用户在网页上看到的代码跟在开发编辑器上的效果一样，高亮显示。
如图
highlight.js高亮代码插件
通过highlight.js这个插件可以轻松实现。可以进入https://highlightjs.org/官网下载源码，然后简单在网页上引用即可。根据官方的例子，我们只需要在页面引入其js和css就行，然后将代码粘贴在<pre><code></code></pre>标签内即可战展示。
<link rel="stylesheet" href="default.css">
<script src="highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<!-- 展示代码 -->
<pre><code class="language-php">...</code></pre>说明：default.css是默认样式，我们可以选择自己喜欢的样式，这个插件提供了非常多的样式，例如黑色背景，白色背景，VScode风格，GitHub风格，IDEA风格等。
class="language-php"代表我们选择的语言，如果你的代码是php的那就是language-php，其他的例如language-html、language-java、language-python、language-js、language-c，根据你设置的代码种类，会自动匹配代码的高亮风格。
示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/highlight.min.js"></script>
<link rel="stylesheet" type="text/css" href="agate.min.css">
<!-- <link rel="stylesheet" type="text/css" href="nnfx-dark.min.css"> -->
<script>hljs.highlightAll();</script>
<style type="text/css">
*{
font-family: Consolas, Monaco, monospace;
font-size: 11pt;
padding: 0;margin: 0;
}
::-webkit-scrollbar-track-piece {
background-color:#fff;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color:#eee;
background-clip:padding-box;
min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
background-color:#bbb;
cursor: pointer;
}
</style>
</head>
<body text='#000000'>
<div style="width: 600px;height:600px;margin:30px auto;">
<pre style="height:600px;padding-top:0;">
<code style="height:600px;padding-top:0;" class="language-php hljs" style="padding:0 20px 20px 20px;">
<?php
// 声明页面header
header("Content-type:text/html;charset=utf-8");
// 获取access_token
function getToken(){
// 定义id和secret
$corpid='你的企业微信企业ID';
$corpsecret='你的企业微信secret';
// 读取access_token
include './access_token.php';
// 判断是否过期
if (time() > $access_token['expires']){
// 如果已经过期就得重新获取并缓存
$access_token = array();
$access_token['access_token'] = getNewToken($corpid,$corpsecret);
$access_token['expires']=time()+7000;
// 将数组写入php文件
$arr = '<?php'.PHP_EOL.'$access_token = '.var_export($access_token,true).';'.PHP_EOL.'?>';
$arrfile = fopen("./access_token.php","w");
fwrite($arrfile,$arr);
fclose($arrfile);
// 返回当前的access_token
return $access_token['access_token'];
}else{
// 如果没有过期就直接读取缓存文件
return $access_token['access_token'];
}
}
// 获取新的access_token
function getNewToken($corpid,$corpsecret){
$url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid={$corpid}&corpsecret={$corpsecret}";
$access_token_Arr = https_request($url);
return $access_token_Arr['access_token'];
}
// curl请求函数
function https_request ($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
$out = curl_exec($ch);
curl_close($ch);
return json_decode($out,true);
}
// 发送应用消息函数
function send($data){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://qyapi.weixin.qq.com/cgi-bin/message/send?access_token='.getToken());
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
return curl_exec($ch);
}
// 文本卡片消息体
$postdata = array(
'touser' => '@all',
'msgtype' => 'textcard',
'agentid' => '1000002',
'textcard' => array(
'title' => '测试卡片的标题',
'description' => '测试卡片的描述',
'url' => 'http://www.qq.com',
'btntxt' => '阅读全文',
),
'enable_id_trans' => 0,
'enable_duplicate_check' => 0,
'duplicate_check_interval' => 1800
);
// 调用发送函数
echo send(json_encode($postdata));
?>
</code>
</pre>
</div>
</body>
</html>
在线演示
http://www.likeyunba.com/demo...
Author:TANKING
