ウェブと食べ物と趣味のこと

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

ウェブと食べ物と趣味のこと

格安SIMのこと、windows10、迷惑メールネタ、写真ネタなど。困った方の参考になる記事を心掛けます。

はてなブログでソースコードを貼り付ける方法を調べてみた

プログラミング

スポンサードリンク

f:id:photoblg:20160123203605j:plain

更新:2016/12/7

先日、WordpressのサイドバーにAmazonのランキングを表示させる記事を書く際にソースコードを貼り付ける必要があったので調べてみました。

40dai.hateblo.jp
40dai.hateblo.jp

はてな記法で貼り付ける

一番メジャーそうだったのがはてな記法での貼り付けですね。設定から編集モードをはてな記法モードにすると入力できます。

※記事単位で編集モードが変わるらしいので既に見たままで編集中に切り替えてもはてな記法にならないので注意


f:id:photoblg:20160123204100p:plain


<?php

class Hoge(){
  function __construct(){
     print "Hello World!";
  }
}
?>

書き方は記事入力ボックスに以下のように>||と||<に挟めるだけ(※すべて半角)

>||
ここにソースを書く

||<

最初の||の間に|php|のように言語名を入れると色付けもされます。(※すべて半角)

>|php|
<?php
class Hoge(){
  function __construct(){
     print "Hello World!";
  }
}
?>
||<

なお対応しているファイルタイプは以下のページで確認できます。
help.hatenablog.com

Gistで貼り付ける

gist.github.com


GitHubのアカウントがあれば、Gistを利用できます。GistはGitHubが提供しているソースコード共有サービスでちょっとしたコードのやり取りに便利。


ざっくりした手順ですが、公開Gistを作成して、編集サイドバーからGist貼り付け~該当アカウント連携して選ぶだけでです。ファイル名の拡張子に応じて構文ハイライトも自動でしてくれるようで便利。


gist1bbb84aa4599de57f33f90cd24fcd18f

貼り付けの詳しい手順はこちらから。

staff.hatenablog.com

まとめ

個人的には手軽さ、行番号も出るところなどからGistが良かったです。

「はてな記法」はちょっぴりハマってしまいました。

理由は「見たまま編集」で記事作成、ソースコードを貼り付ける必要になり「はてな記法」に変更したのですが、既に作成していた記事が「見たまま編集」で「はてな記法」に切り替えらませんでした。

そのためコードを貼り付けても、貼り付けたコードそのまま表示されてしまい困惑しました。「見たまま編集」にしているかたは注意です。

スポンサードリンク