黒木ノ水岩

黒木ノ水岩

ゲームを中心に様々なものを趣味の赴くままに紹介していきます。最近は特にFPSにハマっています。

【はてなブログ】ソースコードを貼り付ける方法!(言語名&行番号表示)

はてなブログC言語やHTMLなど、様々な言語のソースコードを貼り付ける方法についてご紹介します。

また、ソースコードを表示する際に、「左上に言語名を表示」させたり「行番号を表示」させる方法についても書きたいと思います。

 

はてなブログソースコードを貼り付ける方法

はてなブログソースコードを貼り付ける場合、主に2つの場合があります。

  • はてな記法」または「Markdown記法」モードで編集する
  • 「見たまま」モードで編集する

 

はてな記法」または「Markdown記法」モードで貼り付ける

はてな記法」または「Markdown記法」モードで編集する場合は、貼り付け用のタグが用意されてます。

 

はてな記法の場合>

>|言語名|
〜
ソースコード
〜
||<

のように>||〜||<でコードを囲むとその中のコードをシンタックスハイライト(色分け表示)してくれます。

 

Markdown記法の場合>

```言語名
〜
ソースコード
〜
```

のように、```〜```でコードを囲むと中のコードをハイライトしてくれます。

 

「見たまま」モードで貼り付ける

通常、見たままモードで編集する場合、上記のようなタグが使用できないのですが、下記の手順で貼り付けることができます。

例として、貼り付けたい記事を既に「見たまま」モードで保存しており、後からソースコードを貼り付けたい場合を考えます。

  1. 「新しく記事を書く」を押し、編集モードを「はてな記法」にする。
  2. 「リアルタイムプレビュー」を「オン」にする。
  3. はてな記法でコードを書く。
  4. 右のリアルタイムプレビュー画面に映っているコードをコピーする。
  5. 貼り付けたい記事にそのままペーストする。

 

以上で見たままモードで編集した記事にソースコードを貼り付ける事ができます。

 

参考サイト様:
www.dreamark.tokyo

 

ソースコードの言語名と行番号を表示させる方法

ソースコードは上手く貼り付けられたでしょうか?

次は、ソースコードの表示方法をカスタムしていきたいと思います。

 

ここでは、下記のサンプルのように次の設定を行っていきます。

#include <stdio.h>
int main(void) {
    printf("hello, world¥n");
}

 

ソースコードの言語名と行番号を表示させる

下記のサイト様を参照しながら行っていきます。

code-life.hatenablog.com

 

  1. JavaScriptで行ごとにdivで囲む」に書かれているコードを「デザイン設定」→「フッタ」にコピペして追記し、「保存」する。
  2. CSSで付け足したdivごとにカウントアップ」に書かれているコードを「デザイン設定」→CSSにコピペして追記し、「保存」する。
  3. 「[おまけ]コードブロック左上に言語名を表示するCSSに書かれているコードを「デザイン設定」→CSSにコピペして追記し、「保存」する。

以上でサンプルのような形でコードが表示されると思います。

 

ちなみに、右上に言語名を表示させる方法もあります↓

susisu.hatenablog.com

 

ダブルクリックでソースコードを全選択させる 

ソースコードが長くなってくると、一々カーソルを動かして選択範囲を広げていくのって面倒ですよね。

しかも「Cntrl+A」で全選択すると、ソースコードだけ選択したいのに記事全体を選択してしまうので不便です。

 

もっと使い勝手を良くするために、ソースコードの中のコードだけをダブルクリックで全選択」する方法を紹介します。

今度は、こちらのサイト様を見ながら行っていきます。

susisu.hatenablog.com

 

こちらに掲載されているコードを「デザイン設定」→「フッタ」にコピペして追記するだけです。とても簡単!

 

参考ですが、ボタンを設置する方法もあります↓

7cc.hatenadiary.jp

 

表示デザインを変える

CSSのコードに記載されている項目を書き換えることで、背景色などを自由に変えることができます。

下記のサイト様がとても参考になります。

www.foxism.jp

 

このブログで使っているデザイン設定

自分のブログに合わせるため、上記のサイト様で紹介されているコードの設定値を少しいじったので、備忘としてCSSの設定を下記にメモしておきます。

自分で追記した箇所は黒字でコメントアウトしています。

/*コードブロックに言語名を表示*/
pre.code:before {
    content: attr(data-lang);
    display: inline-block;
    background: #ccc; /*カラーコード変更*/
    color: #666;
    padding: 3px;
    position: absolute;
    margin-left: -20px; /*表示位置を調整*/
    margin-top: -30px;
}
pre.code {
    padding-top: 30px !important;
    border:2px solid #ccc; /*追加:コード表示部分の枠設定*/
    background:#f8f8f8; /*追加:コード表示部分の背景色*/
    position:relative; /*追加*/
}

 

いかがでしたでしょうか?
はてなブログだとソースコードの貼り付けが楽にできて良いですね!