javascript - 可以扩展 prettify.js 以支持 Mathematica 吗？

Question

mathematica.SE 目前处于内测阶段，几天后将向公众开放。 Stack Overflow 和相关站点使用 prettify.js ，但是 Mathematica 不是受支持的语言。为我们的网站提供自定义突出显示脚本会非常棒，我请求 JavaScript 和 CSS 社区帮助开发这样的脚本和随附的 CSS。

我在下面列出了一些基本要求，以便它捕获 Mathematica 默认突出显示方案的大部分功能(忽略只有内部解析器知道的内容)。我还对颜色进行了一般命名——十六进制颜色代码可以从我提供的屏幕截图中选择(下面进一步介绍)。我还在屏幕截图中添加了代码示例，以便人们可以对其进行测试。

基本要求

评论
这些输入为 (* comment *) 。因此，它们之间的任何内容都应以灰色突出显示。

字符串
这些输入为 "string"(不支持单引号)，并应以粉红色突出显示。

运算符/简写符号
除了标准的 +, -, *, /, ^, == 等，Mathematica 还有其他几个运算符和简写符号。最常遇到的有:

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

这些以及括号、括号和大括号都应以黑色突出显示。

模式对象和插槽
图案的物体以字母开头和要么_或__或___附着，像例如，x_，x__和x___。这些下划线后面还可以有其他字母，如 x_abc 等。所有这些都应以绿色突出显示。

插槽是 # 和 ##，也可以跟一个整数，如 #1 、 ##4 等，也应该是绿色的。

这两个(模式对象和插槽)通常由上面第 3 点的运算符/括号/简写终止。

函数/变量
函数和变量在这里是一个相当松散的术语，但用于本文的目的。任何不属于上述 4 项的都可以用黑色突出显示。 Mathematica 经常在代码中使用反引号 `，应将其视为函数/变量名称的一部分。例如， abcd`defg 。变量名中任何地方的美元符号 $ 都将被视为一个字母(即，没有什么特别之处)。

对于上述所有内容，如果它们出现在字符串中，则应按原样处理，即 "@~# 应以粉红色突出显示。

额外的好东西:

在上面第 3 点的模式对象中，如果下划线后面是 ? 和一些字母，那么 _ 后面的部分应该是黑色的。例如，在 x__?abc 中，x__ 部分必须为绿色，而 ?abc 部分必须为黑色。

如果函数/变量以大写字母开头，则以黑色突出显示。如果它以小写字母开头，则以蓝色突出显示。在内部，这区分了内置函数与用户定义的函数。然而，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. 一个真实世界的例子

这是来自 this answer of mine 的一个例子，它也表明了我在“其他好东西”部分中的第 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

前言

由于 google-code-prettify 的 Mathematica support 主要是为新的 Mathematica.Stackexchange 站点开发的，请参见讨论 here 。

介绍

我对所有这些都没有深入的了解，但有时我为 Idea 编写了一个 cweb 插件来突出显示我的代码。在 IDE 中，这一切都不是一个一步的过程。它分为几个步骤，每个步骤都有更多的突出显示能力。让我稍微解释一下，以便稍后给出一些原因，为什么有些事情(恕我直言)对于我们在这里需要的代码高亮器来说是不可能的。

首先，代码被分成标记，这些标记是编程语言的单个部分。在这个词法分析器之后，您可以将代码的间隔分类为例如空格、文字、字符串、注释等。该词法分析器通过测试正则表达式、存储文本跨度的标记类型并在代码中向前推进来获取源代码。

在这个词法扫描之后，可以使用编程语言的规则、标记和底层代码来解析源代码。例如，如果我们有一个类型为 Plus 的 token Keyword，那么我们知道括号和参数应该跟在后面。如果不是，则语法不正确。您可以使用这种解析构建的内容称为 AST，抽象语法树，看起来基本上类似于 Mathematica 语法的 TreeForm。

使用设计精美的语言，例如 Java，可以在键入时检查代码，并且几乎不可能编写语法错误的代码。

prettify.js 和 Mathematica 代码

首先，prettify.js 只实现了词法扫描器，但没有解析器。我很确定，关于显示网页的时间限制，无论如何这都是不可能的。所以让我解释一下 prettify.js 哪些功能是不可能/不可行的:

Also, you might notice some of the variables highlighted in orange – I purposefully didn't include that as a requirement, as I think that's going to be a lot harder to do without a parser that knows 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(目前只能跟一个数字)

/^#+[0-9]?/

我们有变量名和其他文字。它们需要以字母或 $ 开头，然后可以跟在字母、数字和 $ 之后。目前 \[Gamma] 没有作为一个文字匹配，但目前还可以。

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

我们有运算符(operator)(我不确定这个列表是否完整)。

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

更新

我清理了一些东西，进行了一些调试并创建了一种对我来说看起来很漂亮的颜色样式。据我所知，以下内容有效:

可以通过 Names[RegularExpression["[A-Z].*"]] 找到的所有系统符号都匹配并以蓝色突出显示

大括号和方括号为黑色，但字体粗细。这是 Szabolcs 的建议，我非常喜欢它，因为它确实为代码

的外观增添了一些活力

出现在函数定义中的模式和纯函数的槽以绿色突出显示。这是 Yoda 建议的，并与 Mathematica 前端中的荧光笔一起使用。模式仅与 blub__Integer 、 a1_ 或 b34_Integer32 中的变量结合使用时为绿色。像 num_?NumericQ 这样的模式的测试函数只是问号前面的绿色。

注释和字符串具有相同的颜色。注释和字符串可以跨越多行。字符串可以包含反斜杠引号。注释不能嵌套。

对于着色，我一直使用 ColorData[1] 方案，以确保颜色并排看起来很好。

目前看起来是这样的:



测试和调试

Szabolcs 询问是否以及如何进行测试。这很简单:您需要我的 google-code-prettify 源( 我可以把它放在哪里，以便每个人都可以访问？ )。解压源文件并在网络浏览器中打开文件 tests/mathematica_test.html。该文件自行加载文件 src/prettify.js 、 src/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 代码。在那里你可以看到每一个 token ，你可以看到 token 是哪种类型。这看起来像

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

您会看到左括号的类型为 tag 。这与我在 lang-mma.js 中所做的正则表达式定义相匹配。在 Chrome 中，甚至可以在重新加载页面时浏览 JS 代码、设置断点和调试它。

Google Chrome 和 Firefox 的本地安装

Tim Stone 写了一个脚本，在加载 http://stackoverflow.com/questions/ 下的站点时注入(inject)荧光笔。一旦为 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 : 功能的详细概述，另请参见 discussion here

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___]，错误修正突出的型态(I检查解析器对3500行的从 AddOns 目录打包代码。运行大约需要 3-4 秒，这对于我们的目的来说应该足够快了。)

01/30/2012 修复了缺失的“？”在运营商列表中。包含命名字符(如 \\[Gamma])以完全匹配此类符号。在关键字列表中添加了 $variables。改进了模式的匹配。添加了上下文结构的匹配，如 Developer`PackedArrayQ。由于许多请求而切换配色方案。现在就像在 Mathematica 前端一样。关键词黑色，变量蓝色。

01/29/2012 Tim 被黑客入侵以注入(inject)代码。现在突出显示也适用于 mathematica.stackexchange。

01/25/2012 增加了对 Mathematica-numbers 的识别。这现在应该突出显示 {1, 1.0, 1., .12, 16^^1.34f, ...} 之类的内容。此外，它应该识别数字后面的反引号。我将注释和字符串切换为灰色，并为数字使用深红色。

01/23/2012 初始版本。功能在 更新 部分下描述。