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

JavaScript勉強会

JavaScriptの学習日記

はてなブログでコードハイライト表示する方法

はてなブログに、プログラムのコードを掲載するとき、色を付けて見やすくする方法がありました。(メモ)

 

ハイライト表示とは?

プログラムのコードに色を付けて、見やすくする表示方法のことです。

コード・ハイライトは、シンタックス・ハイライトとも言います。(いろんな呼び方があるんですね)

 

シンタックスハイライト - Wikipedia

シンタックスハイライト(英: Syntax highlighting)とは、テキストエディタの機能であり、テキスト中の一部分をその分類ごとに異なる色やフォントで表示するものである。

シンタックスカラーリング(英: Syntax coloring)とも。

この機能により、プログラミング言語マークアップ言語といった構造化された言語において、その構造や構文上のエラーが視覚的に区別しやすくなるため、ソースコードの記述が容易となる。

 

はてなブログのモード

はてなブログの編集画面は、

 

  1. はてな記法
  2. Markdown
  3. 見たまま

 

という3種類のモードがあります。

 

このうち、「はてな記法」と「Markdown」は、コードハイライトが用意されています。

 

help.hatenablog.com

 

はてな記法のコードハイライト書式

  • コードを「>||」と「||<」との間に書けばOK
  • 最初の「|」(パイプ)の間に、プログラム言語の種類を指定すればOK

>|プログラム言語の種類|

 コード

||< 

 

(例)Rubyのプログラムコードの場合

>|ruby|
class Foo
  def bar'baz' # return baz
  end
end
||<

 

(表示)上記の内容は、以下のように色がついて表示されます。

class Foo
  def bar'baz' # return baz
  end
end

 

Markdownのコードハイライト書式

```プログラム言語の種類

 コード

```

 

(例)上記の内容をMarkdownの書式で書くと、以下のようになります。

```ruby
class Foo
  def bar'baz' # return baz
  end
end
```

 

(表示)

class Foo
  def bar'baz' # return baz
  end
end

 

見たままモードのコードハイライト

はてなブログの「見たままモード」には、コードハイライトの書式が用意されてないのですが、「はてな記法」や「Markdown」を利用して、コードハイライトさせる方法が紹介されていました。

 

www.dreamark.tokyo

 

psn.hatenablog.jp

 

手順は、以下のようになってました。

  1. 今書いている「見たままモード」の記事とは別に、新しい記事を用意して、「はてな記法」または「Markdown」でプログラムコードを書く。
  2. コードハイライトの内容をプレビューで表示させる。
  3. プレビューで表示されたコードハイライトをコピーする。
  4. モダンブラウザーChrome等)で、「見たままモード」の記事に貼り付けると、コードハイライトのまま表示できる。

 

f:id:jsstudy:20170309140945p:plain

 

上記の画面で、「編集 Markdown」の右にある「プレビュー」をクリックすると、ブログに表示された場合の見え方が確認できます。

(上の画像だと注記の文字に隠れて見えませんが、「編集 Markdown」の右側に「プレビュー」というリンクがあります。)

こっちのプレビューだと、黒い背景でコードハイライトが表示されます。

 

(表示)

class Foo
  def bar'baz' # return baz
  end
end

お好みに応じて、こっちをコピペしても良いでしょう!

 

プログラム言語を指定するオプション

ソースコードを色付けして表示する(シンタックスハイライト) - はてなブログ ヘルプ

ハイライト表示に使いそうなプログラム言語をピックアップ。

 

Markdownとは?

Markdown - Wikipedia

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。

本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

 

まとめ

はてな記法Markdownを利用して、プログラムのコードをブログに掲載してみようと思います!

 

 

はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)