为了提示博客逼格，我觉得把百度的编辑器改造改造，实现高亮显示。
1、下载highlight
highlightjs 引入主题文件和js文件
2、项目引用
<script type="text/javascript" src="<?php echo BLOG_URL; ?>content/SyntaxHighlighter/highlight.pack.js"></script> <link rel="stylesheet" type="text/css" href="<?php echo BLOG_URL; ?>content/SyntaxHighlighter/styles/atelier-lakeside-dark.css"> <script>hljs.initHighlightingOnLoad();</script>
举个栗子
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<title>代码高亮显示测试</title>
<!-- 引入下面三条 -->
<link rel="stylesheet" type="text/css" href="./styles/tomorrow-night-eighties.css">
<script type="text/javascript" src="./highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
</style>
<body>
<!-- 代码高亮显示格式：<pre><code>你的代码</code></pre> -->
<pre><code>/**
* 二维数组按照指定字段进行排序
* @params array $array 需要排序的数组
* @params string $field 排序的字段
* @params string $sort 排序顺序标志 SORT_DESC 降序；SORT_ASC 升序
*/
function arraySequence($array, $field, $sort = 'SORT_DESC') {
$arrSort = array();
foreach ($array as $uniqid => $row) {
foreach ($row as $key => $value) {
$arrSort[$key][$uniqid] = $value;
}
}
array_multisort($arrSort[$field], constant($sort), $array);
return $array;
}</code></pre>
</body>
</html>
3、写一个js或者引用js
<script type="text/javascript">
var allpre = document.getElementsByTagName("pre");
for(i = 0; i < allpre.length; i++)
{
var onepre = document.getElementsByTagName("pre")[i];
var mycode = document.getElementsByTagName("pre")[i].innerHTML;
onepre.innerHTML = '<code id="mycode">'+mycode+'</code>';
}
</script>4、还可以写一个CSS代码块宽度、字体大小、行高、不强制换行等等 (没卵用)
<style type="text/css">
#mycode{
font-size: 18px;
width:500px;
white-space: pre; /*不强制换行*/
}
</style>写在最后，本文是参(照)考(抄)李维山,独立完成编写。
发表评论