ブログでコードハイライトする

ブログに書いたコードにコードに色を付けて表示したいなということで、ブログでコードハイライトできるようにしました。
その方法を紹介します。


スクリプトをダウンロードする

コードに色を付けるにはコードハイライトの JavaScript を使う必要があります。
コードハイライト用のスクリプトはいろいろ公開されているのですが、私は対応している言語が多かった SHJS というのを使いました。
他にも SyntaxHighter というスクリプトが有名で試してみたのですが、こちらは何故かうまく色が付いてくれませんでした。 (^^;)

まず、以下のサイトから必要なファイルまたはコード一式をダウンロードしてきます。
http://shjs.sourceforge.net/index.html


自分のブログにファイルをアップロードする

ダウンロードしてきたファイルを自分のブログにアップロードします。このとき最低限必要なファイルは 2 つです。
  • スタイルシード sh_style.css
  • メインのスクリプト sh_main.js

後はハイライトしたい言語のスクリプト sh_xxxx.js をアップロードしておきます。

このとき後で使うのでアップロード先のパスをコピーしておいてください。


テンプレートを編集する

アップロードしたスタイルシートとスクリプトを呼び出せるように head タグ内に以下のような行を追加します。


<head>
:
<link type="text/css" rel="stylesheet" href="http://blog.../sh_style.css" >
<script type="text/javascript" src="http://blog.../sh_main.js"></script>
<script type="text/javascript" src="http://blog.../sh_cpp.js"></script>
<script type="text/javascript" src="http://blog.../sh_html.js"></script>
<script type="text/javascript" src="http://blog.../sh_ruby.js"></script>
:
</head>


あと、ページのロード時にスクリプトを実行するように body タグに onload="sh_highlightDocument();" の記述を追加しておきます。

<body id="pagetop" onload="sh_highlightDocument();">


これでコードに色をつけて表示することが可能になりました。


コードを書く

実際にブログ中にコードを書く場合には、クラス属性でコードを指定した pre タグ内に書きます。


<pre class="sh_xxx">
色を付けたいコード
</pre>


ここの sh_xxx は言語ごとに変わるところで、スクリプトのファイル名の .js の前の部分です。

ただし、 html ファイル内では <, >, & は使用できないので、コード中の文字はそれぞれ &lt;, &gt;, &amp; に変換しておく必要があります。

関連記事
スポンサーサイト
Prev.    Category    Next 

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
43位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
3位
アクセスランキングを見る>>
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

05月 | 2017年06月 | 07月
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -


はてな新着記事
はてな人気記事
ブロとも申請フォーム
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。