SyntaxHighlighter 使你的代码像csdn一样

最新推荐文章于 2021-06-05 14:06:52 发布
最新推荐文章于 2021-06-05 14:06:52 发布
阅读量929 收藏
点赞数
分类专栏： HTML JS web前端 文章标签： code HTML js特效 SyntaxHighlighter 使你的代码像csdn一样


摘要：SyntaxHighlighter，是一款用于web页面的代码着色工具，可以用来着色多种语言，可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言，本文不对该开源项目进行解析，只是简单阐述一下它的几种用法。该项目可以从http://code.google.com/p/syntaxhighlighter/获得。

本站文章除非注明，否则都为原创，转载请注明出处。

本文链接：SyntaxHighlighter 使你的代码像csdn一样

1. 下载该项目源代码，解压放在网站的目录下，得到该项目的访问路径，示例中的路径是：http://uefacl-cn.com/home/highlight/,定义该路径为__HIGHLIGHT_PATH__,你可以访问http://uefacl-cn.com/home/highlight/Styles/SyntaxHighlighter.css来进行测试

2. 在需要加入代码特效的网页(或者直接在生成网页的模版)中的<head></head>之间加入如下代码：

<link type=”text/css” rel=”stylesheet” href=”http://uefacl-cn.com/home/highlight/Styles/SyntaxHighlighter.css”></link> 以引用该css。如果使用php进行动态网页构建，可以采取如下引用方式：

<link type=”text/css” rel=”stylesheet” href=”<?php echo __HIGHLIGHT_PATH__; ?>SyntaxHighlighter.css”></link>

3. 在需要加入代码特效的位置添加如下代码：当然textarea的其他属性需要由你自己定制。

<textarea name=”code” style=”resize: none; padding: 3px; font-family: ‘Courier New’,Courier,monospace; width: 100%; height: 280px;” rows=”12″>

这里写下你的代码就可以了。

</textarea>

4. 在网页尾部的</body>之前插入以下代码，也可以在模版页面footer.php中加入(一般的动态网站或者建站平台都是这样的吧？)

<script src=”http://uefacl-cn.com/home/highlight/Scripts/shCore.js”></script>

<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushCSharp.js”></script>

<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushPhp.js”></script>

<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushJScript.js”></script>

<script src=”http://uefacl-cn.com/home/highlight/Scripts/shBrushJava.js”></script>

<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushVb.js”></script>

<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushSql.js”></script>

<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushXml.js”></script>

<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushDelphi.js”></script>

<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushPython.js”></script>

<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushRuby.js”></script>

<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushCss.js”></script>

<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushCpp.js”></script>

<script>

dp.SyntaxHighlighter.HighlightAll(‘code’);

</script>

sunsetxiao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
高亮你的代码 syntaxhighlighter使用初步
qq_44884577的博客
04-21 449
高亮你的代码 syntaxhighlighter使用初步
wps代码块插件wps-syntaxhighlighter
最新发布
10-06
wps代码块插件
在CSDN博客上使用SyntaxHighlighter
Sarkuya的编程园地
04-01 2492
默认情况下，CSDN的模板已经加载了SyntaxHighlighter的所需文件。SyntaxHighlighter使用及作为显示代码的容器，但目前CSDN好像只支持. 此外，CSDN的在线编辑功能常常过于主动地为的内容加上，从而破坏原有内容，因此，在CSDN中不推荐使用，否则，要花很多时间为其重新整容。使用很简单，代码如下：#include int main(){ return
代码高亮插件SyntaxHighlighter
weixin_30625691的博客
11-24 127
代码高亮插件SyntaxHighlighter 现在版本syntaxhighlighter_2.1.364 第一 解压压缩包，scripts文件夹中包含了各种语言的JS文件，在styles文件夹中是各种显示高亮的主题 第二 如何使用？首先要引入其核心javascript文件shCore.js和核心CSS文件shCore.css，这两个是必选要引入的。其次引...
1分钟搞定 OneNote自己账号扩容到15G永久免费空间
热门推荐
孤柒的博客
06-05 3万+
本文是众多使用技巧中其中的一篇,全部使用技巧点击链接查看,或直接查看本专栏其他文章, 保证你收获满满 我主页中的思维导图中内容大多从我的笔记中整理而来,相应技巧可在笔记中查找原题, 有兴趣的可以去 我的主页了解更多计算机学科的精品思维导图整理 本文可以转载，但请注明来处，觉得整理的不错的小伙伴可以点赞关注支持一下哦！ 本文提到的所有软件和工具,可关注公众号 一起学计算机 点击 资源获取 获得 感觉作者写的不错的, 别忘了点赞关注加收藏哦(一键三连)!你的支持会带给我...
如何在 CSDN上显示代码编译器中原样式的彩色代码块
kilig
06-18 342
刚开始我写博客的时候，只知道将代码部分选中，然后设定为代码块，然后页面显示的效果就是下图： 如何让我们页面编辑器里粘贴上的代码以原编译器中那样彩色的样式显示呢？百度了下，发现很简单。 当我们往页面编辑器里粘贴代码时会发现它只不过是在选中的代码块区域前后加上了 ~ ~ ~ ，三个符号。这时候我们根据代码的种类，加上种类名字即可：如果你用的编程语言是 C# ,要写成小写c ，中间空格，然后加个 # 。如果是c，java，python语言的话直接加到~ ~~后面就行了。这里我的是JavaScript代码，我在~
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
10-25
根据提供的文件信息，以下详细阐述了Z-Blog平台中SyntaxHighlighter插件处理长代码无法自动换行问题的解决办法。 **知识点一：CSS修改** 在Z-Blog博客系统中，SyntaxHighlighter插件默认可能不支持长代码的自动换行...
解决SyntaxHighlighter 代码高亮不换行问题的解决方法
10-25
在网页开发中，为了使代码片段更易于阅读和理解，我们常常会使用代码高亮插件，SyntaxHighlighter就是其中一款广泛使用的JavaScript库。它能够将普通的文本代码转换为色彩鲜明、格式整齐的代码展示。然而，有些...
SyntaxHighlighter代码加色使用方法
09-06
此外，SyntaxHighlighter允许你在同一页面上使用多个代码块，只需重复上述步骤即可。为了实现更自定义的样式或功能，你还可以查阅官方文档，了解如何配置和扩展这个插件。 值得注意的是，SyntaxHighlighter还提供了...
FCKeditor + SyntaxHighlighter 让代码高亮着色插件
10-25
FCKeditor是现在最为流行的开源编辑器，SyntaxHighlighter是一个用JS实现的代码高亮显示插件，FCKeditor + SyntaxHighlighter 让代码高亮着色，可以最小化修改您的程序实现效果
syntaxhighlighter-3.0.83.zip
06-24
SyntaxHighlighter的资源包，包含了必要的css和style。
Highlight.js的行号插件可在每个代码块上自动显示行号。-JavaScript开发
05-26
Highlight.js的行号插件可在每个代码块上自动显示行号。 Highlight.js演示用法的行号插件
PHP使用SyntaxHighlighter显示xml文件
huyinhou
12-19 1087
<?php header("Content-Type: text/html; charset=gb2312"); if(!isset($_GET["key"])) { header("Location: /skinhelp/index.php"); exit; } ?> <?php echo "皮肤库帮助" ?> <?php $filepath = $_SER
SyntaxHighlighter使用方法
weixin_34062329的博客
11-20 149
原名：SyntaxHighlighter，是一款用于web页面的代码着色工具，可以用来着色多种语言，可以是 HTML,CSS,Javascript,还可以是C,JAVA等编程语言。最早见于Yahoo的YUI，当时还属于自由软件，最近打开官方网站发现已被 goolge收编。它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言：C#、CSS、C++、Delp...
php使用html代码高亮,使用SyntaxHighlighter实现HTML高亮显示代码的方法
weixin_39956022的博客
03-28 102
https://www.jb51.net/jiaoben/15599.htmlsyntaxhighlighter是一个小开源项目，它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言：C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML使用方法：1、假设网页文件test.ht...
syntaxhighlighter 代码高亮 - 插件化
草巾冒小子的博客
10-29 4703
之前做过很多网站，不同的网站也都有不同的经验总结，只是前些年都不怎么注重线上博客。由于现在自身技能的不断丰富，个人的插件库、总结性的经验文档、项目解析实例等等，也都逐渐丰富起来。着实令自己迎难而上的信心倍增。 之前按照老板需求，给自家公司做过一个教育类的推广网站，只是当时没有UI设计，一直也不得闲，后来被老板叫停说等以后有空闲再谈这个。所以，也一直没有将经验放到网上去。 如今，再整理自己的个人博客...
如何打印博客文章的正文？
SCscHero的博客
02-23 809
打印CSDN内容，将以下js复制放入Chrome开发者选项里边的console，回车即可。 (function(){ $("#side").remove(); $("#comment_title, #comment_list, #comment_bar, #comment_form, .announce, #ad_cen, #ad_bot").remove(); $(".nav_top_2011,...
JS插件---->SyntaxHighlighter的使用
weixin_30478923的博客
09-12 260
　　SyntaxHighlighter是一款用于web页面的代码着色工具，可以用来着色多种语言。今天我们通过实例来学习一下它的用法。旧同桌不是老情人，但与你分享过的青春不比初恋少半分。 SyntaxHighlighter的简单实例 一、SyntaxHighlighter的代码流程如下 1、Add base files to your page: shCore.js and shCo...
【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践...
07-02 1008
提示：阅读本文需提前了解的相关知识 1、阿里云（https://www.aliyun.com） 2、阿里云CDN（https://www.aliyun.com/product/cdn） 3、阿里云OSS（https://www.aliyun.com/product/oss） 4、HTTPS（http://baike.baidu.com/view/14121.htm） 阅...
pyqt SyntaxHighlighter
05-19
PyQt 中的 `QSyntaxHighlighter` 类可以用于实现文本编辑器中的语法高亮。以下是一个简单的示例： ```python from PyQt5.QtGui import QColor, QTextCharFormat, QFont, QSyntaxHighlighter from PyQt5.QtCore import Qt, QRegExp class SyntaxHighlighter(QSyntaxHighlighter): def __init__(self, parent=None): super(SyntaxHighlighter, self).__init__(parent) keyword_format = QTextCharFormat() keyword_format.setForeground(Qt.darkBlue) keyword_format.setFontWeight(QFont.Bold) keyword_patterns = ["\\bdef\\b", "\\bclass\\b", "\\bif\\b", "\\belif\\b", "\\belse\\b", "\\bwhile\\b", "\\bfor\\b"] self.highlighting_rules = [(QRegExp(pattern), keyword_format) for pattern in keyword_patterns] def highlightBlock(self, text): for pattern, format in self.highlighting_rules: expression = QRegExp(pattern) index = expression.indexIn(text) while index >= 0: length = expression.matchedLength() self.setFormat(index, length, format) index = expression.indexIn(text, index + length) ``` 在上面的示例中，我们定义了一个名为 `SyntaxHighlighter` 的类，该类继承自 PyQt 中的 `QSyntaxHighlighter` 类。在 `__init__` 方法中，我们定义了一些关键字的格式和正则表达式模式。在 `highlightBlock` 方法中，我们会对输入的文本进行匹配，并且对匹配到的关键字进行高亮处理。 为了使用该类，我们需要将其应用于文本编辑器的某个部分。例如： ```python from PyQt5.QtWidgets import QApplication, QTextEdit, QVBoxLayout, QWidget app = QApplication([]) editor = QTextEdit() highlighter = SyntaxHighlighter(editor.document()) layout = QVBoxLayout() layout.addWidget(editor) widget = QWidget() widget.setLayout(layout) widget.show() app.exec_() ``` 在上面的示例中，我们首先创建了一个 `QTextEdit` 部件，然后创建了一个 `SyntaxHighlighter` 实例，并将其应用于 `QTextEdit` 部件的文档中。最后我们将 `QTextEdit` 部件添加到一个 `QVBoxLayout` 中，并将其添加到一个 `QWidget` 中进行显示。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值