コードハイライト | プログラマーズ雑記帳

「コードハイライト」タグ記事

ブログでコードハイライトする 2011-09-02
コードハイライトを楽にする emacs-lisp 2011-09-04
Emacs で何でもハイライト 2011-09-04

ブログでコードハイライトする

JavaScript FC2ブログコードハイライト ex-html-mode.el

ブログに書いたコードにコードに色を付けて表示したいなということで、ブログでコードハイライトできるようにしました。
その方法を紹介します。

スクリプトをダウンロードする

コードに色を付けるにはコードハイライトの JavaScript を使う必要があります。
コードハイライト用のスクリプトはいろいろ公開されているのですが、私は対応している言語が多かった SHJS というのを使いました。
他にも SyntaxHighter というスクリプトが有名で試してみたのですが、こちらは何故かうまく色が付いてくれませんでした。 (^^;)

まず、以下のサイトから必要なファイルまたはコード一式をダウンロードしてきます。
http://shjs.sourceforge.net/index.html

自分のブログにファイルをアップロードする

ダウンロードしてきたファイルを自分のブログにアップロードします。このとき最低限必要なファイルは 2 つです。

スタイルシード sh_style.css
メインのスクリプト sh_main.js

後はハイライトしたい言語のスクリプト sh_xxxx.js をアップロードしておきます。

このとき後で使うのでアップロード先のパスをコピーしておいてください。

テンプレートを編集する

アップロードしたスタイルシートとスクリプトを呼び出せるように head タグ内に以下のような行を追加します。


<head>
                                            :
<link type="text/css" rel="stylesheet" href="http://blog.../sh_style.css" >
<script type="text/javascript" src="http://blog.../sh_main.js"></script>
<script type="text/javascript" src="http://blog.../sh_cpp.js"></script>
<script type="text/javascript" src="http://blog.../sh_html.js"></script>
<script type="text/javascript" src="http://blog.../sh_ruby.js"></script>
                                            :
</head>

あと、ページのロード時にスクリプトを実行するように body タグに onload="sh_highlightDocument();" の記述を追加しておきます。


<body id="pagetop" onload="sh_highlightDocument();">

これでコードに色をつけて表示することが可能になりました。

コードを書く

実際にブログ中にコードを書く場合には、クラス属性でコードを指定した pre タグ内に書きます。


<pre class="sh_xxx">
  色を付けたいコード
</pre>

ここの sh_xxx は言語ごとに変わるところで、スクリプトのファイル名の .js の前の部分です。

ただし、 html ファイル内では <, >, & は使用できないので、コード中の文字はそれぞれ <, >, & に変換しておく必要があります。

スポンサーサイト

コードハイライトを楽にする emacs-lisp

コードハイライト ex-html-mode.el Emacs ブログ

前回、ブログでコードハイライトする方法を書きました。ただ、色が変わったのはいいのですが、< などを置換するのはめんどくさいです。

また、Emacs の手放せない私としては文章書くとき、ちょっと長い文章であれば Emacs で書いて貼り付けてます。ブログ書くときもいったん html-mode で書いて、ブラウザに貼り付けた後文字の修飾などやって書いています。

Emacs を使っていてめんどくさいことがあればどうするか。もちろん lisp を書きます。
そこで、貼り付けたときに自動で置換してくれる Emacs の lisp を作ったので、紹介します。

設定

後で拡張しやすいように minor mode で機能を作りました。
以下のファイルをダウンロードして、パスの通っているところにおいてください。

ex-html-mode.el

.emacs.el に以下のコードを追加すると html-mode にしたときに ex-html-mode にもなるようになります。


(autoload 'ex-html-mode "ex-html-mode" "Minor mode for html edit" t)
(add-hook 'html-mode-hook 'ex-html-mode)

特に html-mode でなくてもかまわないので、そのときは add-hook で変更して下さい。

使用

ex-html-mode にすると以下のキーで機能を呼び出せます。

C-c C-y: コードの貼り付け
C-c C-q: 選択領域のクオート

C-c C-y で貼り付けた場合、コードの言語を聞いてくるので指定するとコード指定した <pre> をつけて中身をクオートして貼り付けます。
言語に何も指定しないと pre とクオートのみ行います。

コードハイライトを変える

ex-html-mode のコードの貼り付けはデフォルトでは SHJS 用ですが、変えることも出来ます。

例えば SyntaxHighlighter を使う場合は .emacs.el に以下の行も書いておきます。

(setq ex-html-code-class-alist
  '(("c", "cpp")  ("cpp", "cpp") ("csharp", "csharp") ("java", "java")
    ("pascal", "pascal") ("python", "python") ("ruby", "ruby")
    ("js", "js") ("php", "php") ("css", "css") ("xml", "xml") ("html", "xml")))
(setq ex-html-code-class-format "name=\"code\" class=\"%s\"")

Emacs で何でもハイライト

コードハイライトブログ Emacs

前に、ブログにコードハイライトの JavaScript を入れてハイライトできるようにしました。
ただ、コードハイライトのスクリプトを調べた時、 emacs-lisp に対応しているものは見つかりませんでした。でも、やっぱりハイライトにしたいので、 Emacs を使ってコードハイライトする方法を紹介します。
この方法だと Emacs でハイライトできるコードはなんでもハイライトできます。

htmlize.el のインストール

コードのハイライトには Htmlize を使用します。
これはバッファに表示している内容をハイライトをつけたまま html に変換する lisp です。

まず、 htmlize.el をダウンロードしてパスの通ったディレクトリに置きます。次に以下のコードを .emacs.el(init.el) などに記述します。

(autoload 'htmlize-buffer "htmlize" 
  "Convert BUFFER to HTML, preserving colors and decorations." t)
(autoload 'htmlize-region "htmlize" 
  "Convert the region to HTML, preserving colors and decorations." t)
(autoload 'htmlize-file "htmlize" 
  "Load FILE, fontify it, convert it to HTML, and save the result." t)

これで M-x htmlize-buffer などでバッファの内容を html に変換できるようになります。

Emacs 24.1 以上の場合はパッケージで簡単にインストールすることができます。
オプション(Options)] メニューの [Manage Emacs Packages] または M-x list-packages でパッケージアーカイブの一覧を開き、 htmlize を選んで下さい。

CSS の設定

出力される html の内容のうち、スタイルシートの部分をコピーして、テンプレートの設定のスタイルシートの編集でブログに登録しておきます。
このとき、使っていない Face のスタイルは出力されないので、 CSS の登録用で html 出力する場合はなるべくいろいろと色の付いているものにしておいてください。

ちなみに私が貼り付けた CSS は次のようなものです。これでよければこれをスタイルシートに貼り付けてください。

.builtin {
  /* font-lock-builtin-face */
  color: #da70d6;
}
.comment {
  /* font-lock-comment-face */
  color: #b22222;
}
.comment-delimiter {
  /* font-lock-comment-delimiter-face */
  color: #b22222;
}
.constant {
  /* font-lock-constant-face */
  color: #5f9ea0;
}
.function-name {
  /* font-lock-function-name-face */
  color: #0000ff;
}
.keyword {
  /* font-lock-keyword-face */
  color: #a020f0;
}
.string {
  /* font-lock-string-face */
  color: #aaa;
}
.doc {
  /* font-lock-doc-face */
  color: #8b2252;
}
.type {
  /* font-lock-type-face */
  color: #228b22;
}
.variable-name {
  /* font-lock-variable-name-face */
  color: #b8860b;
}
.warning {
  /* font-lock-warning-face */
  color: #ff0000;
  font-weight: bold;
}

色は Emacs で表示中のものが使われます。色を変えたい場合は Emacs の色設定を変更してから CSS の記述を取得して下さい。

Emacs の見た目の変更 | プログラマーズ雑記帳

使用

使用する場合には貼り付けたいコードを選択して、 M-x htmlize-region とすると別バッファに html に変換されたものが表示されます。
その body 部分をコピーして貼り付けてください。 < などの変換も一緒に行われています。

もっと便利に

ただこれだとちょっとめんどくさいということで、一気にできる lisp を書きました。以下のコードを .emacs.el(init.el) に記述して下さい。

(defun ex-htmlize-region-for-paste (abeg aend)
  "Htmlize the region and copy the HTML as a string to clipbord."
  (interactive "r")
  (unwind-protect
      (let* ((beg (min abeg aend)) (end (max abeg aend))
             (htmlbuf (htmlize-region beg end)))
        (with-current-buffer htmlbuf
          (kill-ring-save (plist-get htmlize-buffer-places 'content-start)
                          (plist-get htmlize-buffer-places 'content-end)))
        (kill-buffer htmlbuf))))

(global-set-key "\C-c\M-w" 'ex-htmlize-region-for-paste)

これで領域選択して C-c M-w とすると html に変換した内容をクリップボードにコピーするところまで一気に行います。

この方法だとコードハイライト用の JavaScript を使わなくてもハイライトできますし、 JavaScript を実行しない分ロードも速いです。
(SHJS 入れた意味があまりなくなったけど、まぁいっか)

追記 2012-11-28

Emacs 24 向けの記述を追加しました。

日	月	火	水	木	金	土
-	-	-	-	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	-