プログラミング

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

投稿日:

f:id:photoblg:20160123203605j:plain

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

はてな記法で貼り付ける

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

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

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

Markdownで貼り付ける

最近便利でMarkdownばかり使っているのですが、Markdownでのコード挿入も、とてもシンプルです。

使い方は```で囲むだけ。コードブロックのシンタックスハイライトに対応しているので先頭の```の後ろに言語を指定すると色付けもされます。

```javascript
<script>
alert('Hello World!');
</script>
```

はてなブログが対応している言語は以下のURLを参考にしてみてください。

参考 http://help.hatenablog.com/entry/markup/syntaxhighlight: title

Gistで貼り付ける

gist.github.com

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

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


gist1bbb84aa4599de57f33f90cd24fcd18f

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

staff.hatenablog.com

まとめ

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

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

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

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

  • この記事を書いた人

ケー

ガジェットレビュー、格安SIM、迷惑メールネタ、写真ネタなどの記事が多いです。困った方の参考になる記事を心掛けます。

-プログラミング
-

Copyright© ウェブと食べ物と趣味のこと , 2018 All Rights Reserved.