PHP製のシンタックスハイライター GeSHi と Notepad++ のプラグインNppExec を使って自分の好みのタグで出力するまでを書いたメモです。

Notepad++とGeShiでシンタックスハイライトしたHTMLを生成

Notepad++とGeShiでシンタックスハイライトしたHTMLを生成。例では画面右側でプレビューとしてプラグインの「Preview HTML」を使用しています。

こんな事をして何が得かというと、Wordpress に重たいプラグインを入れなくて済むとか、GoogleDrive等のドキュメントにソースコードを貼りやすくなるとか、NppExec の使い方が上手くなるとかその程度です。

Notepad++では似たようなことを実現するものにConvert2HTML やNPPExport というツールがあるのですが、ダーク背景のスタイル・テーマを使用しているときに貼り付けようとするとテキスト背景だけが黒だったり色すらつかなかったりとうまくいきません。

そこで今回は Notepad++で編集中のテキストをHTMLタグ＋style属性埋め込みを付けてシンタックスハイライトさせて書き出そうというわけです。

動作環境はXAMPP等でPHPが動いてNotepad++が動けばいいだけなのでWindows XPのPCでも大丈夫でした。

目次を見て分かる通りほぼコピペだけで数分で終われるんじゃないかと。記事を書いた本人はかなり時間がかかったのですが(苦笑)

目次

  1. GeSHi のGitHubからPHPスクリプトをダウンロードします
  2. コピペして geshi_call.php として保存。
  3. NppExecのコマンドウインドウに下記をコピペして実行

 

１） GeSHi のGitHubからPHPスクリプトをダウンロードします

「 GeSHi 」 というPHP製のシンタックスハイライターを利用しました。これにテキストを渡して加工してもらうわけです。

zipを解凍して geshi.php までの絶対パスをメモします。
USBメモリに入れたXAMPPで動かしているこのサイトの例ではとりあえず下記に設置しました。
変更した場合は記事内で赤い字で書かれたパスの部分を書き換えてください。

X:/xampp/scripts/geshi/src/geshi.php

 

２） コピペして geshi_call.php として保存。

↓ geshi_call.php の中身（X:\xampp\scripts\geshi_call.php に置いてみました。これらももちろん場所とファイル名が関係各所で統一されてさえいればどこでもいいです。）

  1. <?php
  2. // 絶対パスで指定
  3. require_once "X:/xampp/scripts/geshi/src/geshi.php";
  4. if (file_exists($argv[1])){
  5.     $input_file = ($argv[1]);
  6.     $path_info_ary = pathinfo($input_file);
  7.     $source = file_get_contents($path_info_ary['dirname'].'/'. $path_info_ary['basename']);
  8. }else{
  9.     print 'file not found.error at geshi_call.php';
  10.     // ↓標準入力を使うテストをしたら2KB程度しか読み込めなかったのでボツ
  11.     // $source = ($argv[1]);
  12. }
  13. // 開始行番号を指定。一部ブラウザ用
  14. $line_start_number = 1;
  15. $file_type =$path_info_ary['extension'];
  16.  
  17. $geshi = new GeSHi($source, $file_type);
  18.  
  19. // 見た目の設定
  20. // タブをスぺース何個分にするか指定
  21. $geshi->set_tab_width(4);
  22. // キーワードへの自動リンクを禁止する
  23. $geshi->enable_keyword_links(false);
  24. // 行番号を表示する。1行置き
  25. $geshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS,2);
  26. // 上記で行の色を変えることにした時に使う色を指定
  27. $geshi->set_line_style('background: #222222;', 'background: #2a2a2a;font-weight: nomal;');
  28. // 開始行番号を指定
  29. $geshi->start_line_numbers_at($line_start_number);
  30. // WordPressでpreが消されるのでdivに
  31. $geshi->set_header_type(GESHI_HEADER_DIV);
  32. // divのCSSを設定
  33. $geshi->set_overall_style('color:#aaaaaa;background-color:#373737;padding-left:4px;');
  34. // $geshi->set_overall_style('color:#FFEFDE;background-color:#221a1a;padding-left:4px;white-space: pre;white-space: pre-wrap;white-space: pre-line;white-space: -pre-wrap;white-space: -o-pre-wrap;white-space: -moz-pre-wrap;white-space: -hp-pre-wrap;word-wrap: break-word;');
  35. /* 組み込み関数 */
  36. $geshi->set_keyword_group_style(1, 'color: #73B9FF;');
  37. /* <?php new */
  38. $geshi->set_keyword_group_style(2, 'color: #FF4C79;');
  39. /* functions */
  40. $geshi->set_keyword_group_style(3, 'color: #FDFDFF;');
  41. /* true false */
  42. $geshi->set_keyword_group_style(4, 'color: #7373FF;');
  43. /* //コメント */
  44. $geshi->set_comments_style(1, 'color: #777777;', true);
  45. $geshi->set_comments_style(2, 'color: #777777;font-weight: nomal;', true);
  46. $geshi->set_comments_style(3, 'color: #777777;', true);
  47. $geshi->set_comments_style(4, 'color: #777777;font-weight: nomal;', true);
  48. /* 複数行・マルチコメント */
  49. $geshi->set_comments_style('MULTI', 'color: #777777;', true);
  50. $geshi->set_escape_characters_style('color: #26FF5C;', true,'HARD');
  51. /* オペレータとか */
  52. $geshi->set_symbols_style('color: #8888ff;');
  53. /* ?> */
  54. $geshi->set_symbols_style('color: #FF4C79;', false,1);
  55. /* 埋め込み文字列 */
  56. $geshi->set_strings_style('color: #ffdc77;');
  57. $geshi->set_strings_style('color: #ffdc77;', false,'HARD');
  58. $geshi->set_numbers_style('color: #ea3996;');
  59. $geshi->set_methods_style(1, 'color: #BFFFFF;');
  60. $geshi->set_methods_style(2, 'color: #00D9D9;');
  61. $geshi->set_regexps_style(0, 'color: #ffa54d;');
  62.  
  63. // CSSを分けるなら下記四行のコメントを外す。エディタへの貼り付けでは無視されることが多く、文字数は減らせるのに残念ながらあまり使えない
  64. // $geshi->enable_classes();
  65. // echo '<style type="text/css"><!--';
  66. // echo $geshi->get_stylesheet();
  67. // echo '--></style>';
  68.  
  69. // 実行
  70. echo $geshi->parse_code();
  71. ?>
  72.  

カスタマイズについて

見本はダーク配色です。コメントを付けておいたのでHTMLの要領でたやすく変更できると思います。

地味に面倒くさいのでがんばって自分好みの色を指定してください。ちなみにこの記事のソースはこれ↑で書き出したものです。

言語の指定は $file_type に編集しているファイルの拡張子を自動で入れることで大雑把に対応していますが、手動で指定したい場合は15行目を書き換えてください。

オプションを全部削除すれば白っぽいよくあるデフォルト配色になります。

これは資料が見つからなくてphp部分のソースを見てざっと並べたものなので、もっと上手いやり方があるかもしれません。

3) NppExecのコマンドウインドウに下記をコピペして実行

  1. set temp_file = temp.npp
  2.  
  3. // enable $(OUTPUT) variable
  4. NPE_CONSOLE v+ o2 i1
  5. cd $(CURRENT_DIRECTORY)
  6. // テキストが選択されているかチェック
  7. IF "$(CURRENT_WORD)"=="" GOTO CAUTION
  8. echo 選択されている箇所を GeShi で変換します
  9.  
  10. //カーソル反転選択部分を一時ファイルに保存
  11. sel_saveto $(temp_file)
  12.  
  13. // 選択部分をセーブしたファイル名を渡す
  14. X:\xampp\php\php.exe X:\xampp\scripts\geshi_call.php "$(temp_file)"
  15.  
  16. GOTO EXIT
  17.  
  18. :CAUTION
  19. echo テキストが反転選択されていませんので現在開いているタブのファイルを丸ごと変換します
  20. NPP_SAVE
  21. X:\xampp\php\php.exe X:\xampp\scripts\geshi_call.php "$(FULL_CURRENT_PATH)"
  22.  
  23. :EXIT
  24. // ▼ 処理後に別のタブで表示する
  25. // open new editor pane
  26. NPP_SENDMSG WM_COMMAND IDM_FILE_NEW
  27.  
  28. // set the text in the new editor pane
  29. SEL_SETTEXT $(OUTPUT)
  30. // ▲ 処理後に別のタブで表示する。ここまで
  31. // finally, disable $(OUTPUT) variable
  32. NPE_CONSOLE v- o2 i2


シンタックスハイライトをさせたい文章を選択した状態でNotepad++のメインメニューから プラグイン＞NppExec ＞ Execute をクリックで NppExec のコマンドウインドウを開いて前記のコマンドを実行すると、新しいタブが開いて変換後のタグが出力されます。

シンタックスハイライトをさせたい文章を選択した状態でNotepad++のメインメニューから プラグイン＞NppExec ＞ Execute をクリックで NppExec のコマンドウインドウを開いて前記のコマンドを実行すると、新しいタブが開いて変換後のタグが出力されます。新しいタブは用が済んだらそのまま閉じてしまって大丈夫です。

※未選択だと選択中のタブのファイルのテキストを変換するようにしてあります。このとき元のファイルは強制的にSAVEされますが、あとはそのままなのでご安心ください。

毎回コピペでは面倒ですのでコマンドはNppExecの「Save・・・」ボタンを押して名前を付けて保存すると便利です。

さらに、メインメニューの プラグイン＞NppExec ＞ Advanced Option を開き、「Associated script」で保存したコマンドを選択して「Menu itemus」に登録するといいです。こうするとメインメニューのマクロに表示されてショートカットを設定できるようになります。

この上の動画GIFではわざとコマンドウインドウを開いているので手数が多いですが実際にはテキストを選択してショートカットキーを押すだけという感じになります。

 

NppExec自体が見つからない人は プラグイン ＞ Plugin Manager ＞ Show Plugin Manager からインストールできます。

ついでに Notepad++のプラグインである「Preview HTML」を入れて起動しておけば変換したHTMLがすぐ表示されます。

※ このNppExecから外部のプログラムへ引数を渡して使う方法は色々とつぶしが利いて便利だと思います。

 

以下は行を指定してハイライトする場合です。

ハイライトさせて目立たせる行を指定できるようにしたものです。

コマンド実行時に、ハイライトさせて目立たせる行を指定できるようにする場合のサンプルです。

記事 2 を 2´ に、3 を 3´ にそれぞれ置き換えるだけです。

2´) 強調する行を指定するウインドウを出す場合のgeshi_call.phpの内容

  1. <?php
  2. // 2015-11 digi-pal.link
  3. // 絶対パスで指定
  4. require_once "X:/xampp/scripts/geshi/src/geshi.php";
  5. if (file_exists($argv[1])){
  6.     $input_file = ($argv[1]);
  7.     $path_info_ary = pathinfo($input_file);
  8.     $source = file_get_contents($path_info_ary['dirname'].'/'. $path_info_ary['basename']);
  9. }else{
  10.     print 'file not found.error at geshi_call.php';
  11.     // 標準入力を試したら2KB程度しか読み込めなかったので保留
  12.     // $source = ($argv[1]);
  13. }
  14. $temp = $argv[2];
  15. $line_hielight_array = explode(',',$temp);
  16. $file_type =$path_info_ary['extension'];
  17. $geshi = new GeSHi($source, $file_type);
  18.  
  19. // 見た目の設定
  20. // タブをスぺース何個分にするか指定
  21. $geshi->set_tab_width(4);
  22. // キーワードへの自動リンクを禁止する
  23. $geshi->enable_keyword_links(false);
  24. // 開始行番号を指定
  25. $line_start_number = 1;
  26. // 行番号を表示する。1行置きなら 2
  27. $geshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS,2);
  28. // 行
  29. $geshi->set_line_style('background: #222222;', 'background: #2a2a2a;font-weight: nomal;');
  30. // 開始行番号を指定
  31. $geshi->start_line_numbers_at($line_start_number);
  32. // 特に強調する行番号を配列で渡す
  33. $geshi->highlight_lines_extra($line_hielight_array);
  34. // 強調行
  35. $geshi->set_highlight_lines_extra_style('background:#4F4F3C;border-bottom:1px dotted #664;');
  36. // WordPressで <pre> が消されるので <div> に
  37. $geshi->set_header_type(GESHI_HEADER_DIV);
  38. // divのCSSを設定
  39. // $geshi->set_overall_style('color:#aaaaaa;background-color:#373737; padding-left:4px;overflow:auto;height:480px;');
  40. $geshi->set_overall_style('color:#aaaaaa;background-color:#373737; padding-left:4px;');
  41. // $geshi->set_overall_style('color:#FFEFDE;background-color:#221a1a;padding-left:4px;white-space: pre;white-space: pre-wrap;white-space: pre-line;white-space: -pre-wrap;white-space: -o-pre-wrap;white-space: -moz-pre-wrap;white-space: -hp-pre-wrap;word-wrap: break-word;');
  42. /* 組み込み関数 */
  43. $geshi->set_keyword_group_style(1, 'color: #73B9FF;');
  44. /* <?php new */
  45. $geshi->set_keyword_group_style(2, 'color: #FF4C79;');
  46. /* functions */
  47. $geshi->set_keyword_group_style(3, 'color: #FDFDFF;');
  48. /* true false */
  49. $geshi->set_keyword_group_style(4, 'color: #7373FF;');
  50. /* //コメント */
  51. $geshi->set_comments_style(1, 'color: #777777;', true);
  52. $geshi->set_comments_style(2, 'color: #777777;font-weight: nomal;', true);
  53. $geshi->set_comments_style(3, 'color: #777777;', true);
  54. $geshi->set_comments_style(4, 'color: #777777;font-weight: nomal;', true);
  55. /* 複数行・マルチコメント */
  56. $geshi->set_comments_style('MULTI', 'color: #777777;', true);
  57. $geshi->set_escape_characters_style('color: #26FF5C;', true,'HARD');
  58. /* オペレータとか */
  59. $geshi->set_symbols_style('color: #8888ff;');
  60. /* ?> */
  61. $geshi->set_symbols_style('color: #FF4C79;', false,1);
  62. /* 埋め込み文字列 */
  63. $geshi->set_strings_style('color: #ffdc77;');
  64. $geshi->set_strings_style('color: #ffdc77;', false,'HARD');
  65. $geshi->set_numbers_style('color: #ea3996;');
  66. $geshi->set_methods_style(1, 'color: #BFFFFF;');
  67. $geshi->set_methods_style(2, 'color: #00D9D9;');
  68. $geshi->set_regexps_style(0, 'color: #ffa54d;');
  69.  
  70. // CSSを分けるなら下記四行のコメントを外す。エディタへの貼り付けでは無視されることが多く、文字数は減らせるのに残念ながらあまり使えない
  71. // $geshi->enable_classes();
  72. // echo '<style type="text/css"><!--';
  73. // echo $geshi->get_stylesheet();
  74. // echo '--></style>';
  75.  
  76. // 実行
  77. echo $geshi->parse_code();
  78. ?>

↑　サンプルコード自体、変換時に14,15,33行目をハイライトしてあります。

3´) 強調する行を指定するウインドウを出す場合のNppExecコマンド

  1. // 長文が溜まると重いのでスクリーン消去
  2. cls
  3. // テンポラリファイルの名前。接頭辞＋現在のファイル名
  4. set temp_file = npp_$(FILE_NAME)
  5. // $(OUTPUT) variable を使えるように v+。文字コードも環境に合わせて変更
  6. NPE_CONSOLE v+ o2 i1
  7. cd $(CURRENT_DIRECTORY)
  8. // 入力BOX
  9. INPUTBOX "背景を強調したい行番号をカンマで区切って入力してください。例 3,6,11,24" :
  10. set HIGHLIGHT_NO = $(INPUT[1])
  11. echo $(HIGHLIGHT_NO)
  12. IF "$(CURRENT_WORD)"=="" GOTO READ_HOLE_OF_FILE
  13. echo 選択されている箇所を GeShi で変換します
  14. //カーソル反転選択部分を一時ファイルに保存
  15. echo 一時ファイル名は $(temp_file) です
  16. sel_saveto $(temp_file)
  17. // 選択部分をセーブしたファイル名を渡す
  18. X:\xampp\php\php.exe X:\xampp\scripts\geshi_call.php "$(temp_file)" $(HIGHLIGHT_NO)
  19. // ▼ 選択部分を入れ替える（差し替える）場合
  20. // (optional) replace the selected text: previously selected word
  21. //SEL_SETTEXT $(CURRENT_WORD)
  22. // (optional) replace the selected text: new line
  23. //SEL_SETTEXT+ \n
  24. //replace the selected text: cmd's output
  25. //SEL_SETTEXT $(OUTPUT)
  26. GOTO EXIT
  27. :READ_HOLE_OF_FILE
  28. echo テキストが反転選択されていませんので現在開いているタブのファイルを丸ごと変換します
  29. // 開いているファイルを先にセーブ
  30. NPP_SAVE
  31. // ファイル名を渡して処理させる
  32. X:\xampp\php\php.exe X:\xampp\scripts\geshi_call.php "$(FULL_CURRENT_PATH)" $(HIGHLIGHT_NO)
  33. :EXIT
  34. // ▼ 処理後に別のタブで表示する
  35. // open new editor pane
  36. NPP_SENDMSG WM_COMMAND IDM_FILE_NEW
  37. // set the text in the new editor pane
  38. SEL_SETTEXT $(OUTPUT)
  39. // ▲ 処理後に別のタブで表示する。ここまで
  40. //テンポラリを削除
  41. cmd /c del "$(temp_file)"
  42. unset $(TEMP_FILE)
  43. // $(OUTPUT) variable モードを元に戻しておく
  44. NPE_CONSOLE v- o2 i2