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=\"file:///android_asset/shCore.js\"></script>"
			+ "<script type=\"text/javascript\" src=\"file:///android_asset/shBrushCpp.js\"></script>"
			+ "<script type=\"text/javascript\" src=\"file:///android_asset/shBrushXml.js\"></script>"
			+ "<script type=\"text/javascript\" src=\"file:///android_asset/shBrushJScript.js\"></script>"
			+ "<script type=\"text/javascript\" src=\"file:///android_asset/shBrushJava.js\"></script>"
			+ "<link rel=\"stylesheet\" type=\"text/css\" href=\"file:///android_asset/shThemeDefault.css\">"
			+ "<link rel=\"stylesheet\" type=\"text/css\" href=\"file:///android_asset/shCore.css\">"
			+ "<script type=\"text/javascript\">SyntaxHighlighter.all();</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客户端。