可以将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的内容都可以用黑色突出显示.Mathematica经常`在代码中使用反引号,应该被视为函数/变量名称的一部分.例如,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)不可能用于我们需要的代码高亮显示器.

首先,代码被分成令牌,令牌是编程语言的单个部分.在此词法分析器之后,您可以将代码的间隔分类为例如空格,文字,字符串,注释等.这词法吃通过测试正则表达式,储存令牌类型文本跨度并在代码挺身而出的源代码.

在此词法扫描之后,可以使用编程语言,令牌和底层代码的规则来解析源代码.例如,如果我们有一个Plus类型的令牌,Keyword那么我们知道括号和参数应该遵循.如果不是,则语法不正确.使用此解析可以构建的内容称为AST,抽象语法树,看起来基本上类似于TreeFormMathematica语法.

使用设计良好的语言(例如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["[A-Z].*"]]都以蓝色匹配并突出显示
• 大括号和括号为黑色但粗体字体重.这是Szabolcs的一个建议,我非常喜欢它,因为它肯定会增加代码外观的能量
• 它们出现在函数定义中的模式和纯函数的插槽以绿色突出显示.这是Yoda建议的,并与Mathematica前端的荧光笔配合使用.模式仅为绿色,与变量类似blub__Integer,a1_或在中b34_Integer32.像这样的图案的测试num_?NumericQ功能仅在问号前面是绿色的.
• 注释和字符串具有相同的颜色.注释和字符串可以跨越几行.字符串可以包括反向引号.评论不能嵌套.
• 对于着色我一直使用的ColorData[1]方案,以确保颜色并排看起来很好.

目前它看起来像这样:

测试和调试

Szabolcs询问是否以及如何测试这一点.这很容易:你需要我的google-code-prettify源码(我在哪里可以放置它,以便每个人都可以访问？).解压缩源并tests/mathematica_test.html在Web浏览器中打开文件.此文件本身加载文件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.在Chrome中,甚至可以浏览JS代码,设置断点并在重新加载页面时对其进行调试.

Google Chrome和Firefox的本地安装

蒂姆斯通非常善良地编写了一个脚本,在装载场地时注入了荧光笔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下,您将始终找到最新版本.这是一些变化的历史.- 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___]错误修复(我从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初始版本.功能在更新部分下描述.