可以將prettify.js擴展為支持Mathematica嗎？

Question

mathematica.SE目前處於私人測試階段，將在幾天內向公眾開放。 Stack Overflow和相關站點使用prettify.js ，但Mathematica不是受支持的語言。 為我們的網站提供自定義突出顯示腳本真是太棒了，我請求JavaScript和CSS社區幫助開發這樣的腳本和隨附的CSS。

我在下面列出了一些基本要求，它捕獲了Mathematica默認突出顯示方案的大部分功能（忽略只有內部解析器才知道的東西）。 我也一般地命名顏色 - 可以從我提供的屏幕截圖中選取十六進制顏色代碼（下面進一步說明）。 我還在屏幕截圖中添加了代碼示例，以便人們可以測試它。

基本要求

1. 評論
   這些輸入為(* comment *) 。 所以這些之間的任何內容都應以灰色突出顯示

2. 字符串
   這些輸入為"string" （不支持單引號），並應以粉色突出顯示。

3. 運算符/簡寫符號
   除了標准+, -, *, /, ^, ==等，Mathematica還有其他幾個運算符和簡寫符號。 最常遇到的是：

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

   這些以及括號，括號和括號都應以黑色突出顯示。

4. 模式對象和插槽
   模式對象以字母開頭，並附加_或__或___ ，例如x_ ， x__和x___ 。 這些也可以在下划線后面添加其他字母，如x_abc等。所有這些都應以綠色突出顯示。

   插槽是#和## ，也可以是#1 ， ##4等整數，也應該是綠色。

   這些（模式對象和插槽）通常都是由上面第3點的操作符/括號/縮寫形式終止的。

5. 函數/變量
   函數和變量在這里是一個相當寬松的術語，但是用於本文的目的。 任何不屬於上述4的內容都可以用黑色突出顯示。 數學經常使用反引號`在代碼和應考慮的功能/變量名稱的一部分。 例如， abcd`defg 。 變量名中任何地方的美元符號$都被視為一個字母（即沒有什么特別的）。

對於上述所有情況，如果它們出現在字符串中，則應將其視為這樣，即"@~#應以粉紅色突出顯示。

額外的好處有：

1. 在上面第3點的模式對象中，如果下划線后跟一個? 然后是一些字母，那么_后面的部分應該是黑色的。 例如，在x__?abc ， x__部分必須為綠色，而?abc為黑色。
2. 如果函數/變量以大寫字母開頭，則以黑色突出顯示。 如果以小寫字母開頭，則以藍色突出顯示。 在內部，這區分了內置函數與用戶定義函數。 然而，mathematica社區（幾乎無處不在）很好地堅持這個命名慣例，因此區分這兩者將有一些目的。

截圖和代碼示例：

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點，即小寫的東西以藍色突出顯示。

另外，您可能會注意到一些以橙色突出顯示的變量 - 我故意不將其作為一項要求包含在內，因為我認為如果沒有了解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美元 （如果部分由不同的人完成） - 我將依靠你們投票/評論/輸出答案，以決定什么是重要的（如果他們完成所有工作，可能會給一個人一個以上的賞金）。 無論以前的獎勵如何，實現“額外的好東西”都會自動獲得+500 ，所以即使你不做前半部分，也可以建立其他人的工作。 我也可能會定期放置較小的賞金來吸引那些可能沒有看過這個問題的用戶，所以如果你碰巧獲得了這些賞金，那么它們將是“獎勵現有答案的獎勵”的補充，將在最后決定。

最后，我並不着急。 所以請花點時間回答這個問題。 在由SE實施之前（或者如果已經確定現有答案完全滿足要求），賞金總是一個選項。 理想情況下，我希望能夠實現2/3的測試，這是從現在開始的2個月。

Answer 1

前言

由於Mathematica對google-code-prettify的支持主要是針對新的Mathematica.Stackexchange網站開發的，請參閱此處的討論。

介紹

我對這一切都不是很了解，但有時我為Idea編寫了一個cweb插件，讓我的代碼在那里突出顯示。 在IDE中，所有這些都不是一步到位的過程。 它分為幾個步驟，每個步驟都有更多的突出顯示能力。 讓我解釋一下，稍后給出一些原因，為什么有些東西（imho）不可能用於我們需要的代碼高亮顯示器。

首先，代碼被分成令牌，令牌是編程語言的單個部分。 在此詞法分析器之后，您可以將代碼的間隔分類為例如空格，文字，字符串，注釋等。 這詞法吃通過測試正則表達式，儲存令牌類型文本跨度並在代碼挺身而出的源代碼。

在此詞法掃描之后，可以使用編程語言，令牌和底層代碼的規則來解析源代碼。 例如，如果我們有一個類型為Keyword的令牌Plus ，那么我們知道括號和參數應該遵循。 如果不是，則語法不正確。 使用此解析可以構建的內容稱為AST，抽象語法樹，看起來基本上類似於Mathematica語法的TreeForm 。

使用設計良好的語言（例如Java），可以在鍵入時檢查代碼，並且幾乎不可能編寫語法錯誤的代碼。

prettify.js和Mathematica Code

首先，prettify.js只實現了一個詞法掃描程序，但沒有解析器。 我很確定，無論如何，關於顯示網頁的時間限制，這是不可能的。 那么讓我解釋一下使用prettify.js不可行/可行的功能：

另外，您可能會注意到一些以橙色突出顯示的變量 - 我故意不將其作為一項要求包含在內，因為我認為如果沒有了解Mathematica的解析器，那將會更加困難。

是的，因為這些變量的突出顯示取決於上下文。 你必須知道，你在Table構造中或類似的東西。

黑客美化.js

我認為黑客入侵pretify.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（目前只能跟隨一位數）

/^#+[0-9]?/

我們有變量名和其他文字。 他們需要以字母或$開頭，然后可以跟隨字母，數字和$。 目前\\[Gamma]不匹配為一個文字，但目前它沒關系。

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

我們有運營商（我不確定這個清單是否完整）。

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

更新

我清理了一些東西，做了一些調試，創造了一種看起來很漂亮的顏色樣式。 就我所見，以下內容有效：

• 可以通過Names[RegularExpression["[AZ].*"]]找到的所有系統符號都匹配並以藍色突出顯示
• 大括號和括號為黑色但粗體字體重。 這是Szabolcs的一個建議，我非常喜歡它，因為它肯定會增加代碼外觀的能量
• 它們出現在函數定義中的模式和純函數的插槽以綠色突出顯示。 這是Yoda建議的，並與Mathematica前端的熒光筆配合使用。 模式只有綠色與blub__Integer ， a1_或b34_Integer32的變量組合在一起。 像num_?NumericQ這樣的模式的num_?NumericQ只是num_?NumericQ的綠色。
• 注釋和字符串具有相同的顏色。 注釋和字符串可以跨越幾行。 字符串可以包括反向引號。 評論不能嵌套。
• 對於着色我一直使用ColorData[1]方案來確保顏色並排看起來很好。

目前它看起來像這樣：

測試和調試

Szabolcs詢問是否以及如何測試這一點。 這很容易：你需要我的google-code-prettify源碼（ 我在哪里可以放置它，以便每個人都可以訪問？ ）。 解壓縮源並在webbrowser中打開文件tests/mathematica_test.html 。 該文件本身加載文件src/prettify.js ， src/lang-mma.js和src/prettify-mma-1.css 。

• 在lang-mma.js您可以找到lexer在將代碼拆分為標記時使用的正則表達式。
• 在prettify-mma-1.css您可以找到我使用的樣式定義

要測試您自己的代碼，只需在編輯器中打開mathematica_test.html並將您的內容粘貼到pre標記之間。 重新加載頁面，您的代碼應該出現。

調試：如果熒光筆無法正常工作，您可以使用IDE或Google-Chrome進行調試。 在Chrome中，您可以標記熒光筆開始失敗的單詞，然后右擊並Inspect Element 。 你看到的是底層的html-highlight代碼。 在那里，您可以看到每個令牌，並且您可以看到令牌的類型。 這看起來像

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

您看到開括號是類型tag 。 這與我在lang-mma.js的regexp定義相匹配。 在Chrome中，甚至可以瀏覽JS代碼，設置斷點並在重新加載頁面時對其進行調試。

---

Google Chrome和Firefox的本地安裝

Tim Stone非常友好地寫了一個腳本，在http://stackoverflow.com/questions/下加載網站時注入了熒光筆。 一旦為mathematica.stackexchange.com打開google-code-prettify，它也應該在那里工作。 我修改了這個腳本以使用我的詞法掃描規則和顏色。 我聽說在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下，您將始終找到最新版本。 這是一些變化的歷史。 - 02/23/2013更新了Mathematica版本9.0.1 - 09/02/2012的符號和關鍵字列表，修復了Mathematica模式着色的一些小問題。 有關Pattern -operator功能的詳細概述:另請參閱此處的討論

• 02/02/2012支持多種輸入格式，如.123`10.2或1.2`100.3*^-12 ，突出顯示In[23]和Out[4] ， ::usage或其他消息，如blub::boing ，突出顯示像ProblemTest[prob:(findp_[pfun_, pvars_, {popts___}, ___]), opts___]這樣的模式ProblemTest[prob:(findp_[pfun_, pvars_, {popts___}, ___]), opts___] ，錯誤修復（我從AddOns目錄中檢查了解析器對3500行的包代碼。大概需要3-4個秒運行，這應該超過我們的目的足夠快。）
• 01/30/2012修正失蹤'？' 在運營商列表中。 包含像\\\\[Gamma]這樣的命名字符，以便為這些符號提供完全匹配。 在關鍵字列表中添加了$變量。 改進了模式的匹配。 添加了像Developer`PackedArrayQ這樣的上下文結構的匹配。 由於許多請求而切換顏色方案。 現在就像Mathematica-frontend一樣。 關鍵詞黑色，變量藍色。
• 01/29/2012蒂姆入侵注入代碼。 現在突出顯示也適用於mathematica.stackexchange。
• 01/25/2012添加了對Mathematica數字的識別。 現在應該突出顯示{1, 1.0, 1., .12, 16^^1.34f, ...} 。 此外，它應該識別數字背后的反引號。 我將注釋和字符串切換為灰色，並使用深紅色表示數字。
• 01/23/2012初始版本。 功能在更新部分下描述。

Answer 2

不完全是你要求的，但我為MATLAB創建了一個類似的擴展（基於這里已經完成的優秀工作）。 該項目托管在github上 。

該腳本應解決Stack Overflow上MATLAB代碼常見的一些問題：

• 評論（不需要使用%# ..等技巧）
• 轉置運算符（單引號）被正確識別（與默認情況下的引用字符串混淆）
• 突出流行的內置功能

請記住語法突出顯示並不完美; 除此之外，它在嵌套的塊注釋上失敗了（我現在可以忍受它）。 與往常一樣，歡迎提出意見/修復/問題。

包含單獨的用戶腳本，它允許切換使用的語言，如下面的屏幕截圖所示：

---之前---

--- ---之后---

對於那些感興趣的人，提供了第三個用戶腳本，適用於“MATLAB Answers”網站。

---

TL; DR

直接從以下位置安裝SO的用戶腳本：

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