如何用syntaxhighlighter显示高亮代码

Python014

如何用syntaxhighlighter显示高亮代码,第1张

先去下载syntaxhighlighter最新版本3.0.83这个插件

在页面引入核心js和css,这里我要对js代码高亮,所以引用了JScript.js这个文件

[html] view plaincopy

<link rel="stylesheet" type="text/css"href="css/SyntaxHighlighter.css"/>

<script type="text/javascript"src="js/shCore.js"></script>

<script type="text/javascript"src="js/shBrushJScript.js"></script>

把代码写到一个<pre>或者<textarea>标签里,如图。

需要注意是这里的name和class属性,name是需要通过插件获取才能应用高亮样式,class设置语言的类别及样式选择。

[html] view plaincopy

<pre name="code"class="js">

function a(){

alert("a")

}

</pre>

在页面底部加上

[javascript] view plaincopy

<scripttype="text/javascript">

dp.SyntaxHighlighter.HighlightAll('code')//这里的‘code’ 为上面放置代码的容器

</script>

另外附上语言的别名。

C++cpp, c, c++

C#c#, c-sharp, csharp

csscss

Delphidelphi, pascal

Javajava

Java Scriptjs, jscript, javascript

PHPphp

Pythonpy, python

Rubyrb, ruby, rails, ror

Sqlsql

VBvb, vb.net

XML/HTMLxml, html, xhtml, xslt

class允许配置的选项。

nogutter将不会显示行号

nocontrols将不会在顶部显示控制器

collapse将默认折叠代码

firstline[value]行计数开始值。默认值是 1

showcolumns将在第一行显示行列

这些选项和别名放置在一起,使用冒号 : 字符分隔。

[html] view plaincopy

<pre name="code"class="html:nocontrols:firstline[10]">

<html>

<body></body>

</html>

</pre>

第一种情况,以php脚本为例。所有的*.php文件都显示为文本格式,没有高亮。

选择Files->Settings->File Types

如图查看,不高亮的后缀的文件的格式在不在下面,不在的话,就添加进去。

第二种情况。同一类型中,其他文件显示正常,仅仅某一文件显示为文本格式。比如仅仅index.php显示为文本格式。其他php文件均可以高亮显示。

选择Files->Settings->File Types->Text files

文件格式前后对比。

第一步,下载ruby

点开下载ruby的链接

下载好之后,就需要一步步进行安装了(建议大家把其安装在c盘)

安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。

ok,安装完毕!

打开cmd面板,输入 ruby -v可以看到ruby的版本号说明安装成功。

第二步,安装 Sass

Ruby自带一个叫做RubyGems的系统,用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass,你需要输入下面的命令:

//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)

gem install sass

gem install compass

安装完成之后,应该通过运行下面的命令sass -v来确认应用已经正确地安装到了电脑中:

第三步,安装sublime编辑器的sass插件和sass build插件

打开sublime

首先你要看的是在preference选项下有没有package control这个选项,如果没有的话,就表示你没有Package Control 插件(一个方便 Sublime text 管理插件的插件),这时,你就要从菜单 View - Show Console 或者 ctrl + ~ 快捷键,调出 console。将以下 Python 代码粘贴进去并 enter 执行,不出意外即完成安装

sublime text3

import urllib.request,ospf = 'Package Control.sublime-package'ipp = sublime.installed_packages_path()urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) )open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

sublime text2

import urllib2,ospf='Package Control.sublime-package'ipp = sublime.installed_packages_path()os.makedirs( ipp ) if not os.path.exists(ipp) else Noneurllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( )))open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read())print( 'Please restart Sublime Text to finish installation')

完成了这步之后,再重新打开我们的sublime,按住ctrl+shift+p,并输入install,选择第一个Install Package,

在命令栏中输入"Sass"然后回车,然后在弹出的列表中选择Sass插件,通过鼠标单击或者回车进行安装,可通过左下角状态栏查看安装结果

在命令栏中输入"SassBuild"然后回车,然后在弹出的列表中选择SassBuild插件,通过鼠标单击或者回车进行安装,可通过左下角状态栏查看安装结果

按ctrl+shift+p,输入package,选择list packages,就看到了我们安装的插件列表

如果你看到了sass和sass bulid就说明插件安装成功了。

然后尝试着写一个scss文件,写完之后,按ctrl+b就可以实现sass文件的编译了,会生成一个自动编译生成css文件。

但很不幸我的sublime出现了一个报错[Decode error - output not utf-8]

第四步,解决sublime的编码报错

sublime text有时运行会输出以下错误信息:

[Decode error - output not utf-8]或者[Decode error - output not gbk]

错误信息意思就是脚本输出的信息不是某种指定编码。

用以下方法解决,有点麻烦,要有耐心,别弄错了哦!

1.在sublime text的安装目录下的Packages目录下找到Default.sublime-package,将这个复制出来,将后缀改名为zip.

它就是个zip文件,解压缩它,然后将其中的exec.py文件放到sublime text的DataPackagesUser目录下。

2.打开exec.py文件,找到类ExecCommand的append_data函数,在以下位置添加代码(可以把这段函数的代码替换就好了):

def append_data(self, proc, data):

if proc != self.proc:

# a second call to exec has been made before the first one

# finished, ignore it instead of intermingling the output.

if proc:

proc.kill()

return

#add start

is_decode_ok = True

try:

str = data.decode(self.encoding)

except:

is_decode_ok = False

if is_decode_ok==False:

try:

str = data.decode("gbk")

except:

str = "[Decode error - output not " + self.encoding + " and gbk]\n"

proc = None

# Normalize newlines, Sublime Text always uses a single \n separator

# in memory.

str = str.replace('\r\n', '\n').replace('\r', '\n')

self.output_view.run_command('append', {'characters': str, 'force': True, 'scroll_to_end': True})

其原理就是在解码输出文字编码出错时再使用gbk试试,相当于utf-8和gbk两种编码都试试,这样可以解决编码错误的问题。

OK啦,我安装的时候就出现这些问题了。可以开始使用sass啦~~哈哈哈哈~