当前位置:首页 > 公司荣誉 >

WebView使用SyntaxHighlighter实现代码高亮

发布时间:2017-09-12 16:34:20 作者:陕西誉丰源物资有限公司

WebView使用SyntaxHighlighter实现代码高亮

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


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

SyntaxHighlighter的使用正是修改标签的class属性

其中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>" + "" + "" + "<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;/**可滚动 */ overflow-y: hidden !important;/**竖直不可滚动 */ white-space: nowrap!important; }
经过以上的配置,然后就是修改标签的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客户端。




企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:武汉网站设计公司 https://www.feimao666.com

  • 上一篇:数据结构之---C语言实现直接插入排序
  • 下一篇:最后一页