読者です 読者をやめる 読者になる 読者になる

satoshi_komyのブログ

気になったことを書き連ねていきます

はてなブログでソースコードを載せるには…?

ソースコードの記載方法アレコレ

前回のブログでGoogleスプレッドシートGoogle Apps Scriptを使ったものを掲載したのだが、ソースコードの記載がちょっと…ってな感じだったので、はてなブログで使えるソースコードの記載方法をいくつか調べてみた。いくつかあるので、そのときそのときで使いわければいいかと思う。

スーパーPRE記法

スーパーPRE記法ははてなブログが公式に用意している記法のひとつで、もっともシンプルかつ簡単に利用できるもの。このブログで使うと背景が黒っぽくなるが、これはテーマに影響されているんだろうか?詳細は不明。

<html><head><title>test</title></head>
<body>This is a pen.</body></html>

入力したコードやはてな記法をそのまま表示する(スーパーpre記法) - はてなダイアリーのヘルプ

シンタックスハイライト記法

シンタックスハイライト記法はてなブログが公式に用意している記法のひとつで、上記のスーパーPRE記法の拡張のようなもの。キレイに色を振ってくれるので、ただのスーパーPRE記法よりも読みやすい。

<html><head><title>test</title></head>
<body>This is a pen.</body></html>

help.hatenablog.com

Gistから貼り付ける

Githubが提供するソースコード公開サービスであるGistというものにあるソースコードを貼り付けることができるようです。プログラムガシガシやってますという人のブログをみると、よく使われていたりします。が、私はGistのアカウントを持っていないので、紹介だけ。
staff.hatenablog.com

Gistだとかっこいいです、ついでに行番号も付与されるので非常にわかりやすい。プログラマではない私からすると、こういう親切なサービスもはてな記法で使えるといいのに…なんて思ってしまう。

HTMLのpreタグやcodeタグ

HTMLのpreタグやcodeタグも使える。が、はてなブログであるならばシンタックスハイライト記法で問題ないような気もする。

まとめ

はてなブログソースコードを書くのであれば、手間がかかることを考慮すればシンタックスハイライト記法、手間を惜しまない・見栄えを気にするということであればGist貼り付けだなと思う次第である。

Google Appsでつくる仕事便利ツール ?Google Apps Scriptで実践構築?

Google Appsでつくる仕事便利ツール ?Google Apps Scriptで実践構築?