コードをきれいに出力してくれる、SyntaxHighlighter の使い方です。とりあえず Ruby でやってみますが、どの言語でも同じです。
コードをきれいに出力してくれる、SyntaxHighlighter の使い方です。とりあえず Ruby でやってみますが、どの言語でも同じです。
ここからダウンロードして、展開して下さい。
必須なファイルは、shCore.css, shCore.js, shThemeDefault.cssと、Ruby なら shBrushRuby.js です。これらを適当な場所に置いて下さい。
基本的な使い方はここに書いてあります。
HTMLを編集します。<head></head> の中に、下の記述を挿入して下さい。順番はこの順にして下さい。
<script type="text/javascript" src="shCore.js"></script> <script type="text/javascript" src="shBrushRuby.js"></script> <link rel="stylesheet" type="text/css" href="shCore.css"> <link href="shThemeDefault.css" rel="stylesheet" type="text/css">
そして、ハイライトしたいコードを <pre class="brush: ruby"></pre> で囲んで下さい。
<pre class="brush: ruby">
class String
def palindrome?
self == reverse
end
end
counter = 10
begin
next unless counter.to_s.palindrome?
next unless counter.to_s(2).palindrome?
next unless counter.to_s(8).palindrome?
break
end while (counter += 1)
puts counter #=>585
</pre>
そして、</body> の前に
<script type="text/javascript">SyntaxHighlighter.all()</script>
を置きます。以上でお終いです。これをブラウザで読み込んでみると、
class String
def palindrome?
self == reverse
end
end
counter = 10
begin
next unless counter.to_s.palindrome?
next unless counter.to_s(2).palindrome?
next unless counter.to_s(8).palindrome?
break
end while (counter += 1)
puts counter #=>585
という感じで表示されればOKです。
なお、最初の色使いなどが気に入らなければ、shThemeDefault.css を編集してみて下さい。自分でカスタマイズできます。上の表示も、多少カスタマイズしてあります。
また、デフォルトのテーマ以外の css を使うことができます。例えば shThemeFadeGrey.css を使えば、
class String
def palindrome?
self == reverse
end
end
counter = 10
begin
next unless counter.to_s.palindrome?
next unless counter.to_s(2).palindrome?
next unless counter.to_s(8).palindrome?
break
end while (counter += 1)
puts counter #=>585
という感じになります。