首页 \ 教程 \ 前端开发

相关文章

更多
  • flex高亮显示搜索结果怎么做？
  • Solr高亮显示highlight的三种实现
  • solr Highlighter (高亮)显示分析
  • solr 分页查询与高亮显示
  • xheditor在Firefox提交内容为空
  • Flash图表控件FusionCharts如何高亮显示数据
  • Eclipse设置高亮显示选中相同变量的方法
  • solr4.7开发实践 2——高亮显示
  • xheditor 编辑器下载地址
  • solr 高亮配置
  • 如何设置SOLR的高亮 (highlight)？
  • 如何设置SOLR的高亮 (highlight)？
  • 如何设置SOLR的高亮 (highlight)
  • Solr高亮的配置参数说明
  • Solr高亮的配置参数说明

    • 最近更新

    更多
  • java线程状态详解(6种)
  • redis从库只读设置-redis集群管理
  • Netty环境配置
  • Netty基于流的传输处理
  • Netty入门实例-使用POJO代替ByteBuf
  • Netty入门实例-时间服务器
  • Netty入门实例-编写服务器端程序
  • Netty开发环境配置
  • 电商平台数据库设计
  • HttpClient 上传文件
  • MongoDB常用命令
  • 快速了解MongoDB【基本概念与体系结构】
  • windows系统安装MongoDB
  • Spring boot整合MyBatis-Plus 之二：增删改查
  • 分布式ID生成器【snowflake雪花算法】

    • xhEditor利用prettify实现代码高亮显示

    2019-03-16 22:23|来源: 网络

    xheditor是一款小巧的html编辑器，采用的是Jquery技术,相信很多人都用过。

    prettify是Google开发的一款轻量级的代码高亮显示插件，这款插件比起常用的SyntaxHighlighter来，要小巧得多。它的原理就是将代码放到一个pre块里面，然后对pre块里面的内容进行高亮显示。

    一、下载

    xheditor的下载我们在4款好用的开源HTML编辑器里提过了，prettify的下载地址是：http://code.google.com/p/google-code-prettify/

    二、在页面中引入相关的文件

    如果编辑器和显示内容是在同一个网页，那么需要加载js文件和css文件。

    <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="xheditor/xheditor-1.1.6-zh-cn.min.js"></script>
    <script type="text/javascript" src="xheditor/prettify/prettify.js"></script>
    <link href="xheditor/prettify/prettify.css" rel="stylesheet" type="text/css"/>

    前两行用于编辑器，后两行用于显示高亮代码。如果发表文章和显示文章分属两个页面，可分开加载。

    三、修改编辑器

    把xheditor下载解压后，可放到网站根目录文件夹xheditor里面，prettify下载解压后可放在文件夹xheditor里面，注意路径问题。

    1、制作一个图标。

    可用制图工具做一个gif的小图标，放到prettify文件夹下面。

    然后写一个CSS引入：

    .btnCode{
        background:transparent url(xheditor/prettify/code.gif) no-repeat 16px 16px;
        background-position    :2px 2px;
    }

    2、为多行文本框加载xheditor编辑器。

    在有多行文本框的页面，加上一段js代码：
    <script type="text/javascript">
        var editor;
        $(pageInit);
        function pageInit(){
            var allPlugin={
                Code:{c:    'btnCode',t:'插入代码',h:1,e:function(){
                    var _this=this;
                    var htmlCode='<div><select id="xheCodeType"><option value="html">HTML/XML</option><option value="js">Javascript</option><option value="css">CSS</option><option value="php">PHP</option><option value="java">Java</option><option value="py">Python</option><option value="pl">Perl</option><option value="rb">Ruby</option><option value="cs">C#</option><option value="c">C++/C</option><option value="vb">VB/ASP</option><option value="">其它</option></select></div><div><textarea id="xheCodeValue" wrap="soft" spellcheck="false" style="width:300px;height:100px;" /></div><div style="text-align:right;"><input type="button" id="xheSave" value="确定" /></div>';    
    var jCode=$(htmlCode),jType=$('#xheCodeType',jCode),jValue=$('#xheCodeValue',jCode),jSave=$('#xheSave',jCode);
                    jSave.click(    function(){
                    _this.loadBookmark();
                    _this.pasteHTML(    '<pre class="prettyprint lang-'+jType.val()+'">'+_this.domEncode(jValue.val())+'</pre>');
                    _this.hidePanel();
    returnfalse;    
                });
                _this.showDialog(jCode);
            }}
        };
        editor    =$('#txtTopic').xheditor({plugins:allPlugin,tools:'Fontface,FontSize,Bold,Italic,Underline,Removeformat,Source,Code'});
    }

    </script>

    其中tools:'Fontface,FontSize,Bold,Italic,Underline,Removeformat,Source,Code'这个地方用于显示的图标工具，可随意设定。txtTopic为多行文本框的id.

    3、显示代码

    在显示页的body标记里面加上onload='prettyPrint()'
    即

    <body onload="prettyPrint()">

    大功告成。


    本文链接：xhEditor利用prettify实现代码高亮显示

    相关问答

    更多

    • 这段java代码如何安置，xheditor 中 添加键盘控制！[2022-01-06]

      正常的是写入到 function 函数里 如下

    • 给个好点的在线html编辑器[支持c#,java,php等代码高亮显示的][2024-01-31]

      LZ说的是在线的编辑器啦 支持高亮的编辑器像FCKEDITOR集成了高亮插件，像sa-blog、svnhost都用了这款编辑器，高亮的源码类型多。 这款编辑器也有PHP/ASP/.NET/PYTHON等调用代码。

    • 美化从C＃代码块剥离泛型(Prettify stripping Generics from C# code block)[2024-03-15]

      虽然我不知道Prettify脚本的作用，但它听起来像<和>混淆了浏览器，因为这些字符用于生成html元素。 如果你想在html中呈现为<和>的东西，你应该写＆lt; 和＆gt; （lt =小于，gt =大于） Though I have no idea what the Prettify script does, it sounds like the < and > confuse the browser, because those characters are used to generate html ...

    • 我如何通过CSS高亮显示java代码？(How can I highlight java code via CSS?)[2022-05-08]

      我认为你想要代码美化 支持一堆不同的语言（包括Java）。 这里是文档/例子 。 I think you want code-prettify Supports a bunch of different languages (including Java). Here are the docs/examples.

    • Prettify自定义主题代码不适合(Prettify Custom Theme Code does not fit)[2022-06-19]

      添加border:none; outline:none; box-shadow:none; 对于那个元素的css，因为其中一个很可能导致它。 这是我在没有实际查看代码的情况下可以做到的最好的事情 By adding !important;, the css now works. Thanks to those who helped, but in the end I just didn't look around hard enough/forgot that !important; existed. pr ...

    • 为什么Google Code Prettify会呈现实际代码(Why is Google Code Prettify rendering the actual code)[2023-06-04]

      您仍然需要转义html实体以防止它们显示在页面上。 & ， <和>需要更改为& ， < ， > 。 You still need to escape html entities to prevent them from being displayed on the page. &, <, and > need to be changed to &, <, and >.

    • 谷歌代码美化与降价无效(Google Code prettify with markdown not working)[2023-12-02]

      看看html代码，你错过了预标签上的class =“prettyprint”。 
      try {
    $db->beginTransaction();

    $db->exec("SOME QUERY");

    $stmt = $db->prepare("SOME OTHER QUERY?");
    $stmt->execute(array($value));

    $stmt = $db->prepare("YET ANOTHER QUE  ...

    • 如何在html页面上使用codemirror来高亮显示源代码(How to hightlight source code using codemirror on a html page)[2022-03-19]

      正如它在codemirror.net中所示 创建一个