2015年11月19日木曜日

syntax2htmlを使って、ブログにプログラミングコードを見やすくきれいに貼り付ける

今回はプログラミングの勉強はお休みです。でも、プログラミングに関係する話です。

先日から自分が書いたプログラミングコードをブログに掲載しようと始めたのですが、コードをどうやって表現するか悩んでいました。
色を変えたりフォントを変えたりして、本文と違うことがわかるようにと工夫したつもりですが、やっぱり見にくいなと思っていたのです。

そうしたところ、プログラミングコードをきれいに見やすくすることができるWebサービスを見つけました。
syntax2html : ソースコードをHTMLに変換 というサイトです。



図の(1)のところでプログラミング言語の種類を選択します。
(2)のところにブログに載せたいプログラミングコードを貼り付けます。
(3)でスタイルを選択します。色々なスタイルがあるので、試してお気に入りを見つけてください。
(4)のインラインCSSにチェックを入れると、後で説明するCSSの編集をしなくても見やすくなったプログラミングコードをブログに貼ることができます。CSSをカスタマイズできないブログサービスを使っている場合はこちらを利用してください。

「HTML変換」と書かれた青いボタンを押すと次の画面に変わります。


CSSをカスタマイズできるブログする場合は、上の図の(B)のCSSのところのコードをコピーして、ブログのCSSカスタマイズの欄に貼り付けます。
私はBloggerを利用しているので、ブログの管理ページから、テンプレート→カスタマイズ→上級者向け→CSSの追加を選べば、CSSをカスタマイズできます。
こんな感じに貼り付けます。
ブログで使うコードのスタイルを変更しないかぎり、次回からはCSSの編集は必要ありません。

次にコードを貼り付けるブログ記事の編集をします。
HTML編集モードにして、上記の図の(A) のHTMLの部分のコードをコピーして、ブログ記事の貼り付けたい部分に貼り付けます。

これが使用前の姿です。

そして、こちらが使用後です。

かなり見やすくなりました。
ブログ更新が捗りそうです。

0 件のコメント:

コメントを投稿