FC2ブログにCのソースコードを貼り付けてみる実験

他の方々の書かれているブログを見ていると、プログラムのソースコードをきれいに埋め込んであるのをよく見かけます。当ブログでも何度か短いコードを乗せたことはありますが、先頭の半角スペースを全角に変えたりなどいろいろと面倒くさいうえ、そうしてしまったがためにそのまま載せたコードをコピペするだけでは使えないなどの問題があり、何とかならないものかなあと思っていました。

そこで色々調べていて見つけたのが”＜pre＞”というタグです。”＜pre＞”と”＜／pre＞”の間に挟まれた部分については半角スペースがそのまま出力され、しかも等幅フォントで表示されるとのことだったので、試してみました。今回は、以下の書式で使用しました。
＜pre style="color: #ffffff; background-color: #000000; overflow: auto; white-space: pre-wrap; word-wrap: break-word;"＞
＜／pre＞

その結果がこちら…。(コード自体はAVRで68系パラレルバスから読み込みを行うための関数で、大したことはしていません。)

uint8_t p68_readbyte( void )
{
	// 1バイト分のデータを読み込む(データバスDDRは入力に切り替わる)
	uint8_t data;
	uint8_t sr;
	uint8_t es = P68_E0_PIN;
	#if P68_CSNUM
	uint8_t cs = P68_CS0_PIN;
	#endif
	
	sr = SREG;
	cli();
	
	#if P68_ENUM == 2
	if( p68_cs ) {
		es = P68_E1_PIN;
	}
	#endif
	#if P68_CSNUM == 2
	if( p68_cs ) {
		cs = P68_CS1_PIN;
	}
	#endif

	#if P68_CSNUM
	_p68_setctl_0( cs );
	#endif
	P68_DATADDR &= ~_p68_DATABIT;		// データバスを入力に設定
	_p68_setctl_1( P68_RW_PIN );
	_delay_us( P68_TASE );
	_p68_setctl_1( es );
	_delay_us( P68_TDDRE );
	data = _p68_indata();
	_delay_us( P68_PWEH - P68_TDDRE );
	_p68_setctl_0( es );
	#if P68_CSNUM
	_p68_setctl_1( cs );
	#endif
	
	if( sr & ( 1 << SREG_I ) ) {
		sei();
	}
	return data;
}

FC2の場合はなぜかご覧のとおりプロポーショナルフォントで表示されてしまっていますが(汗)、Cのソース程度であればこんな感じでそこそこきれいに仕上がります。しかし、残念ながらHTMLタグはそのまま実行されてしまうので、HTMLタグを含むようなコードは貼り付けられません。また、ブラウザによっては不等号が特殊文字扱いになってしまうため文字化けのリスクもあります。

そこで次に試したのがGitHubの提供しているgistというサービス。これはさすがに専用のサービスだけあって、この通りかなり見やすく表示されます。(こちらはシフトJISコードをJISコードに変換する関数です。)


こちらは利用するのにGitHubに登録する必要があります(無料で登録できます)が、一旦gistにコードをアップロードしてしまえば、このようにwebサイトに埋め込んだり、他人と共有したりといったことが簡単にできるようになります。アカウント登録後の操作手順はとても簡単です。まず、右上のメニューから”Your gists”を選択します。


入力画面が開くので、左上のボックスにファイル名、その下のテキストエリアにコードを入力あるいは貼り付けます。すべて入力が終わったら、右下の”Create public gist”をクリックします。


これでコードが公開された状態になりました。右上の”Embed”ボックスに表示されているコードをブログに貼り付ければ完成です。


今後、当ブログでも短いコードを載せたいときなど、gistを利用していこうと思います。