2009-04-30 4 views
19

私は自分のシンタックスハイライターを書きたいと思っていました。私は作業を考えていますが、独自のシンタックスハイライターを書く方法はわかりません。シンタックスハイライトの作成

私はそこに多くの実装があることを知っていますが、正規表現と構文の強調表示の仕組みについて学びたいと思います。

構文の強調表示はどのように機能するのですか?構文ハイライターは、入力された各文字をスキャンするか、各文字が入力された後に文書/テキスト領域全体をスキャンしますか?

洞察力があれば幸いです。

ありがとうございました。

PS:私はあなたが最初に全体として文書全体を扱う必要がありActionScriptの

答えて

17

構文highlightersは非常に一般的な2つの方法で動作します。最初は、各トークンのタイプ(キーワード、クラス名、インスタンス名、変数タイプ、プリプロセッサディレクティブなど)を正確に識別する、言語のための完全なレクサーとパーサーを実装します。これは、特定の仕様(赤色のキーワード、青色のクラス名、何を持っているか)に従ってコードを正確に強調するために必要なすべての情報を提供します。

2番目の方法は、Google Code Prettifyのようなものです。言語ごとに1つのレクサー/パーサーを実装するのではなく、大部分の構文に対してまともな仕事をすることができる非常に一般的なパーサーを使用します。例えば、このハイライターは、そのような言語の一般的なコンポーネントをレクサー/パーサが識別できるので、C言語のような言語を適切に解析して強調することができます。

これは、エンジンが汎用パーザの中で最良の仕事を行うことができるエンジンを自動的に決定するため、結果的に言語を明示的に指定する必要がないという利点もあります。もちろん、言語特有のパーサーが使用されている場合よりも強調表示が完璧ではないという欠点があります。

+3

あなたはハイライトが2つの一般的な方法で働いていたと言い始めましたが、私が誤解しない限り、あなたは第2の方法を説明しませんでした。 – Marplesoft

+6

@Marplesoft私が理解しているように、言語ごとにレクサーとパーサーを書くのが第一歩で、一般的なレクサー&パーサーを書くのは第二です。 – yasar

2

でそれを書くことに計画していました。私は(専門家なしで)すべてのトークンを分解し、解析木を作りたいと思います。

すべての設定がある場合、新しい文字を入力するたびにパーサーを実行することができます。それはあなたのユースケースには十分かもしれませんが、物事を速く保つには、より多くの情報を得てパーズツリーを修正する必要があります。

+0

何、レクサー(私は信じている) – Evert

+0

と呼ばれている私は、文書がで全体として扱われるべきであることに同意まず、プロジェクトの漠然とした記述に基づいた仕様を満たしているかどうかは言い難い – Tony

3

このシンタックスハイライトが何であるかを説明すると役立ちます。あなたがactionscriptで書いているのであれば、Flashムービーにテキストボックスを入れ、サブミットボタンを押した後にその構文を強調表示させることをお勧めしますか?または、いくつかのWebサービスからテキストを読み込み、強調表示された構文を表示したいですか? ...あなたが何をしているのか想像するのが難しいので、私が助けてくれるのは難しいです。

しかし、シンタックスハイライターはテキストを読み込み、その行を構文ハイライターの図形に役立つ正規表現と比較しますその言葉が何を意味するか。たとえば、単語「機能」または予約語として「INT」を読むかもしれない、とHTMLテキストに置き換えて:あなたは、CSSを持っており、赤で予約語をしたいと仮定し

<span class="reserved">function</span>, <span class="reserved"></span> 

.reserved{ 
    color: #ff0000; 
} 

これは基本的な概念です。ソースを表示できるので、geshiからアイデアを取りたいと思うかもしれません。

+0

申し訳ありませんもっと明確にしませんでした。私は、Adobe Flexで共同編集ツールを実装する予定です。私が欲しいのは、TextAreaやそれに類するテキスト入力コンポーネントを持つことです。ユーザーが入力したJavaコードのように、入力したコードは構文が強調表示されます。構文の強調表示を持つIDEとよく似ています。 –

4

StackOverflow podcast number 50 Steve Yeggeは、いくつかの一般的なハイライトメカニズムを作成するための彼のプロジェクトについて少し話します。完成品ではなく、探しているより洗練されたものかもしれませんが、興味のあるものがあります。

2

不幸にも、私はActionscriptを使用していないので、私はその部分を手伝うことはできません。

しかし、それ以外にも、構文ハイライターの作成は、既存のものを見るのがよいでしょう。たとえば、vimには、通常のテキストファイルの形式の構文ファイルがあります。したがって、最初のものを見ることができます。正規表現にはたくさんの正規表現があります(正規表現にはいくつかの味がありますが、それほど違いはありません...)。

個人的には、私はBeginning regular expressionsがいいと思っています。 Mastering regular expressionsは、より高度なテーマにも適しています。一方で、Regular expressions pocket referenceは、vimの正規表現に関する章も含んでいるので、上記のフレーバーの違いを判断するのにうれしいです。

1

私はしばらく前に私のブログ上のSQLコードのカラーリングツールを掲載している: http://gruchalski.com/2009/04/26/flex-textrange-performance-issue-on-linux/

あなたがソースとsqlcodecoloring.zipへのリンクを見つけることができます。 tokenizerとTextRangeクラスを使用して実装されています。

別のリンク、プロトタイプアプリケーションの一部として、着色SQLコード:

http://github.com/radekg/mysqlinterface/tree/master
2

このための1つのアプローチに良いスタートをUdacity course CS262あります。タイトルはウェブブラウザを構築していますが、本当にクラスは探している問題、つまり一連のテキストを解析してレックスする方法に焦点を当てています。あなたの場合、その情報を強調表示に使用します。私はちょうどそれを取った、それは非常に良かった。今コースは終わっていますが、ビデオや練習問題/宿題は引き続き表示されています。シンタックスハイライトを構築

+0

素晴らしいコースです。 – nimrod

2

は、すべてのコードに特定のキーワードを見つけ、それらに特定のスタイル(フォント、フォントスタイル、色など)を与えることについてです。これを実現するには、コードが記述されているプログラミング言語に固有のキーワードのリストを定義してから、テキストを解析し(たとえば正規表現を使用して)、特定のトークンを見つけて適切なスタイルのHTMLタグ。 JavaScriptで書かれた

非常に基本的なhighligherは次のようになります。あなたは基本的に構築している

var keywords = [ "public", "class", "private", "static", "return", "void" ]; 
for (var i = 0; i < keywords.length; i++) 
{ 
     var regex = new RegExp("([^A-z0-9])(" + keywords[i] + ")([^A-z0-9])(?![^<]*>|[^<>]*</)", "g"); 
     code = code.replace(regex, "$1<span class='rm-code-keyword'>$2</span>$3"); 
} 
関連する問題