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

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

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/[email protected]/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

highlight.js高亮代码插件

Recommend

苹果高亮展示 iOS 12.1 新增的 70+ 表情符号

Hugo中添加代码高亮支持

minted——实现latex的代码高亮

如何在 Zotero 中高亮代码

你不知道的 VSCode 代码高亮原理

VSCode 自定义代码颜色(代码高亮) 利用VSCode内置工具实现

markdown笔记：公式插入和代码高亮

代码高亮插件Prism.js添加全屏预览功能

在Hugo博客中加入代码高亮

typecho 使用prism.js代码高亮

About Joyk