[tw5] What are editor options for TiddlyWiki syntax highlighting?

I’ve been thinking lightly about this for the better part of a month. As a way to make it easier to review complicated TiddlyWiki tiddler content, especially convenient when those tiddlers are in their own files (TiddlyWiki on nodejs.)

For the last couple of days, I’ve been pretty consumed by the thought: what editor could I use that supports TiddlyWiki syntax highlighting?

I was getting pretty frustrated until I fell upon GNU nano, and discovered how easy it is to create custom syntax highlighting for anything. Well, basic syntax highlighting is easy to get good enough results. A bit of effort to get towards perfection.

(Screenshot attached, using as an example some pretty nifty code Eric provided in another post to help out one of our TiddlerHood crew. Probably too many colours, but I’m just pushing the limits to experiment.)

Does anybody know of other editors that either have TiddlyWiki syntax highlighting built-in or allow custom language syntax highlighting?

Does anybody know of other editors that either have TiddlyWiki syntax highlighting built-in or allow custom language syntax highlighting?

There is a plugin for VSCode, named: TiddlyWiki5 Syntax, which can be installed as any other highlighter.

As a TW plugin there is: https://github.com/Gk0Wk/CodeMirror-Mode-TiddlyWiki5/blob/main/README_en.md now.

-mario

PMario

You forgot to mention your own Custom Markup that can do highlights easy already and more :slight_smile:

TBH we need to open up this more.

There is no serious brain science involved in editor markup.
It just needs a clever person like you to provide the way to engage a parser to apply the HTML/CSS as needed in render.

I think we making a mountain out of a molehill.
Your Custom Markup is really good in solving this kind of issue easily.

A think its Generic Solutions much better long term already. It it much better to have one logic than several.

Just saying,
TT

You forgot to mention your own Custom Markup that can do highlights easy already and more :slight_smile:

… Hmmm, It’s built for a different usecase. It can do highlights for the rendered output. … The OP is for editor highlighting.

There is no serious brain science involved in editor markup.
It just needs a clever person like you to provide the way to engage a parser to apply the HTML/CSS as needed in render.

As so often, the “devil is in the detail”. It’s relatively easy to performantly highlight 100 lines of code, but it’s really hard to be fast, if you highlight 100.000 lines of code. … Rightclick tiddlywiki.com and choose “Show Code” … It’s about 40.000 lines …

It’s easy to highlight a full code structure. Eg

If (a == b) {
do this
else {
do that
}

But what if the else { element is 300 lines away out of the screen and isn’t even rendered or in memory, since we can’t see it anyway. The highlighter still needs to show something that is valid. … Because the source text can be long we only can render what fits on the screen, ± 100 lines to satisfy page-up and page-down

There is a reason why the codemirror base-plugin is 166kByte as a minified file.

You are right, there is a lot of editor-overhead in the code, but that’s mainly because of browser quirks, at the times where the library was created.

I think we making a mountain out of a molehill.
Your Custom Markup is really good in solving this kind of issue easily.

Not as a syntax highlighter in edit mode.

A think its Generic Solutions much better long term already. It it much better to have one logic than several.

That’s right. But they have to be built for exactly that purpose. Sadly, for syntax highlighting there is no “1 size fits all” [1] approach.

There is codemirror-6 which created it’s own Lezer Parser system as a generic solution, that creates language specific highlighter modules, based on a language specific grammars. … There is a lot of science involved, if you want to create generic tools for syntax highlighting.

have fun!
mario
PS [1] I did write this sentence and then looked up the Lezer Parser documentation page :slight_smile:

1 Like

TT: You forgot to mention your own Custom Markup that can do highlights easy already and more :slight_smile:

PM: … Hmmm, It’s built for a different usecase. It can do highlights for the rendered output. … The OP is for editor highlighting.

Ciao PMario

My bad. For not fully understanding @Charlie_Veniot’s OP!

That said, I thought your post both addressed @Charlie_Veniot’s issues and the broader issue of general markup parsing well. I do appreciate such good orientation posts!

Issues arising …

1 - Right. Code-Mirror is the bees-knees for the programmatic mind :slight_smile:

2 - But, I do sometimes wonder about whether we could use the live Preview Pane in the Editor better.
Like get it to co-scroll with the edits?
Since preview is live in TW I do wonder if we could do better harmonizing its showing with the typing, broheem?

Best wishes
TT

1 Like

Yea, That would be a nice feature. … The main problem is that the rendered output doesn’t have any knowledge about the wikitext that created it. eg: A {{transclusion}} doesn’t produce a wrapper around the transcluded content, because it would add a lot of redundant elements to the TW UI and slow it down.

A list widget wikitext may only be 4 or 5 lines, but it’s output may be 50 lines. … We would need to add additional line info to the “parsetree” which would need to produce some meta data in the preview, where we can scroll to.

As I was writing this, I did have a very hacky idea. … But I need to think about it. … I’ll create an issue at github.

-mario

There is also a plugin for vim: https://github.com/sukima/vim-tiddlywiki/
(you just have to gti clone it wthin your .vim directory).

1 Like

Thanks all for the ideas.

None of those really do the trick for me, so I’ve decided to make GNU nano my TiddlyWiki-syntax-highlighting editor until something better ever comes along. (Maybe I’ll see what I’m missing if and when I can view some videos of those.)

  • really easy to create syntax highlighting for any language (or any kind of text)
  • extremely light and agile
  • loads of reference resources for GNU nano (including videos)
    I’ll do a demo video of the end-ish results once I’m done setting up highlighting for TiddlyWiki widgets.
1 Like

Oops. Nano because:

  • really easy to create syntax highlighting for any language (or for any kind of text)
  • extremely light and agile
  • loads of reference resources for GNU nano (including videos)

The GitHub discussion is here. https://github.com/Jermolene/TiddlyWiki5/discussions/6059
-mario