为了提示博客逼格,我觉得把百度的编辑器改造改造,实现高亮显示。
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>
写在最后,本文是参(照)考(抄)李维山,独立完成编写。
发表评论