はてなブログにC言語やHTMLなど、様々な言語のソースコードを貼り付ける方法についてご紹介します。
また、ソースコードを表示する際に、「左上に言語名を表示」させたり「行番号を表示」させる方法についても書きたいと思います。
はてなブログにソースコードを貼り付ける方法
はてなブログにソースコードを貼り付ける場合、主に２つの場合があります。
「はてな記法」または「Markdown記法」モードで貼り付ける
「はてな記法」または「Markdown記法」モードで編集する場合は、コード貼り付け用のタグが用意されてます。
＜はてな記法の場合＞
>|言語名|
〜
ソースコード
〜
||<
のように>||〜||<でコードを囲むと、その中のコードをシンタックスハイライト（色分け表示）してくれます。
＜Markdown記法の場合＞
```言語名
〜
ソースコード
〜
```
のように、```〜```でコードを囲むと中のコードをハイライトしてくれます。
「見たまま」モードで貼り付ける
はてな記法やMarkdown記法を用いれば、上記のタグを使って簡単にソースコードを貼り付けられますが、見たままモードではそうはいきません。
何故なら、見たままモードで編集する場合はタグが使用できないからです。
しかし、例えば記事を既に「見たまま」モードで保存しており、後からソースコードを貼り付けたいという事がままあると思います。
そんなときは、以下の方法を使うと見たままモードでもソースコードを貼り付ける事ができます。
- 貼り付けたい記事とは別に「新しく記事を書く」を押して、新しい記事を作る
- 新しい記事の編集モードを「はてな記法」にする
- 「リアルタイムプレビュー」を「オン」にする
- はてな記法でコードを書く
- 右のリアルタイムプレビュー画面に映っているコードをコピーする
- 貼り付けたい記事にそのままペーストする
ただし、このやり方だとソースコードの表示デザインが崩れる可能性があるため、あまりオススメはしません。
ソースコードを貼り付けたいときは、あらかじめ「はてな記法」か「Markdown」記法を使うことをオススメします。
参考サイト様：
www.dreamark.tokyo
ソースコードの言語名と行番号を表示させる方法
ソースコードは上手く貼り付けられたでしょうか？
次は、ソースコードの表示方法をカスタムしていきたいと思います。
ここでは、下記の設定を行っていきます。
ソースコードの言語名と行番号を表示させる
下記のサイト様を参照しながら行っていきます。
- 「JavaScriptで行ごとにdivで囲む」に書かれているコードを「デザイン設定」→「フッタ」にコピペして追記し「保存」する。
- 「CSSで付け足したdivごとにカウントアップ」に書かれているコードを「デザイン設定」→「CSS」にコピペして追記し「保存」する。
- 「[おまけ]コードブロック左上に言語名を表示するCSS」に書かれているコードを「デザイン設定」→「CSS」にコピペして追記し「保存」する。
以上でサンプルのような形でコードが表示されると思います。
ちなみに、右上に言語名を表示させる方法もあります↓
ダブルクリックでソースコードを全選択させる
ソースコードが長くなってくると、いちいちカーソルを動かして選択範囲を広げていくのは面倒ですよね。
しかも「Cntrl+A」で全選択すると、ソースコードだけ選択したいのに、記事全体を選択してしまうので不便です。
もっと使い勝手を良くするために、ソースコードの中のコードだけをダブルクリックで全選択する方法を紹介します。
今度は、こちらのサイト様を見ながら行っていきます。
こちらに掲載されているコードを「デザイン設定」→「フッタ」にコピペして追記するだけです。とても簡単！
参考ですが、ボタンを設置する方法もあります↓
表示デザインを変える
CSSのコードに記載されている項目を書き変えることで、背景色などを自由に変えることができます。
下記のサイト様がとても参考になります。
このブログで使っているデザイン設定
自分のブログに合わせるため、上記のサイト様で紹介されているコードの設定値を少しいじったので、備忘としてCSSの設定を下記にメモしておきます。
ちなみに、以下のコードは「見たままモード」で貼り付けています。
自分で追記した箇所はコメントアウトしています。
ただ、他の記事などを見て頂ければ分かる通り、「はてな記法」などで書いた場合と若干デザインが異なっているのが分かると思います。
まとめ
いかがでしたでしょうか？
今回は、はてなブログでソースコードを貼り付ける方法について紹介しました。
個人的なオススメは、やはりコード貼り付け用のタグが用意されている「はてな記法」または「Markdown記法」で書くことです。
見たままモードで記事を書いて保存してしまうと、後から編集モードを変更できないのでお気をつけ下さい！
FC2等と違い、はてなブログはソースコードの貼り付けが楽にできて良いですね！
それでは、みなさんも楽しいブログライフをお送り下さい＾＾
