zoukankan      html  css  js  c++  java
  • syntaxhighlight实现帝国cms代码高亮/语法高亮(一)

        默认的将帝国CMS的编辑器没有插入代码选项,内容页展示代码时也没有代码高亮,这给我们带来了很多不便。
    下边就介绍将syntaxhighlight与帝国CMS的编辑器整合,实现发表文章内容中代码高亮。

    一、 在帝国cms中使用该插件:
    1.下载syntaxhighlight插件,地址为:
    http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current
    2.解压syntaxhighlighter_3.0.83.zip文件;
    3.syntaxhighlighter_3.0.83文件夹中的styles、scripts、src文件夹复制到ecms中相应的文件夹中。
    将sytles中的css文件存放在"skin/default/css/syntaxhighlighter/"文件夹中。注意复制的是css文件
    将scripts、src文件夹存放在"skin/default/js/syntaxhighlighter/"文件夹中。注意复制的是scripts和src文件夹
    4.在需要代码高亮的内容页添加如下内容:
     

    <link href="[!--news.url--]skin/default/css/syntaxhighlighter/shCore.css" rel="stylesheet" type="text/css" /> 
    <link href="[!--news.url--]skin/default/css/syntaxhighlighter/shThemeDefault.css" rel="stylesheet" type="text/css" /> 
    <script src="[!--news.url--]skin/default/js/syntaxhighlighter/scripts/shCore.js" type="text/javascript"></script> 
    <script src="[!--news.url--]skin/default/js/syntaxhighlighter/scripts/shBrushCss.js" type="text/javascript"></script> 
    <script src="[!--news.url--]skin/default/js/syntaxhighlighter/scripts/shBrushJScript.js" type="text/javascript"></script> 
    <script src="[!--news.url--]skin/default/js/syntaxhighlighter/scripts/shBrushXml.js" type="text/javascript"></script> 
    <script src="[!--news.url--]skin/default/js/syntaxhighlighter/scripts/shBrushJava.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    SyntaxHighlighter.all() 
    </script>

    如图所示:

     

     

    5.点击编辑器的“源代码”按钮,在源代码视图粘贴如下代码,如图所示。

     

    <pre class=" java; smart-tabs: true" title="www.ishang123.com">
    class Foo { 
     T value; 
    } 
    Gson gson = new Gson(); 
    Foo foo = new Foo(); 
    gson.toJson(foo); // May not serialize foo.value correctly 
    gson.fromJson(json, foo.getClass());
    </pre>
    

     

    6.刷新内容页,网页效果如图所示:

     

    7.至此,我们完成了在编辑器里写syntaxhighlight源代码方式实现代码的高亮。下一节将介绍如何在编辑器页面添加syntaxhighlight的快捷方式。

    8。关于syntaxhighlight更详细的用法参见:

    http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

     ----------------------------------------------------------------------------------------------

    syntaxhighlight实现帝国cms代码/语法高亮(一)

     syntaxhighlight实现帝国cms代码/语法高亮(二) --在编辑器添加按钮

    ------------------------------------------------------------------------------------------------

  • 相关阅读:
    iOS 音频视频图像合成那点事
    Android低功耗蓝牙(BLE)使用详解
    android实现超酷的腾讯视频首页和垂直水平网格瀑布流一揽子效果
    基于vue单页应用的例子
    Android 6.0 超级简单的权限申请 (Permission)
    ubuntu创建Centos7镜像&&配置运行环境
    Scikit-learn方法使用总结
    解决TensorFlow最新代码编译错误问题
    jQuery 基础
    数据交换格式 —— JSON(JavaScript Object Notation)
  • 原文地址:https://www.cnblogs.com/ishang/p/2613925.html
Copyright © 2011-2022 走看看