使用Prism为自己网页中的代码添加行号以及着色。
Prism官网。可以根据自己的需求定制js和css。
发布一段actionScript代码，安卓官网的demo，应该这么写：
<pre> <code class="line-numbers language-actionscript">
import flash.display.MovieClip;
import flash.events.Event;
public class Main(){
public function Main(){
stage?initStage(null):addEventListener(Event.ENTER_FRAME,initStage);
}
private function initStage(e:Event):void{
removeEventListener(Event.ENTER_FRAME,initStage);
}
}
</code></pre>
但是使用ueeditor编辑的时候会出问题，编辑器会自动把<code></code>标签滤除掉。百度一下，有很多人提到这个问题，这确实是一个很傻的功能。
一开始想着改改ueeditor的源码，改了半天也没有改对，试着把<code>标签去掉，只保留<pre>标签，把class属性给<pre>标签，也不行。
试了试，<script>标签可以用，干脆用代码写了。代码如下：
<pre id="mycode">
import flash.display.MovieClip;
import flash.events.Event;
public class Main(){
public function Main(){
stage?initStage(null):addEventListener(Event.ENTER_FRAME,initStage);
}
private function initStage(e:Event):void{
removeEventListener(Event.ENTER_FRAME,initStage);
}
}
</pre>
<script>
var co=document.getElementById("mycode");
console.log(co);
co.innerHTML='<code class="line-numbers language-actionscript">'+co.innerHTML+"</code>";
</script>
效果：
import flash.display.MovieClip;
import flash.events.Event;
public class Main{
public function Main(){
stage?initStage(null):addEventListener(Event.ENTER_FRAME,initStage);
}
private function initStage(e:Event):void{
removeEventListener(Event.ENTER_FRAME,initStage);
}
}
一开始发现是乱码，一点一点排除，最后发现是zb_users/theme/default/style/default.css的问题，default.css中的.function和prismjs中的冲突了。
不敢改default.css，所以还是需要改prismjs。
修改prism.css中的.token.function，修改如下：
.token.function {
float:none;
color: #DD4A68;
}
再发一个html的demo。
<html> <body> hello </body> </html>
直接把js写到html里边效果比较好，但是为了维护方便，这里改成了引用外部js的方式。
由于存在这种情况：同一篇文章中可能存在多段同种类型的代码，所以用指定pre标签的id的方法就不合适了，用class比较合适。所以修改了js代码，以后不同类型的代码，指定pre标签的class即可，为了向前兼容，所以现在同时支持id和class。
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。