Introduction
Since Mathematica Support for google-code-prettify was mainly developed for the new Mathematica.Stackexchange , see also the discussion here .
Introduction
I don’t have deep knowledge about all this, but there were times when I wrote the cweb plugin for Idea so that my code could be highlighted there. In the IDE, this is not a one-step process. It is divided into several stages, and each step has more lighting options. Let me explain this a bit to give a few reasons why some things (imho) are not possible for the dedicated code that we need here.
First, the code is divided into tokens, which are separate parts of the programming language. After this lexer, you can classify your code intervals, for example. space, literal, line, comment, etc. This lexer uses the source code by checking regular expressions, preserving the type of token for the text range, and taking a step forward in the code.
After this lexical scan, the source code can be analyzed using the rules of a programming language, tokens, and base code. For example, if we have a Plus token that is of type Keyword , then we know that the brackets and parameter must follow. If not, the syntax is incorrect. What you can build using this parsing is called the AST abstract syntax tree, and looks basically like Mathematica's TreeForm syntax.
With a well-developed language, such as Java, you can check the code during input and make it almost impossible to write syntactically incorrect code.
prettify.js and Mathematica Code
Firstly, prettify.js implements only a lexical scanner, but not a parser. I am sure that in any case this will not be possible with regard to the time limits for displaying a web page. So let me explain which functions are not possible / possible with prettify.js:
Also, you may notice some of the variables highlighted in orange - I deliberately did not include this as a requirement, since I think it will be much harder to do without a parser that Mathematica knows.
That's right, because the allocation of these variables depends on the context. You should know that you are inside a Table construct or something like that.
Hacking prettify.js
I think hacking the extension for prettify.js is not that difficult. I am an absolute noob regex, so be prepared for what follows.
We do not need so much material for the simple vocabulary of Mathematica. We have spaces, comments, string literals, curly braces, lots of operators, regular literals like variables and a giant keyword list.
Let's start with the keywords in the java-script regexp-form:
Export["google-code-prettify/keywordsmma.txt", StringJoin @@ Riffle[Apply[StringJoin, Partition[Riffle[Names[RegularExpression["[AZ].*"]], "|"], 100], {1}], "'+ \n '"], "TEXT"]
The regular expression for spaces and string literals can be copied from another language. Comments are matched with something like
/^\(\*[\s\S]*?\*\)/
This happens incorrectly if we have comments inside the comments, but at the moment I don't care. We have brackets and brackets
/^(?:\[|\]|{|}|\(|\))/
We have something like blub_boing that needs to be matched separately.
/^[a-zA-Z$]+[a-zA-Z0-9$]*_+([a-zA-Z$]+[a-zA-Z0-9$]*)*/
We have slots #, ##, # 1, ## 9 (currently only one digit can follow)
/^
We have variable names and other literals. They need to start with the letter or $, and then follow the letters, numbers and $. Currently, \[Gamma] not mapped as a single literal, but at the moment this is normal.
/^[a-zA-Z$]+[a-zA-Z0-9$]*/
And we have operators (I'm not sure if this list is complete).
/^(?:\+|\-|\*|\/|,|;|\.|:|@|~|=|\>|\<|&|\||_|`|\^)/
Update
I cleaned the material a bit, debugged it a bit, and created a color style that looks beautiful to me. The following things work as far as I can see correctly:
- All system characters that can be found through
Names[RegularExpression["[AZ].*"]] mapped and highlighted in blue - Brackets and brackets are black but bold. This was an offer from Szabolcs, and I really like it, as it definitely adds some energy to the appearance of the code.
- Templates, as they appear in function definitions, and slots with pure functions are highlighted in green. This was suggested by Yoda and comes with a marker in the Mathematica interface. Templates are only green in combination with a variable, as in
blub__Integer , a1_ or in b34_Integer32 . The test functions for the template, as in num_?NumericQ , are only the green borders of the question mark. - Comments and lines are the same color. Comments and lines can go through several lines. Lines may include backslash quotes. Comments cannot be nested.
- For coloring, I consistently used the
ColorData[1] scheme ColorData[1] , so that the colors looked beautiful next to ColorData[1] other.
Currently it looks like this:
Testing and debugging
Sabolch asked if it could be checked and how. It is very simple: you need my source for google-code-prettify code ( Where can I put this so that everyone has access? ). Unzip the sources and open the tests/mathematica_test.html file in a web browser. This file loads the src/prettify.js , src/lang-mma.js and src/prettify-mma-1.css .
- in
lang-mma.js you find the regular expression that the lexer uses when breaking code into tokens. - in
prettify-mma-1.css you will find the style definitions that I use
To test your own code, simply open mathematica_test.html in the editor and paste the material between the pre tags. Reload the page and your code should appear.
Debugging: If the marker does not work correctly, you can debug it using the IDE or using Google Chrome. In Chrome, you mark a word in which the marker starts to crash and makes a right click and Inspect Element . What you see then is the basic html-highlight code. There you can see each individual token, and you see what type of token. Then it looks like
<span class="tag">[</span>
You see that the open bracket is of type tag . This matches the regexp definition I made in lang-mma.js . In Chrome, you can even view JS code, set breakpoints and debug it when your page reloads.
Local installation for Google Chrome and Firefox
Tim Stone was so kind as to write a script that injects a marker when loading sites under http://stackoverflow.com/questions/ . Once google-code-prettify is enabled for mathematica.stackexchange.com , it should work too. I adapted this script to use my lexical scanning rules and colors. I heard that the script does not always work in Firefox, but here's how to install it:
Version
At https://github.com/halirutan/Mathematica-Source-Highlighting/raw/master/mathematica-source-highlighter.user.js you will always find the latest version. Here is the change history. - 02/23/2013 Updated lists of symbols and keywords in Mathematica version 9.0.1 - 09/02/2012 some minor problems with coloring Mathematica templates were fixed. Detailed feature overview with Pattern operator : see also here
- 02/02/2012 support for many number input formats, such as
.123`10.2 or 1.2`100.3*^-12 , highlighting In[23] and Out[4] , ::usage or other messages, such as blub::boing , highlighting patterns such as ProblemTest[prob:(findp_[pfun_, pvars_, {popts___}, ___]), opts___] , error correction (I checked the parser for 3500 lines of package code from the AddOns directory. It took about 3- 4 seconds, which for our purposes should be more than fast enough). - 01/30/2012 Fixed the absence of '?' in the list of operators. Named characters are included, such as
\\[Gamma] , to give full correspondence to such characters. Added $ variables to keyword list. Improved pattern matching. Added mapping of context constructs such as Developer`PackedArrayQ. Switching color scheme due to many requests. Now it looks like a Mathematica interface. Keywords black, variable blue. - 09/29/2012 Tim hacked the injection code. Now highlighting works on mathematica.stackexchange too.
- 01/25/2012 Mathematica number recognition added. Now you should highlight such things as
{1, 1.0, 1., .12, 16^^1.34f, ...} . In addition, he must recognize the return line for the number. I switched the comments and lines to gray and used a deep red color for the numbers. - 01/23/2012 Original version. The options are described in the Update section.