LoginSignup
11
6

More than 5 years have passed since last update.

Atomの独自の言語ハイライトを作る方法

Last updated at Posted at 2017-06-26

Atomエディタで独自の言語ハイライトを作る方法

CSON形式のファイルを一つ作るだけで良いので基本的に簡単です。

複雑な言語のハイライトは、正規表現がすごいことになっていますが、単純な言語のハイライト定義ファイルをいくつか眺めると、なんとなく分かってきます。

Atomへ独自パッケージを導入する方法

Atomのパッケージは、基本的にディレクトリです。例えば、language-hogeというハイライトを行うパッケージであれば、以下のパスにディレクトリを作ります。

~/.atom/packages/language-hoge

ファイルを編集して、エディタを再起動すると、パッケージの内容が反映されます。

ハイライトに必要なファイル

Atomのパッケージは、npmっぽく管理するので、まず package.json を配置します。特別な項目はありません。そのため、以下の参考になる言語の定義ファイルへのリンクを見て、それっぽい内容をコピペするだけでOKです。

次に、言語のハイライトファイルを配置します。それが、grammars/hoge.cson です。これが、ハイライトのメインファイルです。

このCSONファイルに何を書けば良いのか・・・・それは、以下のような感じです。

'name': 'hoge'
'scopeName': 'source.hoge'
'fileTypes': [
  'hoge'
]
'patterns': [
 ...
]
  • patternsの項目に、match:正規表現パターンname:ハイライトの名前のオブジェクトを記述していきます。
  • includeのキーがあれば、それは、repositoryへのリンクとなっているようです。(language-jsonが参考になります)

参考になる言語の定義ファイルへのリンク

  • BrainFunck
    • 俺様言語で最も有名なBrainFuncの定義ファイル。シンプル。
  • JSON
    • 文法を知っている言語なら、構造を理解しやすい
  • CSS
    • 上記と同じ理由。とは言え、結構複雑
  • Lua
    • 言語が単純なのでハイライトもシンプル。

地道に動作確認しながら作ろう

CSONファイルを書いて、ウィンドウをリロードして、動作を確認。CSONを変更してリロードを、地道に繰り返していくと、良い感じにハイライトが完成することでしょう。そして・・・作り方をマスターした方、もっと詳しく教えてください。

参考になったページ

11
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
6