网页展示代码块，展示代码片段，highlight.js展示高亮代码网页展示代码块，展示代码片

如果我们需要在网页展示代码片段，该不会截图吧？当然不！这个时候我们可以使用一些插件实现这个效果，让用户在网页上看到的代码跟在开发编辑器上的效果一样，高亮显示。
如图
文章图片

highlight.js高亮代码插件通过highlight.js这个插件可以轻松实现。可以进入https://highlightjs.org/官网下载源码，然后简单在网页上引用即可。根据官方的例子，我们只需要在页面引入其js和css就行，然后将代码粘贴在

标签内即可战展示。

...

说明：default.css是默认样式，我们可以选择自己喜欢的样式，这个插件提供了非常多的样式，例如黑色背景，白色背景，VScode风格，GitHub风格，IDEA风格等。

文章图片

class="language-php"代表我们选择的语言，如果你的代码是php的那就是language-php，其他的例如language-html、language-java、language-python、language-js、language-c，根据你设置的代码种类，会自动匹配代码的高亮风格。
示例

*{ 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; } < ?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 = ''; $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); returnjson_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 = https://www.it610.com/article/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)); ?>

在线演示 http://www.likeyunba.com/demo...
【网页展示代码块，展示代码片段，highlight.js展示高亮代码】Author:TANKING