Ckeditor编辑器添加的代码片段怎么在前台显示高亮效果

    Ckeditor编辑器安装CodeSnippet插件后，在后台添加的代码片段，虽然在编辑器中添加的代码片段有高亮效果，但是将编辑器里的代码片段放到前台页面中却没有高亮的效果。
    这是因为编辑器的插件已经默认集成了highlight.js这个代码高亮库，所以我们要在页面上显示高亮就得重新引用和添加highlight.js库。

    我们先看下编辑器中的高亮代码：

/* 
*用户取消支付后跳到该地址 
*/ 
public function index(){ 
   $meet=M('Meeting'); 
   $user=M('user'); 
   $data=$meet->where('uid='.$_COOKIE['user']['id'])->find(); 
   if($data){ 
      $this->assign('data',$data); 
   } 
   $this->display(); 
} 

     可以看到 高亮的效果主要是根据标签< pre>标签和 < code class="language-html">这两个标签来显示的，其中language-html表示的显示高亮语言为HTML。 highlight.js就是根据这两个标签来显示高亮效果。

     那怎么在前台让这个代码片段显示高亮效果了？

     首先我们要将highlight.js下载下来（下载地址，可以选择要高亮的编程语言种类），然后在需要代码高亮的页面添加下面的代码：

< !--我这里的样式为Monokai风格，可以根据自己的喜好更换风格-->
< link rel="stylesheet" href="styles/Monokai.css">
< script src="highlight.pack.js">< /script>
< script>hljs.initHighlightingOnLoad();< /script>

    大家可以到官网上面测试选择自己喜欢的高亮风格：http://highlightjs.org/static/test.html。

    highlightjs的具体使用方法可以看官网的文档：http://highlightjs.org/usage/。

    将上面的文件引入到我们前台的页面高亮效果就能正常显示出来了。

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/113/338.html

很赞哦！ (0)