DEV Community

Felippe Regazio
Felippe Regazio

Posted on

I Created a pure Unicode Code Highlighter :P

The tool is called "Unilight". It is a simple parser and module that modifies unicode variation of string parts.

So you can highlight anywhere that doesn't accept rich editing, just have a pure string that accepts unicode variations. Works for almost any lang, take a look, this is a simple and pure STRING haha:

.......
// π•‹π•™π•šπ•€ π•šπ•€ π•’π•Ÿ π•–π•©π•’π•žπ•‘π•π•–

π—³π˜‚π—»π—°π˜π—Άπ—Όπ—» example() {
π—°π—Όπ—»π˜€π˜ a = "fizz";
π—°π—Όπ—»π˜€π˜ b = "buzz";
π—Ώπ—²π˜π˜‚π—Ώπ—» a+b;
}
.......

You can highlight your code here:
https://felippe-regazio.github.io/unilight/

Source code and documentation here:
https://github.com/felippe-regazio/unilight

Warning:

This is a toy project made for aesthetic reasons only (just wanted to code). I made it because I wanted to study a few things about parsers and do something with it. However, there are important weaknesses of this technique:

  1. Systems that do not support unicode will not display the text

  2. Since unicode variations are hidden characters, the string will always be longer than it looks

  3. Interpreters will not run the code because they don't know these chars, it will have to be sanitized

The tool is more useful for aesthetic reasons in fact, you can highlight simple snippets on a tweet, for example. I think the most interesting thing here is: The source code and the relationships between it (if you're a beginner/intermediate it might be a good thing to see given its simplicity), and the parser (if you're more advanced in js, good luck with that).

Top comments (1)

Collapse
 
cicirello profile image
Vincent A. Cicirello

Very cool idea. Thanks for posting about it.