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”を選択します。
gist_1.jpg

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

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

今後、当ブログでも短いコードを載せたいときなど、gistを利用していこうと思います。
関連記事
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

tag : pre HTML タグ gist GtiHub ソースコード

コメント

非公開コメント

アクセスカウンタ
カレンダー
02 | 2021/03 | 04
- 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 31 - - -
最新記事
最新コメント
リンク
カテゴリ
楽天お勧め商品
検索フォーム
Kyoroのつぶやき
FC2掲示板
ブロとも申請フォーム

この人とブロともになる

RSSリンクの表示