ソースコードを綺麗に表示するプラグイン追加

サルでき.jp > 02.使い方 > ソースコードを綺麗に表示するプラグイン追加

2011/08/05 11:16 投稿先 02.使い方 投稿者 カワサキ タカシ

た目だけのソースコードと思わないで頂戴っ!

はい、そういうわけでございまして。
調子に乗って機能追加しまくりのサルでき.jp。
本日はエンジニアのみなさまには無くてはならないプラグインを導入してみました。


2011.8.12 追記

※Sheileさんからのコメントにありますように、
寺子屋やブログ内ではこちらのプラグインは有効に動きますが、
活動欄においては、コードの文字が表示されません。

これはコード部分を示すショートコードの記述が、
掲示板のインフラであるbbPress、ブログのインフラであるWordPressではDBに格納されるものの、
コミュニティのインフラであるBuddyPressでは禁則扱いで自動削除されている可能性が考えられます。

複数の別のプラグインや、ソースコード自体の修正を施しましたが、
望むべく状態にたどり着くことが出来ませんでした。

ただし、コード表示は全ブログで必要になる可能性がありますので、
こちらのプラグインはそのまま実装をします。

活動欄ではコード部分は表示されない。
という仕様であるとします。
コード部分は各記事にアクセスしてご確認ください。

ご理解のほど宜しくお願いいたします。


こちらです。
SyntaxHighlighter Evolved
Syntax Highlighter for WordPressが何故か動かなかったのでこちらを採用

シンタックスハイライター。
新しいタバコの銘柄か、70年代のアメリカ車か。
そんな角々しい名前のこちらのプラグイン。実は結構お馴染みのコイツです。

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 160, 30)];
label.text = @"Hello world!";
[self.view addSubview:label];

あー、見たことあるかも。ですね。
ソースコードを綺麗に表示してくれる、ブログでよく見かけるお助けツールです。

全市場、及び寺子屋講義に導入しましたので、
サルでき.jp内どこでもお使いいただくことができます。

入力時の使い方

講義でコードを書き込む場合を見てみましょう。
やり方はとっても簡単。
SyntaxHighlighter
ソースコードとして表示したい箇所の前後に、こんな感じにタグを書くだけです。

上記はC言語のコードを書く場合のタグでして、
プラグインとして使えるタグの種類はこれだけあります。
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

あら〜、いろいろありますね。
えーと、Objective-Cは、と。

NOT FOUND.
どうせ。どうせね。マイナーな言語ですよマイナーな。
iPhoneアプリ開発なんて浮かれてますけどこの程度の扱いですよ。へっ。

ということで、C、というか実際はC++あたりのコードにお邪魔しておきましょ。
色は付きませんが、行番号やらスクロールバーは付きますので、素で貼り付けるよりイイですね。

設定カスタマイズ方法

自分の市場でも使いたいよ〜という場合、
そのまま使うこともできるのですが、表示のカスタマイズを行うこともできます。

いつものようにダッシュボードの設定欄にGO。
SyntaxHighlighter
ありましたね。SyntaxHighlighter。

クリックすると設定画面が開きます。
SyntaxHighlighter
<クリックで拡大>

わかりにくいところはそれほど無いとは思いますが、
とりあえずバージョンは3.xで問題なさそうです。

画面の下に適宜プレビューが出ますので、
「変更して保存して確認して」を繰り返してお気に入りの表示方法をお選びください。
講義ではあまりドギツくならないようにEclipseのテーマに設定しています。

それでは、ステキなソースコードライフを!行ってらっしゃい!

関連する記事:


Advertisement