Crayon Syntax Highlighterからgoogle-code-prettifyにシンタックスハイライターを乗り換えたので、これからの記事作成はHTMLエンティティをする必要があります。
HTML エンティティを行うためのツールは沢山あるけれど・・・
HTMLエンティティを行えるエディタは多々あります。代表的なものでいえばDreamweaverでしょうか。でも、エンティティするだけのためにドリを起動するのは億劫です。Sublimeに乗り換えていますからね〜
てなわけで、今回はAtomを使うことにしました。ゆくゆくはSublimeから乗り換えることになるかもしれないテキストエディタなんで使い慣れておく必要もあります。
Atomにhtml-entitiesをインストール
デフォルトではHTMLエンティティを行えませんのでAtomにhtml-entitiesというパッケージをインストールします。
- 設定画面を開きます。（Macはcommand + ,）
- インストールタブを選択してSearch packageに「html-entities」を入力して検索
- インストールボタンでインストールします
インストールは以上です。
html-entitiesにショートカットキーを割り当てる
ショートカットキーがなくてもhtml-entitiesは使えますが、使用頻度が高くなる予定なので設定しちゃいます。
- 設定からキーバインドを開く
- リンクからキーマップファイルを開き以下を入力
'.editor':
'f5': 'html-entities:encode'
'f6': 'html-entities:decode'
これで、F5キーでエンコード、F6キーでデコードにセッティングができました。キーバインドを開いたついでにもう一つショートカットを設定します。
自動インデントにショートカットキーを割り当てる
編集＞行＞自動インデントでコードの自動インデントを行ってくれるのですが、メニューからではアクセスが悪いので、自動インデントもショートカット設定します。
以下のコードを先ほど貼り付けたコードの下にでも貼り付けてください。
'atom-workspace atom-text-editor:not([mini])':
'alt-cmd-r': 'editor:auto-indent'
command + alt Rキーを当てています。複数行選択して実行すればコードを綺麗にインデントしてくれます。 地味に原稿作成時もインデントは気になるので嬉しい機能です。
これで準備は整いましたので、更新が滞らないようにしなければ・・・・・・
