/> 忍者ブログ

WEEKEND ECONOMIST

小さな工夫と発見の蓄積

SyntaxHighlighterでコードを綺麗に表示する

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

コメント

ただいまコメントを受けつけておりません。

SyntaxHighlighterでコードを綺麗に表示する

当ブログでもソースコードを綺麗に表示する方法を採用することにした。
少しリサーチした結果、SyntaxHighlighterというプラグイン(?)を導入することに決めた。どうも同名の別のプラグインもあるようで(Crayon Syntax Highlighter)まぎらわしいが、前者の方が動作が軽いという人がいる(ソース)。

SyntaxHighlighterは、一連のJavaスクリプトとCSSファイルから構成されており、ファイルを自分のブログにアップロードし、さらにHTMLのプレアンブルにそれらを読み込むコードを書き加えることで利用する、という仕組みでできている。

最初の記事で早速使用している。
 

以下、導入方法。

上記リンクから最新版をダウンロードしたら、まずはアップロード。
忍者ブログの場合、ファイルのアップロードをするには管理ページのリンクから行える。とりあえず必要なのは、 shCore.js, shCore.css, shThemeDefault.cssの3つと、使いたい言語に対応するJavaスクリプトファイルだけだが(shBrushPython.jsなど)、何も考えずにJSとCSS拡張子のファイルをすべてアップしてもよい。
アップしたら、それらのファイルのURLを確認しておく。おそらく、file.<ブログのURL>/<ファイル名>という感じ。



次にプレアンブルを編集する。これは管理ページの「共通タグ」というところから行う。



書き加える内容は、公式ページの例を参照した。自らアップしたファイルのURLで適宜置き換えるほか、使用したい言語に応じて適宜読み込むJSファイルを増やす。
このブログでの例は、このページのソースを見れば、</head>タグの直前に書いてある。

使い方はきわめて簡単で、
<pre class="brush: python">
ここにコードを書く。
</pre>
のように、PREタグに "brush: 言語名" というクラスを付けるだけ。
PR

コメント

プロフィール

HN:
KM
性別:
非公開

カレンダー

03 2025/04 05
S M T W T F S
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