[Visual Studio Code][Beta] TwiddlyWiki5 Syntax Highlighting for VSCode!

[Joshua Fontany]

Hi!

I've thrown together a quick extension for Visual Studio Code to enable syntax highlighting. I have not yet added it to the MS Marketplace, so you cannot find it through VSCode's Extensions tab quite yet...

Find the github repo here:

https://github.com/joshuafontany/VSCode-TW5-Syntax

Clone it to your Extensions folder as described here: https://vscode-docs.readthedocs.io/en/stable/extensions/install-extension/

---

I use Bob on Node.js and author plugins as folders separate from my tiddlywiki and wikis directories. This means I am often tweaking or editing UI tiddlers, etc, etc inside of plugins while the server is down, then restart it to run tests, etc. Syntax highlighting is going to be a huge benefit to this workflow.

At this time I am mainly relying on a "named" syntax-highlighiting grammar built for the Atom text editor. This grammar is fairly well developed, but can totally be improved as I learn more about syntax highlighting.,


There may be another way to set this up, instead of making up a language named "TiddlyWiki5" I could "inject" the wikitext rules into the base HTML context. Then setup the field-contexts to be pared as HTML(Extended).... 

But for now this one that defines rules for most of the wikitext as a new language will do.

Best,

Joshua Fontany

[Mohammad]

Hi Joshua,

 Thank you for sharing this! Is it possible to send some screenshots of .tid file in VSCode?

I downloaded the extension and install it! I realized the folder name should be in lowercase!

I cannot see much of text highlighted!

For example strings, code (``) and codeblocks!

\pragma?  (I see \define simple-list(p) only the word define is blue)

--Mohammad 

[Joshua Fontany]

Hi Mohamad,

I have inlcuded the test files from the original repository in the `./samples` folder.

Open up `./samples/tid.tid` and then make sure that it says "TiddlyWiki5" in the language-bubble (bottom right corner of VSCode UI). If it says "plain text" or anything else, click there and then type "tiddlywiki" to bring it up in the language-list.

Once the language for the file is set correctly, the Illegal Fields Names in the header will be red ("Invalid.illegal" scope). Other colors depend on the Theme you are using and what "scope" each bit of text is set to. I have not read the full Grammar I have borrowed, but the test file will reveal most of the current colors.

Also, while VSCode has "folding groups by indent level" automatically, I have also setup Regex to recognize `<!-- #region Name -->` and `<!-- #endregion -->` as folding markers (which should make navigating large text tiddlers a bit easier). At some point, a full File Outline may be possible (a ways out).

I am also experimenting with "Snippets" (which I also borrowed). Some have just been setup in the repo (re-download or pull). These allow "shortcuts" to full lines of code. For example, type "table" and the IntelleSense will how a bunch of option in a pop-up. Select the first "Table (Tiddlywiki..." item with the arrow keys and press Tab. Your shortcut has been repalced with:

|Data One   |Data Two  |

|Data Three |Data Four |

There are many more to go through, and these will also likely be changing as I get used to working with them.

Best,
Joshua F

[Joshua Fontany]

Also, this Color Theme for VSCode based on GruvBox means that you can use the same palette in both your code editors and your wiki.

https://marketplace.visualstudio.com/items?itemName=jdinhlife.gruvbox

(This one has good syntax highlighting setup so far.)

Looking killer together:

[Julio Peña]

Hi all,

Ooooo loving that theme!

Best wishes,

Julio

[Joshua Fontany]

Thanks Julio! :)

I have updated some tweaks to the syntax files to be more compatible with the "standard" scope names.

Field-names in `*.tid` and `*.meta` files should now be golden-yellow unless invalid (red) with the linked GruvBox Dark Theme.

Under default Dark+ they are now light blue if valid. Under default Light+ they are bright red if valid, dark red if invalid (not the best, granted).

Best,
Joshua F

[Mohammad]

Hi Josuha,

I install the latest extension with Gruvbox and I could reproduce the same results as you!

One comment: It seem there is no highlighting for strings? Am I right?

Thank you. Keep going on!

--Mohammad

[TiddlyTweeter]

Useful! Great for me as I find longer TW macros hard to read.

Tx

[Joshua Fontany]

Hi, please find an updated repo on Github.

I have updated link, string, and pragma recognition. Fixed a few other syntax bugs. You will definitely see a lot more higlighting.

Next up, improving Filter highliting.

Best,

Joshua Fontany

[Joshua Fontany]

Version updated to 0.1.2:

## 0.1.2

- Improved variable, tranclusion, link, and macro definition recognition

- Setup seperate "language names" for *.tid / *.meta ("tid"), vs  / *.multids files ("multitids") vs *.tw / *.tw5 wikitext ("tiddlywiki5"). This helps debugging and with certain grammar features (injections).

- Mapped MIME types

[Mohammad]

Thanks for Updating!

It looks lovely!  I just noted when the first .tid is opened there is a log for VS to recognize and highlight it!

Opening other .tid files VS do the job quickly.

--Mohammad