If we need to display code snippets on the web, shouldn't we take screenshots? of course not! At this time, we can use some plug-ins to achieve this effect, so that the code that users see on the web page is the same as the effect on the development editor, highlighted.
As shown
highlight.js highlight code plugin
It can be easily achieved through the highlight.js plug-in. You can go to the https://highlightjs.org/ to download the source code, and then simply quote it on the web page. According to the official example, we only need to introduce its js and css on the page, and then paste the code in the <pre><code></code></pre> tag to display it.
<link rel="stylesheet" href="default.css">
<script src="highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<!-- 展示代码 -->
<pre><code class="language-php">...</code></pre>Note: default.css is the default style, we can choose the style we like, this plugin provides a lot of styles, such as black background, white background, VScode style, GitHub style, IDEA style, etc.
class="language-php" represents the language we choose, if your code is php, it is language-php, and others such as language-html, language-java, language-python, language-js, language-c, according to The type of code you set will automatically match the highlight style of the code.
Example
<!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>
Online demo
http://www.likeyunba.com/demo/highlight/
Author:TANKING
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。