57

mathematica.SEは現在プライベート ベータ版で、数日後に一般公開されます。Stack Overflow および関連サイトではprettify.jsを使用していますが、Mathematica はサポートされている言語ではありません。私たちのサイトにカスタムのハイライト スクリプトを用意できたらすばらしいと思います。そのようなスクリプトとそれに付随する CSS の開発について、JavaScript と CSS コミュニティの助けを求めます。

Mathematica のデフォルトの強調表示スキームのほとんどの機能をキャプチャするためのいくつかの基本的な要件を以下にリストしました(内部パーサーだけが知っているものは無視します)。また、色には一般的な名前を付けました。提供したスクリーンショットから 16 進数の色コードを選択できます (以下で詳しく説明します)。また、スクリーンショットに付随するコード サンプルを追加して、人々がテストできるようにしました。

基本要件

  1. コメント
    これらは として入力され(* comment *)ます。したがって、これらの間にあるものはすべて灰色で強調表示する必要があります。

  2. 文字列
    これらは"string"(一重引用符はサポートされていません) として入力され、ピンク色で強調表示されます。

  3. 演算子/略記法
    標準の などとは別に+, -, *, /, ^, ==、Mathematica にはいくつかの演算子と略記法があります。最も一般的に遭遇するものは次のとおりです。

    @, @@, @@@, /@, //@, //, ~, /., //., ->, :>, /:, /;, :=, :^=, =., 
    &, |, ||, &&, _, __, ___, ;;, [[, ]], <<, >>, ~~, <>
    

    これらと括弧、括弧、および中括弧はすべて黒で強調表示する必要があります。

  4. パターン オブジェクトとスロット
    パターン オブジェクトは文字で始まり、 、、などのように_または__またはが付けられます。これらには、アンダースコアの後に などの追加の文字を含めることもできます。これらはすべて緑色で強調表示する必要があります。___x_x__x___x_abc

    スロットは#andであり、その後に、 など##の整数が続くこともあり、緑色である必要があります。#1##4

    これらの両方 (パターン オブジェクトとスロット) は通常、上記のポイント 3 の演算子/ブラケット/ショートフォームで終了します。

  5. 関数/変数
    関数と変数は、ここではかなりあいまいな用語ですが、この投稿の目的に役立ちます。上記の 4 つに当てはまらないものは、黒で強調表示できます。Mathematica はコード内でバッククォート`を使用することが多く、関数/変数名の一部と見なす必要があります。例: abcd`defg. 変数名のどこにあるドル記号$も、文字のように扱われます (つまり、特別なことではありません)。

上記のすべてについて、それらが文字列内にある場合は、そのように処理する必要があります。つまり"@~#、ピンク色で強調表示する必要があります。

その他の便利な機能:

  1. 上記のポイント 3 のパターン オブジェクトで、アンダースコアの後に a?といくつかの文字が続く場合、に続く部分_は黒である必要があります。たとえば、x__?abcでは、x__パーツは緑で、?abcは黒でなければなりません。
  2. 関数/変数が大文字で始まる場合、黒で強調表示されます。小文字で始まる場合は、青色で強調表示されます。内部的には、これにより組み込み関数とユーザー定義関数が区別されます。ただし、mathematica コミュニティ (ほとんどすべての場所) はこの命名規則にかなり固執しているため、この 2 つを区別することは何らかの目的に役立ちます。

スクリーンショットとコード サンプル:

1. 簡単な例

以下は小さなサンプル セットで、最後に Mathematica でどのように見えるかを示すスクリーンショットがあります。

(*simple pattern objects & operators*)
f[x_, y__] := x Times @@ y  

(*pattern objects with chars at the end and strings*)

f[x_String] := x <> "hello@world" 

(*pattern objects with ?xxx at the end*)

f[x_?MatrixQ] := x + Transpose@x

<< Combinatorica` (*example with backticks and inline comment*)

(*Slightly more complicated example with a mix of stuff*)

Developer`PartitionMap[Total, Range@1000, 3][[3 ;; -3]]~Partition~2 //
  Times @@@ # &

ここに画像の説明を入力

2. 実例

これは、私のこの回答の例であり、「持っていると便利な追加機能」セクションのポイント 2 も示しています。つまり、小文字のものは青で強調表示されています。

また、オレンジ色で強調表示された変数のいくつかに気付くかもしれません。Mathematica を知っているパーサーなしでは実行するのがはるかに難しくなると思うので、意図的にそれを要件として含めませんでした。

prob = MapIndexed[#1/#2 &, 
    Accumulate[
     EuclideanDistance[{0, 0}, #] < 1 & /@ arrows // Boole]]~N~4;

Manipulate[
 Graphics[{White, Rectangle[{-5, -5}, {5, 5}], Red, Disk[{0, 0}, 1], 
   Black, Point[arrows[[;; i]]], 
   Text[Style[First@prob[[i]], Bold, 18, "Helvetica"], {-4.5, 4.5}]}, 
  ImageSize -> 200], {i, Range[2, 20000, 1]}, 
 ControlType -> Manipulator, SaveDefinitions -> True]

ここに画像の説明を入力

これは実現可能ですか?過度に?あまりにもハード?不可能?

率直に言って、私はそれらのどれに対する答えも知りません。ここでは、mathematica.SE を使用するすべての人が欲しがるいくつかの基本的な機能と、その上にあるチェリーとなるいくつかの追加機能をリストしました。ただし、これらの実装が難しすぎる場合はお知らせください。機能のより小さなサブセットを作成できます。

この支援を認めて、Mathematica コミュニティから永遠の感謝の意を表します。さらに、これに大きく貢献した各人に 500 の報奨金を授与します(別の人によって部分的に行われた場合)。何が重要かを決定するための回答に対する投票/コメント/出力 (おそらく、すべての作業を行う場合は、1 人に複数の報奨金)。「追加の素敵なもの」を実装すると、以前のバウンティに関係なく、自動的に +500 が付与されますですので、前半をやらなくても、他の人の作品を参考にすることもできます。また、この質問を見ていない可能性のあるユーザーを引き付けるために、定期的に小さな報奨金を配置する可能性があります。そのため、これらの報奨金を獲得した場合は、最後に決定される「既存の回答に報いる報奨金」に追加されます。 .

最後に、私は急いでいません。ですから、この質問に時間を割いてください。報奨金は、SE によって実装されるまで (または、既存の回答が要件を完全に満たしていると判断された場合)、常にオプションです。理想的には、今から 2 か月後のベータ版の 3 分の 2 でこれを実装したいと考えています。

4

2 に答える 2

43

序文

google-code-prettify に対する Mathematica のサポートは、主に新しい Mathematica.Stackexchange サイト向けに開発されたものであるため、こちら説明参照してください。

序章

私はこれらすべてについて深い知識はありませんが、コードを強調表示するために Idea の cweb プラグインを作成したことがあります。IDE では、これはすべて 1 ステップのプロセスではありません。それはいくつかのステップに分かれており、各ステップにはより多くのハイライト機能があります。これを少し説明して、ここで必要なコードハイライターでいくつかのことが (imho) できない理由を後で説明します。

最初に、コードはプログラミング言語の単一部分であるトークンに分割されます。このレクサーの後、コードの間隔を空白、リテラル、文字列、コメントなどに分類できます。このレクサー、正規表現をテストし、テキスト スパンのトークン タイプを格納し、コードを進めて、ソース コードを消費します。

この字句スキャンの後、プログラミング言語の規則、トークン、および基礎となるコードを使用して、ソースコードを解析できます。たとえば、Plus型のトークンがある場合Keyword、括弧とパラメーターが続く必要があることがわかります。そうでない場合、構文が正しくありません。この構文解析で構築できるものは、AST (抽象構文木) と呼ばれ、基本的TreeFormに Mathematica 構文の に似ています。

たとえば Java のように適切に設計された言語を使用すると、入力中にコードをチェックして、構文的に間違ったコードを書くことをほとんど不可能にすることができます。

prettify.js と Mathematica コード

まず、prettify.js は字句スキャナーのみを実装し、パーサーは実装していません。Webページを表示するための時間的制約に関しては、とにかくこれは不可能だと確信しています。それでは、prettify.js ではどのような機能が実現できないかを説明しましょう。

また、オレンジ色で強調表示された変数のいくつかに気付くかもしれません。Mathematica を知っているパーサーなしでは実行するのがはるかに難しくなると思うので、意図的にそれを要件として含めませんでした。

これらの変数の強調表示はコンテキストに依存するためです。Tableあなたは、あなたが構築物またはそのようなものの中にいることを知っている必要があります.

prettify.js のハッキング

prettify.js の拡張機能をハックするのはそれほど難しくないと思います。私は絶対的な正規表現初心者なので、次のことを覚悟しておいてください。

単純な Mathematica レクサーにはそれほど多くのものは必要ありません。空白、コメント、文字列リテラル、中括弧、多数の演算子、変数などの通常のリテラル、およびキーワードの膨大なリストがあります。

まず、java-script regexp-form のキーワードから始めましょう。

Export["google-code-prettify/keywordsmma.txt", 
   StringJoin @@ Riffle[Apply[StringJoin, 
         Partition[Riffle[Names[RegularExpression["[A-Z].*"]], 
             "|"], 100], {1}], "'+ \n '"], "TEXT"]

空白と文字列リテラルの正規表現は、別の言語からコピーできます。コメントは次のようなものと一致します

/^\(\*[\s\S]*?\*\)/

コメント内にコメントがある場合、これはうまくいきませんが、今のところ気にしません。ブレースとブラケットがあります

/^(?:\[|\]|{|}|\(|\))/

blub_boing個別に一致させる必要があるようなものがあります。

/^[a-zA-Z$]+[a-zA-Z0-9$]*_+([a-zA-Z$]+[a-zA-Z0-9$]*)*/

#、##、#1、##9 のスロットがあります (現在は 1 桁のみが続きます)

/^#+[0-9]?/

変数名とその他のリテラルがあります。文字または $ で始まる必要があり、文字、数字、および $ の後に続けることができます。現在\[Gamma]、1 つのリテラルとして一致していませんが、今のところ問題ありません。

/^[a-zA-Z$]+[a-zA-Z0-9$]*/

また、オペレーターもいます (このリストが完全かどうかはわかりません)。

/^(?:\+|\-|\*|\/|,|;|\.|:|@|~|=|\>|\<|&|\||_|`|\^)/

アップデート

私は物事を少しきれいにし、いくつかのデバッグを行い、私にとって美しく見えるカラースタイルを作成しました. 私が正しく見ることができる限り、次のものは機能します:

  • で見つけることができるすべてのシステム シンボルNames[RegularExpression["[A-Z].*"]]が一致し、青色で強調表示されます。
  • 中括弧と大括弧は黒ですが、フォントの太さは太字です。これは Szabolcs からの提案で、コードの外観にエネルギーを確実に追加するので、とても気に入っています。
  • 関数定義に現れるパターンと、純粋関数のスロットは緑色で強調表示されます。これは Yoda によって提案されたもので、Mathematica フロントエンドの蛍光ペンと一緒です。blub__Integerパターンは、 ina1_や inなどの変数と組み合わせた場合にのみ緑色になりb34_Integer32ます。のようなパターンのテスト関数はnum_?NumericQ、疑問符の前だけが緑色です。
  • コメントと文字列は同じ色です。コメントと文字列は数行にまたがることがあります。文字列にはバックスラッシュ付きの引用符を含めることができます。コメントはネストできません。
  • ColorData[1]カラーリングについては、色を並べて見栄えを良くするために一貫してスキームを使用しました。

現在、次のようになっています。

ここに画像の説明を入力

テストとデバッグ

Szabolcs は、これをテストすることが可能かどうか、またどのようにテストできるかを尋ねました。これは簡単です: 私の google-code-prettify ソースが必要です (誰もがアクセスできるように、これをどこに置くことができますか? )。ソースを解凍tests/mathematica_test.htmlし、Web ブラウザーでファイルを開きます。このファイルは、ファイルsrc/prettify.jssrc/lang-mma.jsおよびsrc/prettify-mma-1.css.

  • lang-mma.js、コードをトークンに分割するときにレクサーが使用している正規表現を見つけます。
  • あなたはprettify-mma-1.css私が使用するスタイル定義を見つけます

独自のコードをテストするには、エディターで開き、タグmathematica_test.htmlの間にコードを貼り付けます。preページをリロードすると、コードが表示されます。

デバッグ:蛍光ペンが正しく機能しない場合は、IDE または Google-Chrome を使用してデバッグできます。Chrome では、蛍光ペンが失敗し始めた単語をマークし、右クリックしてInspect Element. 次に表示されるのは、基礎となる html-highlight コードです。そこにはすべてのトークンが表示され、トークンのタイプが表示されます。これは次のようになります

<span class="tag">[</span>

開き括弧のタイプが であることがわかりますtag。これは、 で作成した正規表現の定義と一致しlang-mma.jsます。Chrome では、JS コードを参照し、ブレークポイントを設定して、ページをリロードしながらデバッグすることもできます。


Google Chrome および Firefox のローカル インストール

Tim Stone は親切にも、サイトの読み込み中に蛍光ペンを挿入するスクリプトを作成してくれましたhttp://stackoverflow.com/questions/。google-code-prettify がオンになるとすぐに、mathematica.stackexchange.comそこでも機能するはずです。このスクリプトを改造して、私の字句走査規則と色を使用しました。Firefox ではスクリプトが常に機能するとは限らないと聞きましたが、これをインストールする方法は次のとおりです。

  • Chrome: このリンクhttps://github.com/halirutan/Mathematica-Source-Highlighting/raw/master/mathematica-source-highlighter.user.jsをたどると、この拡張機能をインストールするかどうかを確認するメッセージが表示されます。
  • Firefox: Greasemonkey プラグインがインストールされていることを確認します。次に、Chrome と同じリンクをダウンロードします。
  • これで設定が完了し、このページをリロードすると、コメント、カーネル関数、文字列、およびパターンが正しく強調表示されるはずです。

バージョン

https://github.com/halirutan/Mathematica-Source-Highlighting/raw/master/mathematica-source-highlighter.user.jsでは、常に最新バージョンを見つけることができますここにいくつかの変更履歴があります。- 2013年 2 月 23日 記号とキーワードのリストをMathematicaバージョン 9.0.1更新しました。Pattern-operatorを使用した機能の詳細な概要については、こちらの説明:も参照してください

  • 2012年 2 月 2 日 または のような多くの数値入力形式のサポート、やの強調表示、.123`10.2またはのようなその他のメッセージ、 のようなパターンの強調表示、バグ修正 (アドオン ディレクトリの 3500 行のパッケージ コードに対してパーサーをチェックしました。実行するのに 3 ~ 4 秒かかりますが、これは私たちの目的には十分な速さです。)1.2`100.3*^-12In[23]Out[4]::usageblub::boingProblemTest[prob:(findp_[pfun_, pvars_, {popts___}, ___]), opts___]
  • 2012/01/30行方不明の「?」を修正 オペレーターリストに。\\[Gamma]そのような記号に完全に一致するような名前付き文字が含まれています。キーワード リストに $variables を追加しました。パターンのマッチングを改善しました。Developer`PackedArrayQ のようなコンテキスト構造のマッチングを追加しました。ご要望の多かった配色変更。Mathematica フロントエンドのようになりました。キーワードは黒、変数は青。
  • 2012 年 1 月 29 日、 Tim がコードを挿入するためにハッキングされました。これで、強調表示が mathematica.stackexchange でも機能するようになりました。
  • 2012/01/25 Mathematica 数値の認識を追加。これで、 のようなものが強調表示されるはず{1, 1.0, 1., .12, 16^^1.34f, ...}です。さらに、数字の後ろにあるバックティックを認識する必要があります。コメントと文字列をグレーに切り替え、数字には濃い赤を使用しました。
  • 2012 年 1 月 23 日初版。機能については、セクションUpdateで説明されています。
于 2012-01-22T05:54:11.017 に答える
2

あなたが求めているものとは正確には異なりますが、MATLAB用の同様の拡張機能を作成しました(ここで既に行われた優れた作業に基づいています)。プロジェクトはgithubでホストされています。

このスクリプトは、スタック オーバーフローの MATLAB コードに共通するいくつかの問題を解決する必要があります。

  • コメント ( のようなトリックを使用する必要はありません%# ..)
  • 転置演算子 (一重引用符) は、そのように正しく認識されます (デフォルトの prettifier によって引用符で囲まれた文字列と混同されます)
  • 人気のある組み込み関数の強調表示

構文の強調表示は完全ではないことに注意してください。とりわけ、ネストされたブロックコメントで失敗します(今のところそれで問題ありません)。いつものように、コメント/修正/問題は大歓迎です。

別のユーザースクリプトが含まれており、下のスクリーンショットに示すように、使用する言語を切り替えることができます。

- - 前 - -

前

- - 後 - -

後

興味のある方のために、「MATLAB Answers」 Web サイトで動作するように調整された 3 番目のユーザースクリプトが提供されています。


TL;DR

SO のユーザースクリプトを次から直接インストールします。

https://github.com/amroamroamro/prettify-matlab/raw/master/js/prettify-matlab.user.js

于 2012-05-04T11:38:54.503 に答える