プログラミングされている方のブログを見るとソースコードを綺麗に表示しているのをよく見かけます。
どうやっているのかなー、と調べたら syntaxhighlighter というJavaScriptを使用しているみたい。
と、いうわけで戌印でも導入してみました。
↓こんなやつね
最初、何度やっても上手く表示されませんでしたが 46web -spin_out- 【FC2】SyntaxHighlighter 3.0.83 様を参考にやったらできました。感謝。
というわけで、ダウンロードからアップロード、カスタマイズに使い方まで 46web -spin_out- 【FC2】SyntaxHighlighter 3.0.83 様を参考にしましょう！
テヌキ チガウヨ
--------------------------------------------------
以下、手間取ったところとか。
最初にやったときに上手く表示できなかったのはテンプレートに記述する JavaScript の宣言を <BODY> 付近でやっていたのが原因でした。
<SCRIPT>タグを記事より下に書かないと、どの言語か認識できないため表示できないとのこと。
FC2ブログだと </BODY> のすぐ上に書くといいみたい。
ブログの設定をしてソースコードをブログ上に貼り付けるには <pre class="brush: 使用する言語;">ソースコード</pre> で囲みます。
最初に表示したのを書くとこうなります。
最初参考にしていたサイトのバージョンは 1.5.1。
その場合のソースコードを貼り付けるタグは <pre name="code" class="使用する言語">ソースコード</pre> となっていました。
バージョンによってタグが変更されているかもしれませんので気をつけてください。
(上記のタグを 3.0.83 で試しても syntaxhighlighter は反応しませんでした)
■ 2011/06/20 ソースコードコピー方法追記 ------------------------------
以前のバージョンではソースコードの上段にコピーがあったのに最新のに無いなーということで調べた。
※普通に選択してコピーすると行番号までコピーされてしまう
今までのソースコードのコピー機能はFlashを使用していた為、最近のFlash嫌厭の風潮から仕様を変更したようです。
たしかにFlashだけで構成していて重いサイトとかあるけどアレはデザインする側の問題であって、一番の原因はAppleのFlash未対応端末なんじゃないかと思ったり。
今はソースコード上でダブルクリックすると色が反転するので、その状態でコピー（ctrl + c または 右クリック→コピー）するだけでＯＫ。
仕様を理解している人ならいいけど、わからない人にはわからないんじゃないかな、これ…
■ 2011/06/25 指定行をハイライト ------------------------------
特定行だけ色を変えるには、タグの中にある class に highlight:[行番号,行番号]; を追加します。
どうやっているのかなー、と調べたら syntaxhighlighter というJavaScriptを使用しているみたい。
と、いうわけで戌印でも導入してみました。
↓こんなやつね
public static void main(String[] args) {
System.out.print("Hello world");
}最初、何度やっても上手く表示されませんでしたが 46web -spin_out- 【FC2】SyntaxHighlighter 3.0.83 様を参考にやったらできました。感謝。
というわけで、ダウンロードからアップロード、カスタマイズに使い方まで 46web -spin_out- 【FC2】SyntaxHighlighter 3.0.83 様を参考にしましょう！
テヌキ チガウヨ
--------------------------------------------------
以下、手間取ったところとか。
最初にやったときに上手く表示できなかったのはテンプレートに記述する JavaScript の宣言を <BODY> 付近でやっていたのが原因でした。
<SCRIPT>タグを記事より下に書かないと、どの言語か認識できないため表示できないとのこと。
FC2ブログだと </BODY> のすぐ上に書くといいみたい。
ブログの設定をしてソースコードをブログ上に貼り付けるには <pre class="brush: 使用する言語;">ソースコード</pre> で囲みます。
最初に表示したのを書くとこうなります。
<pre class="brush: java;">
public static void main(String[] args) {
System.out.print("Hello world");
}
</pre>
最初参考にしていたサイトのバージョンは 1.5.1。
その場合のソースコードを貼り付けるタグは <pre name="code" class="使用する言語">ソースコード</pre> となっていました。
バージョンによってタグが変更されているかもしれませんので気をつけてください。
(上記のタグを 3.0.83 で試しても syntaxhighlighter は反応しませんでした)
■ 2011/06/20 ソースコードコピー方法追記 ------------------------------
以前のバージョンではソースコードの上段にコピーがあったのに最新のに無いなーということで調べた。
※普通に選択してコピーすると行番号までコピーされてしまう
今までのソースコードのコピー機能はFlashを使用していた為、最近のFlash嫌厭の風潮から仕様を変更したようです。
今はソースコード上でダブルクリックすると色が反転するので、その状態でコピー（ctrl + c または 右クリック→コピー）するだけでＯＫ。
仕様を理解している人ならいいけど、わからない人にはわからないんじゃないかな、これ…
■ 2011/06/25 指定行をハイライト ------------------------------
特定行だけ色を変えるには、タグの中にある class に highlight:[行番号,行番号]; を追加します。
<pre class="brush: java;highlight: [2,3,4,5];">
/**
* コメント行（２～５行）に色をつけています
* @param args
*/
public static void main(String[] args) {
System.out.print("Hello world");
}
スポンサーサイト
