技術ブログはじめました-はてなブログでのコードの書き方について
初めまして!
新人に毛が生えている程度のWebプログラマーの『へびさん』です。
技術的に伸び悩んでいる今日この頃、新人エンジニアの友人『ねこさん』と時々一緒に勉強するようになり、どうせなら共同で技術ブログ運営してみる?という流れになりました。
技術ブログなので、記事にコードを書きたい。そんな時もありますよね。
というわけで、そのやり方を模索してみました。
はてなブログではシンタックスハイライトを使って、それなりに装飾できる模様です。
シンタックスハイライトは記事を書くときに編集方法を
のどちらかにすることで使用することができます。
ちなみにこの記事は「はてな記法」を選択して書いています。
はてな記法での書き方
フォーマット
>|ファイルタイプ|
||<
例えばPHPのコードを表示したい場合は以下のようにします。
>|php|
<?php
function Foo($_name){
echo 'Hello' . $_name;
}
?>
||<
とすると…
<?php function Foo($_name){ echo 'Hello' . $_name; } ?>
できました!
>|php| と||<の前にスペースが入っていると反応してくれませんので気を付けてください。
また、phpの場合、コードを開始タグ(<?php)と終了タグ( ?>)で括ってあげないとハイライトがつきませんでした。
まだ他のファイルタイプは試してみていませんが、それぞれ注意点がありそうですね。
Markdownでの書き方
フォーマット
```ファイルタイプ
```
例えばRubyのコードを表示したい場合は以下のようにします。
今回は動作確認をしないのでこちらからサンプルをそのまま転載。
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
以上がはてなブログのシンタックスハイライトを使ったコードの書き方です。
そのほかの方法として、編集サイドバーからGist貼り付けを選択することができます。
Gist
一番右側にあるサイドバーの「+」ボタンをクリックして編集サイドバーから「Gist貼り付け」をONにします。
認証が済んだらサイドバーにGithubのネコマークが追加されるのでそれをクリック。
するとGithubGistに登録してあるコードスぺニット一覧が表示されるのでアップしたいコードスぺニットを選択すると…
できました!
…
…
普通にGistのEmbed欄をそのまま貼り付けたほうが早い気がする…
GithubGist