スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 

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

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


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

コードに色を付けるにはコードハイライトの 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 ファイル内では <, >, & は使用できないので、コード中の文字はそれぞれ &lt;, &gt;, &amp; に変換しておく必要があります。

スポンサーサイト
 

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

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

また、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 リンク挿入機能追加

ブログの記述用に以前、私が作成した 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 に記述するか、カスタマイズ画面で行なってください。
ex-html-mode-customize.png

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

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


C-c i C-y

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

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

商品詳細を見る
 
このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
9位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
3位
アクセスランキングを見る>>
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

09月 | 2017年10月 | 11月
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 31 - - - -


はてな新着記事
はてな人気記事
ブロとも申請フォーム
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。