syntaxhighlighter 代码高亮 - 插件化

最新推荐文章于 2024-07-19 20:06:32 发布

草巾冒小子

最新推荐文章于 2024-07-19 20:06:32 发布

阅读量4.7k

点赞数

文章标签：代码高亮插件

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/83508835

版权

syntaxhighlighter 代码高亮 - 插件化

之前做过很多网站，不同的网站也都有不同的经验总结，只是前些年都不怎么注重线上博客。由于现在自身技能的不断丰富，个人的插件库、总结性的经验文档、项目解析实例等等，也都逐渐丰富起来。着实令自己迎难而上的信心倍增。

之前按照老板需求，给自家公司做过一个教育类的推广网站，只是当时没有UI设计，一直也不得闲，后来被老板叫停说等以后有空闲再谈这个。所以，也一直没有将经验放到网上去。

如今，再整理自己的个人博客，发现很多东西还是不能放到自己的硬盘里，得传到网上去。一来，可以方便自己使用；二来，便于网络组件库的集成与实例化统计；三来，就是方便分享给大家，交流技术。

所以，在今天整理本地博客的时候，现将代码高亮插件的实例化封装，传于网络，以便于日后类似应用的参考与学习。

一、插件说明：

注意：已经封装为实例代码。可参考使用。

插件版本：syntaxhighlighter_2.1.364
插件支持语言：JavaScript、CSS、PHP、Java、Python、Vb、XML、Delphi、SQL、CSharp等等多种编程语言类

二、插件的使用：

以 `JavaScript` 脚本语言为例，步骤如下：

引入 javascript 格式刷
调用 javascript 格式刷

效果图：

在这里插入图片描述

实例 html 代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript高亮demo</title>
<script type="text/javascript" src="syntaxhighlighter_2.1.364/scripts/shCore.js"></script>
<!-- 引入 javascript 格式刷 -->
<script type="text/javascript" src="syntaxhighlighter_2.1.364/scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="syntaxhighlighter_2.1.364/styles/shCore.css"/>
<!--高亮显示 主题CSS文件-->
<link type="text/css" rel="stylesheet" href="syntaxhighlighter_2.1.364/styles/shThemeMidnight.css"/>
<script type="text/javascript">
	SyntaxHighlighter.config.clipboardSwf = 'syntaxhighlighter_2.1.364/scripts/clipboard.swf';
	SyntaxHighlighter.config.strings = {//该为中文配置
            expandSource : '展开代码',
            viewSource : '查看代码',
            copyToClipboard : '复制代码',
            copyToClipboardConfirmation : '代码复制成功',
            print : '打印',
            help: '?',
            alert: '语法高亮\n\n',
            noBrush: '不能找到刷子: ',
            brushNotHtmlScript: '刷子没有配置html-script选项',
            aboutDialog: '<div></div>'
        };
	SyntaxHighlighter.all();
</script>
</head>
<body>
<h1>JavaScript代码高亮 - demo<br /></h1>
<!-- 调用 javascript 格式刷 -->
<pre class="brush:javascript;">
    $(document).ready(function(){
        animate();
      $(".play").click(animate).mouseover(function(){
        $(".play").css({"background-color":"#A55"});
      }).mouseout(function(){
        $(".play").css({"background-color":"#060"});
      });
    });
    function animate(){
          $('div>div>div').each(function(id){
        $(this).css({
          position: 'relative',
          top: '-200px',
          opacity: 0
        });
        var wait = Math.floor((Math.random()*3000)+1);
        $(this).delay(wait).animate({
          top: '0px',
          opacity: 1
        },1000);
      });
    }
</pre>
</body>
</html>

三、插件下载：

syntaxHighLighter代码高亮插件实例点击下载

以上就是关于“ syntaxhighlighter 代码高亮 - 插件化 ” 的全部内容。

草巾冒小子

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
syntaxhighlighter 代码高亮 - 插件化

之前做过很多网站，不同的网站也都有不同的经验总结，只是前些年都不怎么注重线上博客。由于现在自身技能的不断丰富，个人的插件库、总结性的经验文档、项目解析实例等等，也都逐渐丰富起来。着实令自己迎难而上的信心倍增。之前按照老板需求，给自家公司做过一个教育类的推广网站，只是当时没有UI设计，一直也不得闲，后来被老板叫停说等以后有空闲再谈这个。所以，也一直没有将经验放到网上去。如今，再整理自己的个人博客...
复制链接

扫一扫