两款代码高亮插件prism和SyntaxHighlighter的使用

1、prism的使用

到官网下载css和js，选择好Languages和Plugins，一般选上Line Numbers以及Copy to Clipboard，可以显示代码行数以及复制代码，具体官网如下：

http://prismjs.com/download.html

在代码中引用css和js

<link rel="stylesheet" type="text/css" href="/Public/Resource/Css/prism.css"/>
<script src="/Public/Resource/js/prism.js"></script>

在text-content的class中找到pre标签后，初始化：注意配合ueditor的代码标签使用

// 添加行数
    $(document).ready(function(){
        var doc_pre = $(".text-content pre");
        doc_pre.each(function(){
            var class_val = $(this).attr('class');
            var class_arr = new Array();
            class_arr = class_val.split(';');
            class_arr = class_arr['0'].split(':');
            var lan_class = 'language-'+class_arr['1'];
            var pre_content = '<code class="'+lan_class+'">'+$(this).html()+'</code>';
            $(this).html(pre_content);
            $(this).attr("class",'line-numbers '+lan_class);
        });
    });

保存即可完成

2、SyntaxHighlighter的使用

下载好shCoreDefault.css以及shCore.js

http://alexgorbatchev.com/SyntaxHighlighter

在代码中引用css和js

<link rel="stylesheet" type="text/css" href="/Public/Resource/Css/shCoreDefault.css"/>
<script src="/Public/Resource/js/shCore.js"></script>

在代码中调用

<script type="text/javascript">
    SyntaxHighlighter.all();
</script>

保存即可完成，注意：ueditor中存入数据库的content内容有 转义符，需要过滤掉

$post['content'] = str_replace(' ', ' ', htmlspecialchars_decode($post['content']));