Result
コードはまだ実験的なもののようです。本当に簡易的なものだけど少ないコードで済むのは良いですね。
jQuery
// Pure JQuery Syntax Highlighter by Taufik Nurrohman// Still an experimental :)// https://plus.google.com/108949996304093815163/about$(window).load(function() { $('pre').each(function() { //特定のキーワードをリスト化 var list = "(true|false|null|main|in|endif|if|endfor|for|while|finally|var|new|function|do|return|void|else|break|catch|instanceof|with|throw|case|default|try|this|switch|continue|typeof|delete)", rep1 = new RegExp(list + " ", "ig"), rep2 = new RegExp(list + "( ?)<span", "ig"), $this = $(this); $this.html($this.html() //各タグをclassを持ったspanで囲う .replace(/(<br>|\n)$/ig, "") .replace(/(\t)/ig, " ") .replace(/"/ig, "\"") .replace(/'|'/ig, "\'") .replace(/(.?)'(.*?)'/g, "$1<span class='str'>\'$2\'</span>") .replace(/(.?)"(.*?)"/g, "$1<span class='str'>\"$2\"</span>") .replace(/(.?)(""|'')/g, "$1<span class='value'>$2</span>") .replace(/(#[A-F0-9]{3,6})/ig, "<span class='hex'>$1</span>") .replace(/(\d+(?!(.*<)))/g, "<span class='num'>$1</span>") .replace(/((#|\.)[\-_A-Z0-9]+)/ig, "<span class='selector'>$1</span>") .replace(/(\{|\}|\(|\)|\[|\])/g, "<span class='bracket'>$1</span>") .replace(/<(.*?)>/g, "<span class='tag'><$1></span>") .replace(/<!--([\s\S]*?)-->/gm, "<span class='comment'><!--$1--></span>") .replace(/\/\*([\s\S]*?)\*\//gm, "<span class='comment'>/*$1*/</span>") .replace(/[^\:]\/\/(.*)/g, "<span class='comment'>//$1</span>") .replace(/<\/span>\/(.*)\/([gim]+),( ?)<span class='str'>/g, "</span><span class='regexp'>/$1/$2</span>, <span class='str'>") .replace(rep1, "<span class='keyword'>$1</span> ") .replace(rep2, "<span class='keyword'>$1</span>$2<span") .replace(/function<\/span> (.[^<]*)<span/g, "function</span> <span class='name'>$1</span><span") .replace(/([\-_A-Z]+)(?=(\s+|)):(.(?!\{)*)/ig, "<span class='attribute'>$1</span>:$2$3") .replace(/h<span class='num'>([1-6])<\/span>/ig, "h$1") .replace(/!important/ig, "<mark class='important'>!important</mark>") .replace(/<!(doctype)(.*)>/ig, "<span class='doctype'><!$1$2></span>") .replace(/@<span class='attribute'>(import|page|media|charset|keyframes|font-face)<\/span>/ig, "@$1") .replace(/(@(import|page|media|charset|keyframes|font-face))/ig, "<span class='keyword'>$1</span>") .replace(/<span class='bracket'>\[<\/span>(.*)<span class='bracket'>\]<\/span>/ig, "<span class='array'>[$1]</span>") ).find('.str span, .regexp span, .comment span, .doctype span, .hex span, .array span, .url span').contents().unwrap(); $this.append('<div class="the-num"></div>'); // 行数をつける var num = $this.html().split(/\n|<br>/).length, count = 0; for (var i = 0; i < num; i++) { count = count + 1; $this.find('.the-num').append(count + '.<br/>'); } $this.css('padding-left', $this.find('.the-num').outerWidth()+14); });}); |
css
/*それぞれのコードをスタイル*/pre .bracket {color:darkblue;}pre .tag,pre .tag .keyword,pre .tag .attribute {color:blue;}pre .selector {color:blue;}pre .attribute,pre .regexp {color:darkorange;}pre .str {color:green;}pre .tag .str {color:brown;}pre .keyword {color:darkred;}pre .comment {font-style:italic;color:#999;}pre .num,pre .hex {color:darkviolet;}pre .name,pre .important,pre .array {color:red;}pre .important {background-color:yellow;}pre .doctype {color:magenta;} |
html
<pre><!DOCTYPE html><html><head><meta charset="utf-8"><title>Sample Page</title></pre> |
via
Eksperimen Syntax Highlighter
...
www.dte.web.id
