修改并上传SyntaxHighlighter源码个性化博客代码风格

最新推荐文章于 2024-05-21 14:15:14 发布
最新推荐文章于 2024-05-21 14:15:14 发布
阅读量139 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/chinaxmly/archive/2012/09/27/2706359.html
版权

或许是我太苛刻了，用了博客园默认的SyntaxHighlighter工具高亮代码后，总不尽人意。首先是行间距太大，这对于只贴小量的代码没什么问题。但如果代码很长，将会很大程度上影响阅读效率。其次，博客园似乎修改了SyntaxHighlighter原版代码不能自动换行的问题，但改得不彻底，又引出了新的问题：自动换行后会导致行号不连惯，并且产生多行注释时的Bug。

但也有改的好的地方，比如字体比原来默认的漂亮多了，高亮的颜色也更加符合阅读习惯，还有就是给代码的行加上了两种不同的背景色，交替显示，这都让代码看起来舒爽了很多。

最后，我还是决定自己动手，查找资料，上传并修改SyntaxHighlighter源码，基本上达到了预期的目标。

1.下载并修改SyntaxHighlighter源码
1.1下载SyntaxHighlighter

可到http://alexgorbatchev.com/SyntaxHighlighter/下载SyntaxHighlighter。我下的是8.0.83版本。

1.2 修改源码

找到styles/shCoreDefault.css文件，按照如下方式修改:

/**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/SyntaxHighlighter
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
 *
 * @version
 * 3.0.83 (July 02 2010)
 * 
 * @copyright
 * Copyright (C) 2004-2010 Alex Gorbatchev.
 *
 * @license
 * Dual licensed under the MIT and GPL licenses.
 */
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
  -moz-border-radius: 0 0 0 0 !important;
  -webkit-border-radius: 0 0 0 0 !important;
  background: none !important;
  border: 0 !important;
  bottom: auto !important;
  float: none !important;
  height: auto !important;
  left: auto !important;
  /* 修改行间距 */
  /* line-height: 1.1em !important; */
  line-height: 1.2em !important;
  margin: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  right: auto !important;
  text-align: left !important;
  top: auto !important;
  vertical-align: baseline !important;
  width: auto !important;
  box-sizing: content-box !important;
  /* 修改字体类型 */
  /* font-family: "Consolas", "Bitstream Vera Sans Mono", 
	"Courier New", Courier, monospace !important; */
  font-family: "新宋体", Courier, monospace !important;
  font-weight: normal !important;
  font-style: normal !important;
  /* 修改字体大小 */
  /* font-size: 1em !important; */
  font-size: 13px !important;
  min-height: inherit !important;
  min-height: auto !important;
}

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  /* 修改字体大小，此处没明显效果 */
  /* font-size: 1em !important; */
  font-size: 13px !important;
}
.syntaxhighlighter.source {
  overflow: hidden !important;
}
.syntaxhighlighter .bold {
  font-weight: bold !important;
}
.syntaxhighlighter .italic {
  font-style: italic !important;
}
.syntaxhighlighter .line {
  white-space: pre !important;
}
.syntaxhighlighter table {
  width: 100% !important;
  /* 给代码加个框框 */
  border: 1px solid #7FFFD4 !important;
}
.syntaxhighlighter table caption {
  text-align: left !important;
  padding: .5em 0 0.5em 1em !important;
}
.syntaxhighlighter table td.code {
  width: 100% !important;
}
.syntaxhighlighter table td.code .container {
  position: relative !important;
}
.syntaxhighlighter table td.code .container textarea {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: white !important;
  padding-left: 1em !important;
  overflow: hidden !important;
  white-space: pre !important;
}
.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
  padding: 0 0.5em 0 1em !important;
}
.syntaxhighlighter table td.code .line {
  padding: 0 1em !important;
}
.syntaxhighlighter.nogutter td.code .container textarea, 
	.syntaxhighlighter.nogutter td.code .line {
  padding-left: 0em !important;
}
.syntaxhighlighter.show {
  display: block !important;
}
.syntaxhighlighter.collapsed table {
  display: none !important;
}
.syntaxhighlighter.collapsed .toolbar {
  padding: 0.1em 0.8em 0em 0.8em !important;
  font-size: 1em !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}
.syntaxhighlighter.collapsed .toolbar span {
  display: inline !important;
  margin-right: 1em !important;
}
.syntaxhighlighter.collapsed .toolbar span a {
  padding: 0 !important;
  display: none !important;
}
.syntaxhighlighter.collapsed .toolbar span a.expandSource {
  display: inline !important;
}
.syntaxhighlighter .toolbar {
  position: absolute !important;
  right: 1px !important;
  top: 1px !important;
  width: 11px !important;
  height: 11px !important;
  font-size: 10px !important;
  z-index: 10 !important;
}
.syntaxhighlighter .toolbar span.title {
  display: inline !important;
}
.syntaxhighlighter .toolbar a {
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  padding-top: 1px !important;
}
.syntaxhighlighter .toolbar a.expandSource {
  display: none !important;
}
.syntaxhighlighter.ie {
  font-size: .9em !important;
  padding: 1px 0 1px 0 !important;
}
.syntaxhighlighter.ie .toolbar {
  line-height: 8px !important;
}
.syntaxhighlighter.ie .toolbar a {
  padding-top: 0px !important;
}
.syntaxhighlighter.printing .line.alt1 .content,
.syntaxhighlighter.printing .line.alt2 .content,
.syntaxhighlighter.printing .line.highlighted .number,
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
.syntaxhighlighter.printing .line.highlighted.alt2 .content {
  background: none !important;
}
.syntaxhighlighter.printing .line .number {
  color: #bbbbbb !important;
}
.syntaxhighlighter.printing .line .content {
  color: black !important;
}
.syntaxhighlighter.printing .toolbar {
  display: none !important;
}
.syntaxhighlighter.printing a {
  text-decoration: none !important;
}
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
  color: black !important;
}
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
  color: #008200 !important;
}
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
  color: blue !important;
}
.syntaxhighlighter.printing .keyword {
  color: #006699 !important;
  font-weight: bold !important;
}
.syntaxhighlighter.printing .preprocessor {
  color: gray !important;
}
.syntaxhighlighter.printing .variable {
  color: #aa7700 !important;
}
.syntaxhighlighter.printing .value {
  color: #009900 !important;
}
.syntaxhighlighter.printing .functions {
  color: #ff1493 !important;
}
.syntaxhighlighter.printing .constants {
  color: #0066cc !important;
}
.syntaxhighlighter.printing .script {
  font-weight: bold !important;
}
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
  color: gray !important;
}
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
  color: #ff1493 !important;
}
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
  color: red !important;
}
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
  color: black !important;
}

.syntaxhighlighter {
  background-color: white !important;
}
.syntaxhighlighter .line.alt1 {
  /* 行颜色交替变换显示设置，与下面的alt2配合 */
  /* background-color: white !important; */
  background-color: #f8f8f8 !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}
.syntaxhighlighter .line.highlighted.alt1, 
	.syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {
  color: black !important;
}
.syntaxhighlighter table caption {
  color: black !important;
}
.syntaxhighlighter .gutter {
  color: #afafaf !important;
}
.syntaxhighlighter .gutter .line {
  border-right: 3px solid #6ce26c !important;
}
.syntaxhighlighter .gutter .line.highlighted {
  background-color: #6ce26c !important;
  color: white !important;
}
.syntaxhighlighter.printing .line .content {
  border: none !important;
}
.syntaxhighlighter.collapsed {
  overflow: visible !important;
}
.syntaxhighlighter.collapsed .toolbar {
  color: blue !important;
  background: white !important;
  border: 1px solid #6ce26c !important;
}
.syntaxhighlighter.collapsed .toolbar a {
  color: blue !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
  color: red !important;
}
.syntaxhighlighter .toolbar {
  /* 去掉右上角的小问号(2-1),应根据行交替显示的颜色设置该选项 */
  /* color: white !important; */
  /* background: #6ce26c !important; */
  color: white !important;
  background: white !important;
  border: none !important;
}
.syntaxhighlighter .toolbar a {
  /* 2-2去掉右上角的小问号(2-2) */
  /* color: white !important; */
  color:white !important;
}
.syntaxhighlighter .toolbar a:hover {
  color: black !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
  color: black !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
  color: #008200 !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
  /* 修改字符串值的颜色 */
  /* color: blue !important; */
  color: #a31414 !important;
}
.syntaxhighlighter .keyword {
  /* 修改关键字的颜色 */
  /* color: #006699 !important; */
  color: blue !important;
}
.syntaxhighlighter .preprocessor {
  /* 修改预处理的颜色 */
  /* color: gray !important; */
  color: #02027e !important;
}
.syntaxhighlighter .variable {
  color: #aa7700 !important;
}
.syntaxhighlighter .value {
  color: #009900 !important;
}
.syntaxhighlighter .functions {
  /* 禁止系统函数加粗显示 */
  font-weight: normal !important; 
  color: #ff1493 !important;
}
.syntaxhighlighter .constants {
  color: #0066cc !important;
}
.syntaxhighlighter .script {
  font-weight: bold !important;
  color: #006699 !important;
  background-color: none !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
  /* 禁止数据类型加粗显示 */
  font-weight: normal !important; 
  /* 修改数据类型的颜色 */
  /* color: gray !important; */
  color: #a300a3 !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
  color: #ff1493 !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
  color: red !important;
}

.syntaxhighlighter .keyword {
  /* 取消关键字加粗显示 */
  /* font-weight: bold !important; */
  font-weight: normal !important;
}

这里并没有添加自动换行的功能，暂时先在写博客时手动调整一下单行代码的长度，别越界就OK了。

2.上传源码并在Blog中设置
2.1上传文件

需要上传两种类型的文件：

  • css文件，将刚刚修改好的shCoreDefault.css上传即可。
  • js文件，shCore.js是必传的，另外再可以有选择性的上传你需要的文件。比如我常用C++，偶尔用css，那么就可以只上传shBrushCpp.js和shBrushCss.js两个文件。当然，也可以全部js文件都传上去。

如图(我只上传了部分文件)：

6H91$YI74JO`C3BK_8C7K1N

2.2 设置Blog.

这一步的主要目的是在合适的位置添加合适的源码，使你刚刚上传的源码文件发挥作用。你需要在博客园-->设置-->子标题中添加如图所示代码：

0DU6FRS[_B[A38_V`HSX{)K

全部代码为：

<script type="text/javascript" 
src="http://files.cnblogs.com/chinaxmly/shCore.js"></script>
<script type="text/javascript" 
src="http://files.cnblogs.com/chinaxmly/shBrushCpp.js"></script>
<script type="text/javascript" 
src="http://files.cnblogs.com/chinaxmly/shBrushCss.js"></script>
<script type="text/javascript" 
src="http://files.cnblogs.com/chinaxmly/shBrushXml.js"></script>
<script type="text/javascript" 
src="http://files.cnblogs.com/chinaxmly/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" 
href="http://files.cnblogs.com/chinaxmly/shCoreDefault.css"/>
<script type="text/javascript">
    SyntaxHighlighter.config.strings.help = "";
    SyntaxHighlighter.config.strings.expandSource = "+ 查看代码";
    SyntaxHighlighter.all();
</script>

说明：

  • herf和src的值为你的博客地址加文件名称。
  • “SyntaxHighlighter.config.strings.help = “”;”这句话用于去掉代码右上角的小‘？’号。
3. 个性化代码风格

将你的代码包含在如下的<pre></pre>标签中即可：

<pre class="brush: cpp; highlight: [12, 15]; first-line: 10; 
	html-script: false; light: false; auto-links: false; 
	collapse: true; class-name: 'class_name_demo';">
// 你的代码
</pre>

最终的效果如下所示（C++）：

// 程序初始化仿真

#define TRUE 1
#define FALSE 0

typedef char*			LPSTR;
typedef const char*		LPCSTR;

#include &lt;iostream&gt;

using namespace std;

///
// Window message map handling
struct AFX_MSGMAP_ENTRY;	// declared below after CWnd

struct AFX_MSGMAP
{
	AFX_MSGMAP* pBaseMessageMap;
	AFX_MSGMAP_ENTRY* lpEntries;
};

// DECLARE_MESSAGE_MAP
#define DECLARE_MESSAGE_MAP()													\
	static AFX_MSGMAP_ENTRY _messageEntries[];									\
	static AFX_MSGMAP		messageMap;											\
	virtual AFX_MSGMAP* GetMessageMap() const;

/* 多行代码示例 */
class CFrameWnd : public CWnd uuuuuuuuuuuuuuuuuuuuuyyyy
	yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
	yyyiuojfosfejosifoefsfijsojuosfa;
	fslfjeosjfoaifjeojsosjfessfeoij
{
public:    
	CFrameWnd() { }
	~CFrameWnd() { }

	virtual BOOL Create();
	virtual BOOL PreCreateWindow();
};

/*  单行注释 */

/*
* 多行注释
*/

class CView : public CWnd
{
public:
	CView() { }
	~CView() { }
};

BOOL CWnd::CreateEx()
{
	int x = 7;
	x++;
	char* = "Hello World.";
	PreCreateWindow();
	// 系统函数
	ps1 = (char *)malloc(10);	// 在堆区分配10个字节
	ps2 = (char *)malloc(20);	// 在堆区分配20个字节

	return TRUE;
}

p_large_uR3s_191e00004b112d0d

转载于:https://www.cnblogs.com/chinaxmly/archive/2012/09/27/2706359.html

bairan5365
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SyntaxHighlighter代码加色使用方法
09-06
原名：SyntaxHighlighter，是一款用于web页面的代码着色工具，可以用来着色多种语言，可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言。最早见于Yahoo的YUI，当时还属于自由软件，最近打开官方网站发现已被...
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
10-25
由于我的博客主要是代码分享，很多贴的代码，都很长。很多时候我都是手动给他换行。但是今天实在是受不了。从网上找个办法解决一下
自定义博客园代码格式
aifuxun2845的博客
01-21 181
实现方式 在设置->自定义css里面加入css代码即可。比如github风格 /*.cnblogs_code { background-color: #f5f5f5;border:1px} .cnblogs_code {border-right:gray 1px solid;border-top:gray 1px solid;border-left:gray 1px solid;b...
HTML连载27-层叠性&优先级&！important用法
weixin_44630050的博客
07-31 160
一、层叠性 1.定义：CSS处理冲突的一种能力 2.注意点：层叠性只有在多个选择器中“同一标签”，然后又设置了“相同的属性”，才会发生层叠性 3.CSS缩写：Cascading StyleSheet #odd{color: red;} p{color:blue;} ..........省略代码......... <body> <p id="odd"&g...
syntaxhighlighter高亮动态代码
甘焕的博客
07-07 2965
syntaxhighlighter在版本4.0之后，采用webpack进行打包，没有在window中定义全局变量syntaxhighlighter，所以调用接口高亮动态载入的代码较为麻烦，经过研究，方法有二： 1.采用requirejs加载syntaxhighlighter，每载入一次动态代码模块，就加载一次syntaxhighlighter，代码示例如下：$("#container").
第二章 BIRT设计器概述及本地化支持
iis81365341的专栏
04-19 546
原地址：http://blog.csdn.net/z1012890225/article/details/37815863 var protocol = window.location.protocol; document.write(''); 第二章 BIRT设计器
博客园小技巧
XuanZuoNuo的专栏
08-26 1619
博客园小技巧   作者：Vamei 出处：http://www.cnblogs.com/vamei 欢迎转载，也请保留这段声明。谢谢！ 在博客园写博的半年中，我有时会纠结于一些诸如写作格式和显示效果之类的小问题。我想任何一个热衷于在这里写博客的人都可能会遇到类似的问题，所以就把自己遇到的一些状况和解决方法列出来，以便交流。 在博客园看到不少很绚的博客页面，我
众多最常用的在线Web编辑器预览及下载 整理汇总
06-27 327
jwysiwygWYSIWYG jQuery插件。整个编辑器文件大小只有17Kb。 主页:http://code.google.com/p/jwysiwyg/ 下载:http://jwysiwyg.googlecode.com/files/jwysiwyg-0.5.zip 示例:http://code.google.com/p/jwysiwyg/Damn Smal...
百度富文本编辑器UEditor
anihasiyou的专栏
04-22 6948
Ueditor下载地址
Jquery特效大全
dong717的专栏
01-25 1000
1.导航类 5 (1)Horizontal accordion: jQuery 5 (2)jQuery-Horizontal Accordion 5 (3)jQuery plugin: Accordion 5 (4)Accordion Menu script 6 (5)模仿ext的tab选项卡 6 (6) 8 （7）De-Constructing Accordion and Hove...
商业编程-源码-SyntaxHighlighter高亮代码显示实例源码.zip
06-21
商业编程-源码-SyntaxHighlighter高亮代码显示实例源码.zip
wps代码块插件wps-syntaxhighlighter
10-06
wps代码块插件
SyntaxHighlighter代码格式化高亮插件
09-21
SyntaxHighlighter高亮插件，可以格式化JAVA、PHP、CSS、SQL、XML、Python等等一些主流的代码格式。
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 119
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 197
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
Vue.js的发展史（一）
2301_79683791的博客
05-15 758
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
Vue3详细讲解
贫僧法号依平
05-15 856
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
pyqt SyntaxHighlighter
05-19
在上面的示例中，我们首先创建了一个 `QTextEdit` 部件，然后创建了一个 `SyntaxHighlighter` 实例，并将其应用于 `QTextEdit` 部件的文档中。最后我们将 `QTextEdit` 部件添加到一个 `QVBoxLayout` 中，并将其添加...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值