Sublime Text 2で色付きソースコードをHTML出力

　ブログとかでソースコードを投稿するとき、どうせなら予約語やコメントにはIDEみたく色を付けて欲しいですよね。

　それ用のCSSをネットで拾って設定するとかやり方はあるのですが、そこまで手間掛けてやりたくないって人はSublimeのプラグインで出来ます。出来ました。

　実際にキーワードを色分けするとこんな感じ。

import java.util.*;
import java.util.List;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;


public class Tet {
    
    public static void main(String[] args) {
        
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                new Tet().start();
            }
        });

※この記事（Sublime Text 2のFTPプラグイン）の設定ファイルも出し方一緒ですね。

ではでは、

プラグをインしてみる

　今回使うプラグインは Print to HTMLです。そのまんまですね。

　cmd(ctrl) + shift + p でinstallを呼び出して、print to と入力したらたぶん一番上なのでEnter。

　インストールが完了したらまたcmd+shift+pでコマンドパレットを読んで、print toを入力。

　print as HTML via browserを選択すると、ブラウザにHTMLが表示されてついでに印刷画面が出てくると思います。印刷画面をキャンセルすると色付きソースコードがブラウザで表示されているのが確認できます。

　あとは表示されたHTMLをコピペすれば、最近のブログのエディタはそのまま貼付けることが可能です。ね、簡単でしょ？

設定ファイルをいじいじ

　これで出せるようにはなりましたが、印刷画面が立ち上がるのはよろしくないですね。実はユーザ設定で印刷画面はオフにできます。

　ではメニューをたどりましょう。Windowsの人は少し違う気がするので探してください。

Sublime Text 2 -> Preferences -> Package Settings -> Print to HTML -> Setting - Default

　設定ファイル、開きます。

　今回探していた印刷画面のオフは、auto_print_in_browser（一番上）をfalseにすればOKです。

　他に注目すべきは、色づけStyleがいくつか選べることです。

（数ヶ月前にインストールしたときはなかったのです。Good jobなアップデートですね）

　その属性はその名の通り style（下の方にあります）。

　ここに設定できる項目は<Package Folder>/pygments/stylesを見ろというコメントがあるので見てみましょう。

Sublime Text 2 -> Preferences -> Browse Packages

　でプラグインのディレクトリが表示されるので、そこからPrint to HTMLの中に。さらに指示通りpygments/stylesまで潜ると、以下のstyleが確認出来ます（執筆時点。今後増える可能性十分あります）。

　名前だけ見てもわからないのでサンプルも置いておきます。

(追記：行番号つけてみたけど潰れてルー。line_numberingをfalseで出さないようにできます)

autumn

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

borland

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

colorful

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

default

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

emacs

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

friendly

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

fruity

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

manni

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

monokai

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

murphy

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

native

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

pastie

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

perldoc

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

rrt

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

tango

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

trac

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

vim

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

  1 public class Sample extends Satoshi {
  2     // Comment
  3     private static boolean boo = false;
  4     public String message = "Pikachu-!"
  5 }

※背景色は一緒に貼付けられないようなので、わかりやすいようにdraw_backgroundはfalseにすることをお勧めします（HTMLを丸ごと使うならtrueで問題ないです）。

　自分でも新しいstyleを作れるみたいですがこれだけあれば十分ですね。

　僕はautumuとかvsあたりかなぁ。

　Sublimeでコーディングしていた時なんかそのままぱっとブログに貼付けられて便利です。

　どうぞお試しあれ。

Calms blog

CALMSブログ

Sublime Text 2で色付きソースコードをHTML出力