一つ前のの記事では、すごく簡素なソースコードを見やすく載せさせていただきました。
どういうふうにやったかというと、ソースコードを行番号付きで見やすくしてくれるJavaScriptのソースをブログで読み込み、それを呼び出して使いました。
まったく、説明になってないと思いますが、「SyntaxHighlighter(シンタックスハイライター)」というものを使っています。
ソースコードをブログやサイトで公開されているところでは、結構使われています。
実際の使い方を見たほうが、どんなものかわかりやすいと思うので、早速説明していきます。
SyntaxHighlighterを使うためのコードを取得できるサイトがあるのですが、現在ページに問題があるためなのか、コードが出てこなくなっています。
なので、コードは、ブログのhtmlソースに無理やり埋め込んで、それを利用する方法になります。
以下のコードをブログのhtmlソースに埋め込みます。
Bloggerのテンプレート > HTMLの編集」で、現在利用しているブログのhtmlソースが表示されます。
「＜/head＞」というタグの一行上に貼り付けます。
共通で必要となるのは、1・4行目です。2・3行目は、何の言語のソースコードを載せるかによって、必要なものが変わってきます。
上記のコードでは、XMLおよびHTML系などのタグで表現する言語とJavaScriptのソースコードを載せるのに適した設定になります。
言語によってどのjsファイルを読みこむのか変わってきます。変わるのは、上記で言うところの「shBrushXml.js」と「shJScript.js」の部分。
下記の公式ページを参考に、どのjsファイルを読み込むのかを確認し、ファイル名コピーして、書き換えます。
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
例えば、C#のソースコードを載せる場合は、下記の設定になります。
あれ？最初のコードの所で、5行目の部分の説明が抜けていましたね。。
五行目は、適用するテーマです。7つの好きなテーマを選んで使用することができます。
以下のページで、見本を確認して、好きなテーマを選びましょう。
先程の言語によって読むこむjsを変えるのと同様に、こちらもテーマによって、読み込むcssファイルが変わるので、好きなテーマのcssファイルをコピーして、ファイル名を置き換えます。
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/default.html
最後に、下記コードを「＜/body＞」の一行上に貼り付けて、準備完了です。
※最後、＜＞が全角文字なのは、なぜかここがエラーになってしまったからです。ここも半角文字として読み取ってください。。
さて、実際に記事にどうやって反映させるかというと、下記のように使います。
使い方は2つありましたが、XMLやHTMLなどは、scriptタグで囲む必要があります。
preタグでは、実際のタグと認識されてしまい、記事上では表示されなくなってしまいます。
type="brush: alias"のaliasの部分は、載せるソースコードの言語に合わせて切り替えてください。
先程のテーマの一覧のページで確認できます。
もし、分からない部分があれば、コメントを下さい。。
0 件のコメント:
コメントを投稿