首页> 实战笔录 >软件配置 软件配置

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

作者:小萝卜 2019-08-09 浏览 1434

简介Ckeditor编辑器安装CodeSnippet插件后,在后台添加的代码片段,怎么在前台让这个代码片段显示高亮效果

    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/

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

 

很赞哦! (0)

文章评论

    高端网站建设