Syntax Highlighter

[mobility212]

I wrote a basic syntax highlighter in Snap!. It is still in beta, but I developed it to the point that I wanted to show the forum it! Feel free to tell me your feedback, and suggest token categories or languages!

(editor is recommended)

Compare to forum’s syntax highlighting:

from time import *

for char in "snappy":
 sleep(1)
 print(char, end=". ", flush=True)

Usage notes:

• You can paste multiline code into the ask input, but consecutive spaces get collapsed into one. This tampers with the indentation. If this gets in the way, paste the code into the (code) variable instead.
• There are settings, but many settings do not do anything yet.

[joecooldoo]

Reminds me of the weird/joke code editor i made a while ago.
Could you explain how it works? I’d be interested to know whats happening behind the scenes

[abobobobobbom]

My guess?
It’s just a lexer. It would store string data in tokens. Token type = color.

[mobility212]

The first release does these in this order:

1. If currently in a string, detect if the character (emphasis; multi-character delimiters are not supported yet) is a delimiter to close the string, then exit the string. If not in a string, detect if the character is a delimiter to open the string, then enter the string.
2. Set the color for the character to default. This will be the color if none of the rules below are satisfied.
3. Detect if the character is one of the digits allowed in a number literal, the negation sign, or the decimal point, then set the color to the color for numbers. I was lazy to make sure the syntax for numbers is correct, so even if the negation sign or the decimal point does not belong to a number, it is still highlighted as a number.
4. Detect if the identifier (a string of abcdefghijklmnopqrstuvwxyz_, will be able to be changed in the future) matches one of the words in the list of keywords, then set the color to the color for keywords.
5. If currently in a string, set the color to the color for strings.
6. Print out the character.

String delimiter escaping, built-ins (like print() or Array), operators and comments are currently not recognized.

Make sure to open the (\</\> language data::other) block to see how the syntax for languages is stored!

@joecooldoo

Reminds me of the weird/joke code editor i made a while ago.

By the way, my inspiration was from Notepad++'s user-defined language editor, which I am glad Notepad++ has. Dunno why defining syntax for languages should be hard and user-unfriendly.

I wanted to make my own version of Notepad++'s UDL feature too, and that is the birth of this project.

[mobility212]

@abobobobobbom

It’s just a lexer. It would store string data in tokens. Token type = color.

I did not feel like making a tokenizer to partition the code into tokens. Instead, each character is colored based on the type of character and the surrounding text.

[joecooldoo]

very interesting, thanks for this

[mobility212]

New language: Python!

[abobobobobbom]

C++ support would be fire

[mobility212]

Gotta learn C++ to add syntax highlighting for that language I guess...

[abobobobobbom]

Syntax highlighting should be extremely similar to Python’s. You only need to learn the keywords and preprocessing.

[mobility212]

Thinking of an experiment of adding an ability to export highlight data in a format that can be pasted into this forum:

\texttt{ {\orange{from}} time {\orange{import}} * }
\texttt{ }
\texttt{ {\orange{for}} char {\orange{in}} {\red{"snappy"}}: }
\texttt{ ~sleep({\purple{1}}) }
\texttt{ ~\blue{print}(char, end={\red{". "}}, flush={\orange{True}}) }

$\texttt{ {\orange{from}} time {\orange{import}} * }$
$\texttt{  }$
$\texttt{ {\orange{for}} char {\orange{in}} {\red{"snappy"}}: }$
$\texttt{ ~sleep({\purple{1}}) }$
$\texttt{ ~\blue{print}(char, end={\red{". "}}, flush={\orange{True}}) }$

This will be more of an experiment than a practical feature. Accessibility...