[Howto] Use TW5-Syntax plugin for VSCode.dev

Tips & Tricks
,
#1

Just to clarify something, VSCode is Visual Studio Code, a desktop application that is a “lightweight Visual Studio for Code”. Microsoft has ALSO launched https://vscode.dev/, which is “Visual Studio Code for the Web”, a free “zero install” online version of VS Code that runs in the browser. See: Visual Studio Code for the Web

You could try my TW5-Syntax plugin by launching https://vscode.dev/, clicking “Extensions” in the far-left bar (it’s the 4 blocks icon), and typing TiddlyWiki into search. Select “Tiddlywiki Syntax” (2nd result), and click Install.

Then open a new file by selecting the three-line “hamburger” button on the top of the left-bar, File → New File. Change the type to “Tiddlywiki5” by selecting “Plain Text” in the bottom status bar, typing “tid” into the open search popup, and choosing “Tiddlywiki5” (not “tid” or “multitid”).

Then go to https://tiddlywiki.com/#%24%3A%2Fcore%2Fui%2FEditTemplate (for example) and copy/paste the wikicode into the new editor-file.

6 Likes
The Worst Feature of Tiddlywiki
<% if %> and match[] and <% else %> oddity
TiddlyWIki Syntax highlighting
#2

Joshua (I’m a Josiah) …

Whoah! I think that a brilliant procedural description of using …

But, TBH, I think it will be too complicated to use unless you already familiar with Visual Studio???

Just a comment, TT

#3

This is wonderful news, not only was I unaware there was a webapp version of VSC, but that you can use TW5 syntax as well, is actually really cool.

#4

Bump. TW5 Syntax v2.0.0 HAS BEEN RELEASED!!!

2.0.0

  • scopeName text.html.tiddlywiki5
  • Full re-write to model tiddlywiki5 wikitext as a text.html.derivative style sytanx.
  • Updated syntax json version to current Tiddlywiki5 v5.3.4.
  • Updated known keywords/grammar concepts in json repository.
  • Imported full html5 syntax from tm-grammar, added tiddlywiki style attributes, etc.
  • New objects from text.html.basic renamed as htmlwidget-* for easy diff/updates.
  • Added snippets for modern tiddlywiki5 wikitext.
  • Added full set of automated tests to ./tests. Run npm run test to run all tests.
  • Added syntax highlihgting for tests files that marks the # ^ test.commment.with.expected.scopes lines appropriately.
  • Added reference required syntaxes to devDependecies in package.json
  • Fixed bugs with widget attribute syntax in base html tags
  • Fixed syntax bugs with macros
  • Fixed sytax bugs with block quotes
  • Fixed syntax bugs with image links
  • Fixed syntax bugs with links
  • Fixed bugs with horizontal rules
  • Fixed bugs with list quotes
  • Fixed bugs with codeinline, codeblock, typedblock.
  • Added .tw|.tw5|.tiddlywiki|.tiddlywiki5|text/vnd.tiddlywiki to #typedblock.
  • Added tw|tw5|tiddlywiki|tiddlywiki5 to #codeblock

This Text Mate Grammar compatible syntax is twice as big as the official html5 syntax, literally <5K lines of regex to text.html.basic's 2,500~ish lines of regex. :sunglasses:

7 Likes
#5

TW5-Syntax is now the #1 plugin for VSCode when searching for “tiddlywiki” in the extensions tab. Thanks everybody who has tried it out over the last few years.

1 Like
#6

Hi, It’s nice, but there seem to be some problems with the snippets

If I type action-n it allows to add the code snippet below. … But the to parameter needs to be $to – That’s true for all action-widgets and so on.

<$action-navigate to=<<currentTiddler>> scroll="no" />

1 Like
#7

Thanks! Issue filed: snippets\snippets.json: $action widget attributes need $ · Issue #16 · joshuafontany/VSCode-TW5-Syntax · GitHub

1 Like
#8

Mahalo (thanks) for sanity checking the snippets.jon file. I should be able to get to most of those today
:slight_smile:

#9

I did create a lot of PRs already. Just to be sure we do not do the same work twice

1 Like
#10

Congratulations, richly deserved. I find the plugin very useful and reliable.