スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2 ソースコードのハイライトとHTMLエスケープとソースコードの整形

FC2のブログ上にソースコードを載せる方法と、ソースコードの整形、エスケープ等のやり方をメモ。

■ソースコードのハイライトについて

よく見かけるのが「SyntaxHighlighter」について
しかし、私にはこれがどうにも上手く設定できなかった。
ということで「google-code-prettify」を使っている。

このようにソースコードがハイライト化される。

public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}

普通にソースコードを乗せるより、だいぶ見やすい。


■google-code-prettifyのダウンロード
http://code.google.com/p/google-code-prettify/downloads/list
上記サイトから「prettify-small-1-Jun-2011.tar.bz2」をダウンロードする。
※ファイル名は変更されている可能性あり。

解凍するとフォルダに以下の二つのファイルがある。
・prettify.css
・prettify.js
この二つのファイルを使用する。

■テンプレートファイルの編集

ダウンロードしたjs、cssファイルをテンプレートに追記する。
まずはjs、cssファイルのアップロードを行う。

ネット上からファイルが見えれば、どこにアップロードしても問題ない。
とりあえず、FC2の「ファイル管理」を利用する。
※管理画面上は左側「ファイルアップロード」、「新しく記事を書く」画面では「ファイル挿入」が該当する

js,cssの二つのファイルをアップロードするとリンクが確認できると思われるので、そのリンクを覚える。


次にテンプレートの編集

管理画面左側の「テンプレートの設定」からテンプレート一覧を表示
現在使用しているテンプレートの「編集」を実行
<HEAD>と</Head>の間にアップしたjs,cssのファイルを記述する

例)

<link href="<URL>/prettify.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="<URL>/prettify.js"></script>


bodyにonloadを追記する

<body onload="prettyPrint()">


テンプレートの編集は以上

■使用方法


<pre class="prettyprint">
ソースコード
</pre>


ちなみに対応するプログラムは記述しなくてもいいらしい、
ロジック側で勝手に判断するみたい。
※対応プログラム
 CやHTMLなどいろいろあるみたい


■Web上でのソースコードのエスケープ方法

貼り付けるコードの「<」や「>」はそのままでは表示されないのはみんな知っていると思う。
表示させるには、各コードをエスケープ変換させればよい


そこで、ソースコード全てをエスケープ変換してくれるサイト
http://webtools.dounokouno.com/htmlescape/index.html

表示するソースを全て貼り付けて変換するだけ
Web上で出来るというのも便利


■Web上でのソースコードの整形方法

ソースコードがきちんと整形されていれば見やすいが、そうでない場合もある。
そこで、Web上でソースコードを整形してくれるWebサイトを見つけた
http://jsbeautifier.org/

中央の窓にソースコードを貼り付けて、上のでっかいボタンをクリックすると整形してくれる。
ただし、ソース自体がバグっていると整形できないっぽい。
※括弧が足りないなど

なんかJavaScriptとHTMLのみが対象っぽいけど、Javaのソースでもきれいにしてくれた。


以上、3つをメモ。
これで、ブログにソースコードを記載するときに綺麗にできそうだ。

スポンサーサイト

テーマ : HP作成
ジャンル : コンピュータ

おすすめアプリ
カテゴリ
最新記事
リンク
アクセスカウンター
アクセス解析
imobile
i-mobile
i-mobile
i-mobile
i-mobile
i-mobile
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
Amazon
Androidお勧め参考書
EC studio
商品
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。