コンサルでデータサイエンティスト

仕事でPythonを書いてます。機械学習、Webマーケティングに興味があります。趣味は旅です。

はてなブログでソースコードを表示させる方法

エンジニアの方のブログでよく見かける、プログラムなどのソースコードを載せる方法についてまとめます。

 

目次

 

準備

大前提として、ブログの設定を「はてな記法モード」に変更する必要があります。

はてな記法モードへの変更方法

[設定] タブ > [基本設定] に移動します。

f:id:hktech:20180909030246p:plain

デフォルトでは「見たままモード」になっているので、「はてな記法モード」に変更しましょう。

f:id:hktech:20180909030251p:plain

ソースコードを載せたのにうまく表示されないという場合のほとんどはこのステップが抜けていると思うので確認してみてください。

はてなブログソースコードを表示させる


Pythonソースコードを表示させるためには、下記のように記述してください。

>|python|
import numpy as np
arr = np.array([1, 2, 3])
||<

 

私たちが見慣れたソースコードの表示スタイルになりましたね

import numpy as np
arr = np.array([1, 2, 3])

 

||の中身は他のプログラミング言語に変更することもできるので、表示させたいプログラミング言語の種類に応じて変えてみてください

例: java, javascript, ruby ....

(参考: ソースコードを色付けして記述する(シンタックス・ハイライト) - はてなダイアリーのヘルプ)

 

まとめ

はてなブログソースコードを表示させる方法についてまとめました。普段は見たままモードで編集している方も、ソースコードを表示させたいときだけはてな記法モードに切り替えるなど工夫をしてみてはいかがでしょうか。