ねこさんとへびさんの新人技術ブログ

新人エンジニアのねこさんとへびさんの、技術向上のためのブログです。

技術ブログはじめました-はてなブログでのコードの書き方について

初めまして!
新人に毛が生えている程度の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にします。
f:id:tksptan:20180226190856j:plain

認証が済んだらサイドバーにGithubのネコマークが追加されるのでそれをクリック。
f:id:tksptan:20180226191305j:plain

するとGithubGistに登録してあるコードスぺニット一覧が表示されるのでアップしたいコードスぺニットを選択すると…


できました!



普通にGistのEmbed欄をそのまま貼り付けたほうが早い気がする…
GithubGist
f:id:tksptan:20180226191806j:plain

まとめ

というわけで!はてなブログにコードも無事書けそうなので、これからどんどん(目指せ週2ペース)記事をアップしていきたいと思います。
よろしくお願いします。

(byへびさん)