Syntax highlighting and code annotations in the editor and editor preview

[twMat]

Good stuff.

Here is an alternative route that I think would actually be better (assuming it is at all possible):

I would want the preview feature to have an alternative for “show annotations” (i.e along the alternatives “output”, “parse tree”, “differences from shadow”, etc). When this is active, the left editor shows the full code but with the annotations styled in very pale color (so only the code sticks out) and in the right pane it is the opposite; the code is totally invisible and only the annotations are seen.

I’d build this myself if I knew how to css target only comments inside the editor. And if I did know that, then I imagine this whole thing would be simple to create.

[pmario]

@twMat

I’d build this myself if I knew how to css target only comments inside the editor. And if I did know that, then I imagine this whole thing would be simple to create.

The Styles can be found at GitHub

The code highlighter has it’s own theme-able styles. You can probably look them up in the core highlighter-plugin.

[twMat]

@pmario

The Styles can be found at GitHub

The code highlighter has it’s own theme-able styles. You can probably look them up in the core highlighter-plugin.

Thanks, I’ll look it up in the code highlighter.

(what I currently don’t understand is how to target a code segment in the editor)

[twMat]

@pmario

The code highlighter has it’s own theme-able styles. You can probably look them up in the core highlighter-plugin.

OK, so codemirror creates a totally different html structure for the editor, so the targetting “address” for text inside TWs native editor is totally different. For one, the native editor is embedded in an iframe - not so with the codemirror editor AFAICT.

Anybody got any other ideas? I.e how to css target things in the native TW editor?

[CodaCoder]

@twMat

OK, so codemirror creates a totally different html structure for the editor,

True

so the targetting “address” for text inside TWs native editor is totally different.

It’s an HTML <textarea> element. It can’t be targeted by CSS like that.

For one, the native editor is embedded in an iframe [true] - not so with the codemirror editor AFAICT. [true].

Anybody got any other ideas? I.e how to css target things in the native TW editor?

Can’t be done. Writing a mode for codemirror is pretty much your only choice, AFAIK.

The question I have is, what do you intend to do even if you could target (say) line 6, character 37? You can’t simply insert <span class="yellow-bg"> because it will render exactly that as plain old text. ← it’s a textarea (clue is in the name).

If you have the time (tons of it) and the patience, learn how to write a mode for codemirror. Good luck!

[pmario]

@twMat

OK, so codemirror creates a totally different html structure for the editor, so the targetting “address” for text inside TWs native editor is totally different.

Codemirror has a styles tiddler too: https://tiddlywiki.com/prerelease/#%24%3A%2Fplugins%2Ftiddlywiki%2Fcodemirror%2Fstyles – If you edit it, you’ll see, that some elements go with the TW palette colours.

Others can be adjusted for your liking.

Codemirror also has themes: CodeMirror: Theme Demo which you can use to adjust your settings.

GH code for themes: codemirror5/theme at master · codemirror/codemirror5 · GitHub I think we used the default theme and added the TW specific stuff to it.