资讯频道 → Web前端
阅读更多

4顶
0踩

Web前端

转载新闻 提供 39种样式高亮语法的JQuery插件-Snippet

2010-11-17 17:04 by 正式记者 HQAY0925 评论(0) 有4546人浏览
jQuery
Snippet jQuery Syntax Highlighter 是一个建立在SHJS的 开源插件,Snippet提供了简单而且快捷的方法,可以方便的为你带来高亮语法的提示.可以在IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62中运行.


先简单为你讲一讲它的用法.在官方的网站也已经有了详细的介绍,这里就稍微翻译一下它所提供的例子.

1.  在你的HTML中加载Snippet和JQuery

   1. <script type="text/javascript" src="js/jquery.js"></script>
   2. <script type="text/javascript" src="js/jquery.snippet.js"></script>


2.  加载Snippet的CSS

   1. <link rel="stylesheet" type="text/css" href="css/jquery.snippet.css" />


3.  重点是这一步,我们要把下面的代码写在<script>标记中,让Snippet对<pre>标记进行操作

   1. $(document).ready(function(){
   2. $("pre.htmlCode").snippet("html");
   3. // 找到类名为htmlCode的<pre>标签
   4. // 并且以HTML语法来高亮显示它
   5. $("pre.styles").snippet("css",{style:"greenlcd"});
   6. // 找到类名为styles的<pre>标签
   7. // 并且以CSS语法来高亮显示它
   8. // 显示的类型为greenlcd
   9. $("pre.js").snippet("javascript",{style:"random",transparent:true,showNum:false});
  10. // 找到类名为js的<pre>标签
  11. //并且以JavaScript语法来高亮显示它
  12. // 显示的类型为在39中随机选择
  13. // 选择背景为透明
  14. // 不显示行号
  15. });


4.  可以动态更新你的Snippet

   1. $(document).ready(function(){
   2. $("pre#dynamic").snippet("php",{style:"navy",showNum:false});
   3. // 找到类名为js的<pre>标签并把类型选为navy
   4. // 隐藏行号
   5. $("pre#dynamic").click(function(){
   6. $(this).snippet({style:"vampire",transparent:true,showNum:true});
   7. // 改变snippet的类型为vampire
   8. // 改变背景为透明
   9. // 显示行号
  10. });
  11. });


关于更多的参数可以在Snippet的网站的找到,这里就不多说了.总之Snippet是一个比较全面的而且很好用的显示高亮代码的插件,有兴趣的 话,你也可以下来试试.下载地址和例子点这里.
  • 大小: 31.3 KB
来自: 我想网
4
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 《Delphi7高效率数据库编程》范例数据库

    李维先生新书「Delphi7高效率数据库编程」范例数据库开始提供下载DEMOGDB.ZIP。

  • 【delphi11】delphi进阶【六、数据库编程】

    设计数据库：首先，你需要一个数据库。可以是本地的 SQLite 数据库或远程的 SQL Server 数据库。设置数据库连接：使用 ADO 或 FireDAC 组件来建立连接。设计用户界面：创建表格、按钮等控件来显示和操作数据。编写事件处理代码：为按钮点击等事件编写代码，如添加、删除、更新数据库记录。

  • Delphi与数据库

    在数据库支持方面，Delphi内置了多种数据库支持，包括本地数据库、远程数据库等。在使用Delphi进行数据库开发时，需要注意连接数据库、打开数据集、进行数据操作、关闭数据集和连接等几个方面。在数据库支持方面，Delphi内置了多种数据库支持，包括本地数据库、远程数据库等。TTable是对本地数据库进行操作的组件，可以对表格进行增、删、改、查等操作。首先，需要在MySQL中创建一个名为“test”的数据库，并在该数据库中创建一个名为“student”的表格，包括学生姓名、学号、性别、年龄等字段。

  • Delphi5实现主要——明细型数据库应用

    主要——明细型数据库应用程序通常包含至少两个数据库表，其中一个表作为“主表”，存储综合信息或主要数据；另一个或多个表作为“明细表”，存储与主表相关联的详细数据。：在主要——明细型数据库中，主表和明细表之间最常见的关系是一对多关系。这意味着主表中的一条记录可以在明细表中有多条相关联的记录。例如，一个客户（主表）可以有多个订单（明细表）。：在应用程序中，用户可以通过主表浏览综合信息，并通过明细表查看与特定记录相关联的详细信息。在Delphi中，主要——明细型数据库是一种数据库应用程序的设计模式，它涉及到。

  • delphi 数据库_Delphi数据库编程初学者指南

    delphi 数据库 关于课程： ( About the Course: ) 电子邮件课程 ( Email Course ) 先决条件： ( Prerequisites: ) 章节 ( Chapters ) Start with Chapter 1 : 从第一章开始： Then continue learning, this course alread...

  • Delphi数据库编程教程（七）

    第四章  数据浏览和导航第一节  设置和连接      欢迎来到免费DB Delphi教程的第四章！到现在为止，本教程以说明了怎样连接到Access数据库及怎样显示数据库表中的图形数据。在上一章我们讨论了一些“高级”的数据库编程技巧（译者加：相对于初学者而言）—现在让我们回到“为初学者”的水平。      这次，你将了解怎样建立可以浏览数据库表中的数据的表单。      前面章节

  • Delphi数据库编程教程（四）

    第三章 数据库中的图片第一节 处理BLOBs，在Access中存储图片      现在开发数据库应用程序不仅仅只需要处理文本或数字数据。例如，如果你正开发基于Interner/Intranet或基于多媒体的应用程序，和数据库中的文本一样，数据库中的图片就必须频繁的显示。      在本教程的第三章，我们将了解怎样通过ADO取出并显示Access数据库中的图形数据（图像）。不要担心处理

  • Delphi数据库编程教程（三）

    第三节 ADO（ActiveX Data Objects）编程模型      如文章“Delphi中引入ADO”所叙述的，ADO是一套COM（Component Object Model组件对象模型）组件（DLLs）,它允许你像访问电子邮件和文件系统一样访问数据库。使用ADO编写的应用程序不需要BDE。为了用ADO访问各种数据库，你需要有ADO/OLE DB（Object Linking an

  • Delphi数据库编程实例资料管理系统（Access）..rar

    Delphi数据库编程实例资料管理系统（Access）..rar

  • Delphi_7_数据库编程入门捷径

    目录 •第1章Delphi 7 集成开发环境（IDE）介绍 •第2章Delphi 7数据库系统概述 •第3章Delphi 7和数据库 •第4章创建数据库 •第5章读写字段值 •第6章计算字段 •第7章链接表 •第8章查找和确认数据 •第9章制作数据输入窗体 •第10章列表和查找表 •第11章查询和设定范围 •第12章多窗体和打印窗体 •第13章制作报表 •第14章开发图表 •第15章将图或文件存入数据库 •第16章编写多媒体数据库应用程序 •第17章数据库开发实例——学生管理系统

  • Delphi数据库编程教程（五）

    第二节  使用DBImage引出JPEG—错误的方式     DBImage—思路一（The DBImage - take one）      当试图使用Delphi做新的尝试时，我所做的第一件事是向Delphi的自带帮助寻求方法。这是帮助文档将回答：TDBImage（在组件面板的Data Controls页）表示数据库当前记录的一个BLOB字段的图形图像。使用TDBImage表示图形字段

  • Delphi数据库编程教程（八）

     第二节浏览和导航      创建访问数据库数据的表单有两种不同的方法。第一种方法是使用Database Form Expert（数据库表单专家）。但不幸的是，数据库表单专家仅仅只可以处理数据集组件中的BDE-aware（可视化BDE）子集。第二种方法是手工放置和连接所有的数据组件。         定义用户界面（Defining the User Interface）     

  • Delphi数据库编程新手指南（02）

    连接数据库，用BDE还是ADO？ 一、Delphi数据库连接 如上一章所述，以一定的结构格式存储数据的一个或多个表的集合，称之为一个数据库。表内的数据以行和字段的形式表现。当数据库由两个或两个以上的表构成时，这些表通常储存着分散但相关的数据。MS Access、Interbase或SQL Server使用单个文件表示完整的数据库（如Access的.mdb文件）。而Paradox和dBase

  • Delphi数据库编程教程（九） (转)

    Delphi数据库编程教程（九） (转)[@more@]第五章 数据集数据的后面..... 第一节 数据的状态 当用Delphi和ADO开发数据库应用程序时，大部分工作用于学习数据集组件的帮助文档。。为了创建一个基于AD...

Global site tag (gtag.js) - Google Analytics