网页展示代码块，展示代码片段，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，根据你设置的代码种类，会自动匹配代码的高亮风格。

示例

  
    
    
    
    
    




<?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);
    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));
?>

在线演示

http://www.likeyunba.com/demo...

Author:TANKING