首页 > 代码库 > WebView使用SyntaxHighlighter实现代码高亮

WebView使用SyntaxHighlighter实现代码高亮

在上一篇文章中已经解决图片的适配问题,现在查看博文时只有长代码(代码的宽度超过屏幕宽度)会导致水平滑动,并且代码没有高亮显示,使得可读性很差。查找资料得到一个开源的插件SyntaxHighlighter,通过css、js实现代码高亮度。


查看CSDN博文的源码发现代码的标签都是<pre name="code" class="java">,html的<pre>标签是可以保持原有内容的格式,name属性是表明内容为代码,class属性表明代码的类型。

SyntaxHighlighter的使用正是修改<pre>标签的class属性<pre class="brush: java; gutter: false;">

其中java就是指代码类型,gutter是设置行号,false为不显示行号。

在使用前还需要调用基本的js、css包,核心的shCore.js、shCore.css、shThemeDefault.css,其他的就是根据需求添加相应的包。下载地址SyntaxHighlighter

需要在html标签内添加的代码:

	// 链接样式文件,代码块高亮的处理
	public final static String linkCss = 
			  "<script type=\"text/javascript\" src=http://www.mamicode.com/"file:///android_asset/shCore.js/"></script>">
其中导入了cpp、xml、javascript、java等额外的四个包。

需要把相应的文件(从下载的包里面选取)置于Android项目的assets文件夹下,shThemeDefault.css文件里面是定义的默认的一些样式,主要是代码颜色的配置;shCore.css文件主要是代码的缩进,以及其他的布局配置。

我的需求是长代码不换行,但是可以水平滚动,这样的话修改shCore.css文件

.syntaxhighlighter .line .content
{
	padding-left: .5em !important;
	white-space: pre !important; /**强制不换行 */
}
.syntaxhighlighter .lines.no-wrap
{
	overflow: auto !important;<span style="font-family: Consolas, 'Lucida Console', monospace;">/**可滚动 */</span>
	overflow-y: hidden !important;<span style="font-family: Consolas, 'Lucida Console', monospace;">/**竖直不可滚动 */</span>	white-space: nowrap!important;
}

经过以上的配置,然后就是修改<pre>标签的class属性了,方法跟上一篇文章一样的:

			Elements codeElements = detail.select("pre[name=code]");
			for (Element codeNode : codeElements) {
				codeNode.attr("class", "brush: java; gutter: false;");
				Log.i(TAG, "codeNode.text()" + codeNode.text());
			}
			
			return JsoupUtil.linkCss + detail.toString();
注意把刚才定义的css样式添加到html代码(detail)中。因为我只是把html中文章内容部分截取出的片段,所以可以直接通过字符串拼接完成,如果是整个html的话就需要通过jsoup操作了。

经过如此的处理,博文的显示终于是把宽度问题搞定了。


ps:今天意外发现csdn有开放的接口,后期如果方便的话,会通过接口完成CSDNBlog客户端。




WebView使用SyntaxHighlighter实现代码高亮