ex-html-mode.el | プログラマーズ雑記帳

「 ex-html-mode.el 」タグ記事

ブログでコードハイライトする 2011-09-02
コードハイライトを楽にする emacs-lisp 2011-09-04
ex-html-mode リンク挿入機能追加 2011-09-14

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\"")

ex-html-mode リンク挿入機能追加

Emacs ex-html-mode.el

ブログの記述用に以前、私が作成した html 編集用の lisp に機能追加しました。
ex-html-mode.el

追加機能は以下の 3 点。

Customize に対応
あらかじめ登録しているリンクの挿入
クリップボードにコピーしている URL をリンクとして貼り付け

Customize に対応

Customize 画面での設定ができるようにしました。 Customize については前の記述を見てください。
http://yohshiy.blog.fc2.com/blog-entry-23.html

ブラウズから探す場合は Emacs/Languages/Sgml の下に Ex Html という名前のグループが出来ています。

直接グループ名を指定する場合は ex-html と指定してください。

グループのオートロードの方法がわからなかったので、html-mode にして一回ロードしていないと追加されていません。

あらかじめ登録しているリンクの挿入

C-c i l

お気に入りのようにあらかじめ登録している URL から選択してリンクを挿入します。
登録は .emacs.el に記述するか、カスタマイズ画面で行なってください。

選択のためのキーワード、リンク先アドレス、新規ウィンドウで開くかどうか、表示名を指定します。
表示名が空欄の場合はリンク先アドレスが表示名に使用されます。

クリップボードにコピーしている URL をリンクとして貼り付け

C-c i C-y

クリップボードにコピー中の URL をリンクとして貼り付けます。
貼り付けの際表示名を聞かれます。空欄にした場合はリンク先アドレスが表示名に使用されます。
領域を選択している場合には、領域内の文字列が表示名になります。
C-uの後に実行(C-u C-c i C-y)している場合には、リンクは新規 Window としてのリンクとなります。

やさしいEmacs‐Lisp講座
(2011/06)
広瀬雄二

商品詳細を見る

日	月	火	水	木	金	土
-	-	-	-	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	-