2011年05月12日
無料ブログでSyntaxHighlighterを使う
今日は小ネタです。以前にソースコードをハイライトしてみやすく表示したいという事でgoogle-code-prettifyを使って実現しました(ライブドアでは標準で使える)が、google-code-prettifyの残念な点としては行番号が表示されないんですね。それで本当はSyntaxHighlighterを使いたかったのですが、無料プランのブログだとファイルのアップロードは出来ないので諦めていました。
しかし、よく考えるとDropboxの公開フォルダにファイルを置いてリンクを参照すれば無料ブログでも気軽にjavascriptを利用出来るんじゃないかと思い、試してみましたのでご報告します(既に誰かが報告していそうな話ですが)。
しかし、よく考えるとDropboxの公開フォルダにファイルを置いてリンクを参照すれば無料ブログでも気軽にjavascriptを利用出来るんじゃないかと思い、試してみましたのでご報告します(既に誰かが報告していそうな話ですが)。
SyntaxHighlighterのダウンロードとDropboxへの保存
先ずはSyntaxHighlighterをダウンロードしまして解凍した中身の内、scriptsとstylesフォルダをDropboxのPublicフォルダに保存します。
Publicフォルダに保存したファイルは右クリックで公開URL(リンク)をコピーできるので、これから必要になるファイルはこうしてリンクを取り出します。
ライブドア・ブログの設定
ブログ設定、デザイン、デザインカスタマイズから個別記事ページを選択し、<head></head>の間に利用するスタイルシートとjavascriptを記述(Dropboxの公開URL)します。
僕の場合は、HTML、Java、Javascript、Rubyが使えれば問題無いのでこんな感じになります。
<link type="text/css" rel="stylesheet" href="http://dl.dropbox.com/u/5966412/syntaxhighlighter/styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="http://dl.dropbox.com/u/5966412/syntaxhighlighter/styles/shThemeEclipse.css" />
<script type="text/javascript" src="http://dl.dropbox.com/u/5966412/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/5966412/syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/5966412/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/5966412/syntaxhighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/5966412/syntaxhighlighter/scripts/shBrushRuby.js"></script>
SyntaxHighlighterの詳しい使い方は、検索すれば沢山見つかりますよ。
SyntaxHighlighterの詳しい使い方は、検索すれば沢山見つかりますよ。
最後に記事下に
<script>SyntaxHighlighter.all();</script>
を追記してハイライト処理を呼び出します。僕は<$PortalLinks$>の上あたりに追加。
実際に使ってみる
では実際に試してみます。
普通に書くとこんな風に見えるJavaのコードを
public class Hoge {
/**
* @param args
*/
public static void main(String[] args) {
// TODO Auto-generated method stub
System.out.println("Hello World!");
}
}
<pre class="brush:java">〜</pre>タグで囲むと
※brush:”言語名”<pre class="brush:java">〜</pre>タグで囲むと
public class Hoge { /** * @param args */ public static void main(String[] args) { // TODO Auto-generated method stub System.out.println("Hello World!"); } }
出来ましたー。
無料ブログでもjavascriptで色々遊べますね。
JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで
posted with amazlet at 11.05.12
山田 祥寛
技術評論社
売り上げランキング: 638
技術評論社
売り上げランキング: 638