可以将prettify.js扩展为支持Mathematica？

mathematica.SE目前处于内部testing阶段，将在几天内向公众开放。 堆栈溢出和相关网站使用prettify.js ，但是Mathematica不是支持的语言。 为我们的网站提供一个自定义突出显示脚本将是非常棒的，并且我要求JavaScript和CSS社区的帮助来开发一个这样的脚本和相应的CSS。

我在下面列出了一些基本要求，以便捕获Mathematica默认高亮scheme的大部分function（忽略只有内部分析器才会知道的东西）。 我也一般地命名颜色 – hex颜色代码可以从我提供的屏幕截图（进一步下面）中挑选。 我还添加了代码示例以配合屏幕截图，以便人们可以对其进行testing。

基本要求

  1. 注释
    这些被input(* comment *) 。 所以这些之间的任何东西都应该用灰色突出显

  2. string
    这些被input为"string" （不支持单引号），并应以粉红色突出显示。

  3. 操作员/简短的符号
    除了标准的+, -, *, /, ^, ==等外，Mathematica还有其他几个操作符和简写符号。 最常遇到的是： 

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

    这些，括号，括号和大括号都应该用黑色突出显示。

  4. 模式对象和插槽
    模式对象以字母开头，并附有_或__或___ ，例如x_ ， x__和x___ 。 这些字母也可以在下划线之后加上另外的字母，如x_abc等。所有这些都应该用绿色突出显示。

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

    这两个（模式对象和插槽）通常由上面第3点的操作符/括号/短forms结束。

  5. 函数/variables
    函数和variables在这里是一个相当松散的术语，但是用于这篇文章的目的。 任何不在上述4中的东西都可以用黑色突出显示。 Mathematica经常在代码中使用反引号，应该被认为是函数/variables名称的一部分。 例如， abcd`defg 。 美元在variables名称中的任何一个符号都被视为一个字母（即没有特别的意思）。

对于上述所有内容，如果它们出现在string中，则应该这样处理，即"@~#应该用粉红色突出显示。

额外的好处有：

  1. 在上面第3点的模式对象中，如果下划线后面跟着一个? 然后是一些字母，那么_后面的部分应该是黑色的。 例如，在x__?abc ， x__部分必须为绿色，而?abc为黑色。
  2. 如果函数/variables以大写字母开头，则以黑色突出显示。 如果以小写字母开头，则以蓝色突出显示。 在内部，这使内置函数与用户定义的函数不同。 然而，mathematica社区（几乎到处都是）坚持这个命名约定相当好，所以区分这两个将有助于某种目的。

屏幕截图和代码示例：

简单的例子

下面是一个小例子集，最后的截图显示了它在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.一个真实世界的例子

下面是我的这个答案的一个例子，它也指出我的第二点在“额外的好东西”部分，即小写字母用蓝色高亮显示。

另外，您可能会注意到一些以橙色突出显示的variables – 我有意不包括这个要求，因为我认为如果没有一个熟悉Mathematica的parsing器，这样做会困难得多。 

 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上的所有人的一些基本特征，我希望能有一些额外的东西，将成为顶级的樱桃。 但是，请让我知道这些太难实施了。 我们可以制定一个更小的function子集。

为了认识到这一点，你们都有Mathematica社区的永恒感激之情，另外， 我会给每个人一个500奖金，对这个贡献很大 （如果是由不同的人来完成） – 我会依靠你的投票/评论/答案的输出，以决定什么是重要的（如果他们做所有的工作，也许对一个人来说不止一个赏金）。 不pipe之前的奖励如何，执行“额外的好事”都会自动获得+500 ，所以即使你没有完成上半年的工作，也可以build立在别人的工作之上。 我也可能会定期发放较小的赏金来吸引可能没有看到这个问题的用户，所以如果你碰巧得到这些奖励，那么除了“奖励现有答案的赏金”外， 。

最后，我并不着急。 所以请把你的时间用在这个问题上。 在SE实施之前（或者如果已经确定现有答案完全满足要求），赏金总是一种select。 理想情况下，我希望能够在今后2个月的时间里，以2/3的方式实施testing。

前言

由于Mathematica对Google-code-prettify的支持主要是为新的Mathematica.Stackexchange站点开发的，请参阅这里的讨论。

介绍

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

首先，代码被分解为令牌，这是编程语言的单个部分。 在这个词法分析器之后，您可以将代码的时间间隔分为空白，文字，string，注释等等。 这个词法分析器通过testing正则expression式来消化源代码，为文本跨度存储令牌types，并在代码中向前迈进。

在这个词法扫描之后，可以使用编程语言的规则，令牌和底层代码来分析源代码。 例如，如果我们有一个types为Keyword的token Plus ，那么我们知道括号和参数应该遵循。 否则，语法不正确。 你可以用这个parsing构build的东西叫AST，抽象语法树，看起来基本上和Mathematica语法的TreeForm一样。

使用一个devise良好的语言，比如Java，可以在打字时检查代码，并且几乎不可能编写语法错误的代码。

prettify.js和Mathematica代码

首先，prettify.js只实现了一个词法扫描器，但没有parsing器。 我很确定，这对于显示网页的时间限制是不可能的。 那么让我来解释一下prettify.js不可能/可行的function：

另外，您可能会注意到一些以橙色突出显示的variables – 我有意不包括这个要求，因为我认为如果没有一个熟悉Mathematica的parsing器，这样做会困难得多。

对，因为这些variables的高亮取决于上下文。 你必须知道，你是在一个Table构造或类似的东西。

黑客prettify.js

我认为黑客扩展prettify.js并不难。 我是一个绝对的正则expression式noob，所以准备下面的。

对于一个简单的Mathematica词法分析器，我们不需要太多东西。 我们有空白，注释，string，大括号，大量的操作符，通常的文字variables和关键字列表。

让我们开始，用java-script regexp-form中的关键字： 

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

空格和string的正则expression式可以从另一种语言复制。 评论与类似的东西相匹配 

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

如果我们在评论里面有评论的话，这会出错，但是现在我不在乎。 我们有大括号和括号 

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

我们有类似blub_boing东西，应该单独匹配。 

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

我们有插槽＃，##，＃1，## 9（目前只有一个数字可以跟随） 

 /^#+[0-9]?/

我们有variables名称和其他文字。 他们需要从一个字母或$开始，然后可以跟随字母，数字和$。 目前\[Gamma]不是一个字面匹配，但现在没关系。 

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

我们有运营商（我不确定这个清单是否完整）。 

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

更新

我清理了一些东西，做了一些debugging，并创build了一个颜色风格，看起来很漂亮。 以下的东西可以正常工作：

  • 可以通过Names[RegularExpression["[AZ].*"]]find的所有系统符号都会被匹配并以蓝色高亮显示
  • 大括号和括号是黑色的，但粗体字体。 这是Szabolcs的一个build议，我非常喜欢它，因为它确实为代码的外观增加了一些能量
  • 模式，因为它们出现在函数定义和纯函数的插槽中以绿色突出显示。 Yoda提出了这个build议，并在Mathematica前端配备了荧光笔。 模式只能与blub__Integer ， a1_或b34_Integer32的variables结合使用。 类似于num_?NumericQ的模式的num_?NumericQfunction只是问号的绿色num_?NumericQ 。
  • 评论和string具有相同的颜色。 评论和string可以通过几行。 string可以包括反斜杠的引号。 评论不能嵌套。
  • 对于着色我一贯使用ColorData[1]计划，以确保颜色看起来不错。

目前看起来像这样：

在这里输入图像说明

testing和debugging

索博尔奇问及是否以及如何testing这一点。 这很简单：你需要我的谷歌代码美化源（ 我可以把这个，让每个人都可以访问？ ）。 解压源文件并在web浏览器中打开文件tests/mathematica_test.html 。 这个文件本身加载文件src/prettify.js ， src/lang-mma.js和src/prettify-mma-1.css 。

  • 在lang-mma.js您可以find词法分析器将代码分解为令牌时使用的正则expression式。
  • 在prettify-mma-1.css可以find我使用的样式定义

为了testing你自己的代码，只需在编辑器中打开mathematica_test.html并粘贴你的东西在pre标签之间。 重新加载页面，你的代码应该出现。

debugging：如果荧光笔工作不正常，可以使用IDE或Google-Chrome进行debugging。 在Chrome中，您将突出显示荧光笔开始出现故障的位置，并右键单击并Inspect Element 。 你看到的是底层的HTML高亮代码。 在那里你可以看到每一个令牌，你会看到令牌是哪种types。 这看起来就像 

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

你看到的开放括号是typestag 。 这与我在lang-mma.js定义的正则expression式匹配。 在Chrome中，甚至可以浏览JS代码，设置断点并在重新加载页面的时候进行debugging。

Google Chrome和Firefox的本地安装

蒂姆·斯通是如此善良的写一个脚本，在http://stackoverflow.com/questions/加载网站过程中注入荧光笔。 只要google-code-prettify为mathematica.stackexchange.com打开，它也应该在那里工作。 我改编了这个脚本来使用我的词法扫描规则和颜色。 我听说在Firefox中脚本并不总是工作，但这是如何安装它：

版本

在https://github.com/halirutan/Mathematica-Source-Highlighting/raw/master/mathematica-source-highlighter.user.js中，您将始终可以find最新的版本。; 这是一些改变历史。 – 02/23/2013将符号和关键字列表更新为Mathematica版本9.0.1 – 2012年9月9日修正了Mathematica模式着色的一些小问题。 有关Pattern operator的function的详细概述，请参阅此处的讨论

  • 1.2`100.3*^-12支持许多数字input格式，如.123`10.2或1.2`100.3*^-12 ，突出显示In[23]和Out[4] ， ::usage或其他消息，如blub::boing ，突出显示ProblemTest[prob:(findp_[pfun_, pvars_, {popts___}, ___]), opts___] ，错误修复（我从AddOns目录检查了3500行包代码的parsing器，花了大约3-4秒运行，这对我们的目的应该足够快。）
  • 01/30/2012固定缺less'？' 在运营商列表中。 包括像\\[Gamma]这样的命名字符，以便为这些符号提供完整的匹配。 在关键字列表中添加了$variables。 改进了模式的匹配。 增加了像Developer`PackedArrayQ这样的上下文结构的匹配。 由于许多请求而切换颜色scheme。 现在就像在Mathematica前端。 关键词黑色，variables蓝色。
  • 蒂姆黑客注入代码。 现在突出显示也在mathematica.stackexchange上运行。
  • 01/25/2012增加了Mathematica数字的识别。 现在应该突出像{1, 1.0, 1., .12, 16^^1.34f, ...} 。 此外，它应该承认一个数字背后的反向。 我将注释和string切换为灰色，并使用深红色作为数字。
  • 2012年1月23日初始版本。 更新部分介绍了function。

不完全是你要求的，但是我为MATLAB创build了一个类似的扩展（基于已经完成的出色工作）。 该项目在github上托pipe。

该脚本应该解决堆栈溢出中的一些常见的MATLAB代码问题：

  • 评论（不需要使用像%# ..技巧）
  • 转置运算符（单引号）被正确识别（与默认的优化器引用的string混淆）
  • 突出了stream行的内置function

请记住语法高亮并不完美; 除其他外，它嵌套块评论失败（我现在可以生活）。 一如往常，意见/修复/问题是受欢迎的。

包括一个单独的userscript，它允许切换使用的语言，如下面的屏幕截图所示：

—之前—

之前

— — —

后

对于那些感兴趣的，提供了第三个用户脚本，适合在“MATLAB Answers”网站上工作。

TL; DR

从以下地址直接安装SO的userscript：

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

    Interesting Posts

    如何以编程方式美化JSON？

    如何设置Xcode插件的代码自动格式化

    如何使用博客/ blogspot美化？

    Javascript：如何直接从对象生成格式化的易于阅读的JSON？

    是否有托pipeGoogle Code Prettify的内容分发networking（CDN）？

    Sublime Text 2 Code Formatting

    如何在JavaScript中进行格式化/整洁/美化

    如何在Google Prettify的所有行中添加行号？