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

7cc@はてなブログ

JavaScriptとかとか

はてなブログのシンタックスハイライト

はてなブログ

概要

はてなソースコードをシンタックスハイライトをするには、2つの方法がある。

  1. はてなブログ独自のハイライトを利用する方法
    (編集モードがはてな記法・Markdonwの時のみ利用可)
  2. SyntaxHighlighterなどスクリプトによる方法(他のブログと同じ方法)
編集モード専用のハイライトその他
見たままモード 無し Gist貼り付け,SyntaxHighlighter
はてな記法モード スーパーpre記法 〃 *1
Markdownモード Markdown 〃 *1
特徴
  • JS不使用
  • 行番号が出ない *2
  • コピーが面倒 *2
  • 準備が必要
  • 行番号を出せる
  • カスタマイズ可
    (それによってコピーも楽に)

*1 SyntaxHighlighterがはてな記法・Markdownモードで使えるか調べてません。たぶん使えると思うけど

*2 これはスクリプトで対応できる

詳細

はてな専用のハイライト
記法による違いがある(後述)
SyntaxHighlighter
自分でjs・CSSを適当な場所に設置する必要あり
カスタマイズができる。ダブルクリックでcontenteditableにしたりコピー用のテキストエリアだしたり
Gist
これだけはてなにはコードを書かない。
なのでYahoo検索に弱いかもしれない
Gistの更新が反映されるので修正が容易

各記法ごとの記述方法

はてな記法

>|javascript|
alert("hello")
||<

Markdown

```javascript
alert("hello")
```

` ←これ(アクサングラーブ)の入力は shift + @

SyntaxHighlighter

<pre class="brush: js">
alert("hello")
</pre>

Gist

[gist:id]

シンタックスハイライトとは違うけれど

jsfiddle、JS Binなどを埋め込む手もあり。
サービスがいつ終わるかわからない点が怖いんですけどね・・・。

参考

はてなブログにソースコードを貼り付ける方法 - くりにっき