Simple Wikitext Syntax Highlighting

[Adithya B M]

I installed CodeMirror in the hopes of having a simple syntax highlighting for the TW Editor (like the way all the markdown editors have - see example below). 

Is there any simple way to achieve that? 

Writing CodeMIrror modes from scratch seems like a very demanding task which I dont want to enter.

Cheers,

Adithya

[JD]

I also want this! Hopefully someone out there can create an extension :( 

Just a +one 

[TW Tones]

First needing clarification

The above example is Markdown not tiddlywikis wiki text. Is there not optional plugins for CodeMirror that does this?

Tony

[Adithya B M]

Hi Tony 

The example is of Markdown. I was asking if there is a syntax highlighter which can do the same for TW wikitext.

There is no TW5 plugin with CodeMirror. There is a x-tiddlywiki (classic) one. That might be a good starting point but its too minimized and obfuscated to understand - https://github.com/Jermolene/TiddlyWiki5/tree/master/plugins/tiddlywiki/codemirror-mode-x-tiddlywiki

[PMario]

Hi,

There is one, that may work for TWclassic wikitext. .. I did create it for TWclassic CM plugin. ... But I didn't test it for TW5 yet.

It donsn't know anything about widgets and widget parameters and so on.

see: https://codemirror.net/mode/tiddlywiki/index.html

would this be enough?

-mario

[Adithya B]

Hi Mario.

I tried that before posting here. It works when I visit the codemirror demo (https://tiddlywiki.com/plugins/tiddlywiki/codemirror/) , and change the format to x-tiddlywiki but there seem to be a big bug (where the formatting breaks when urls have //)

I would happily give some time to work on it if you can help me understand this code:  https://github.com/Jermolene/TiddlyWiki5/tree/master/plugins/tiddlywiki/codemirror-mode-x-tiddlywiki

Its obfuscated and minimized :/

I would love it it if this plugin

1) Works with TW5 Wikitext by default (without needing the content-type to be changed)

2) highlights the headlines (!)

3) colours everything within [[ ]], {{}} and << >>

4) Makes hyperlinks work

[PMario]

On Sunday, August 16, 2020 at 9:02:37 PM UTC+2, Adithya B wrote:

[...] change the format to x-tiddlywiki but there seem to be a big bug (where the formatting breaks when urls have //)

Yea, that's a bug. ... The "workaround fix is" put a // at the end of the line, which will end "italic" formatting.

 

I would happily give some time to work on it if you can help me understand this code:  https://github.com/Jermolene/TiddlyWiki5/tree/master/plugins/tiddlywiki/codemirror-mode-x-tiddlywiki

Its obfuscated and minimized :/

You'd need to work with the source code. https://github.com/codemirror/CodeMirror/blob/master/mode/tiddlywiki/tiddlywiki.js

You'll need to understand the internal working of cm-mode code. .. see: https://codemirror.net/doc/manual.html#modeapi

 

I would love it it if this plugin

1) Works with TW5 Wikitext by default (without needing the content-type to be changed)

That should be a relatively easy fix.

 

2) highlights the headlines (!)

3) colours everything within [[ ]], {{}} and << >>

4) Makes hyperlinks work

I don't  understand this one. May be // as mentioned above.

-mario

[Adithya B]

Hi Mario,

Thanks for the help.

I have been able to get it working in TW5!

I have created a new project here: https://github.com/adithya-badidey/TW5-codemirror-plus to start working on it.

JD and others, can you try it out and give feedback?

This is how it looks

[JD]

Adithya! This is wonderful, especially for people like me who want the tiniest degree of separation between View and Edit modes!

Some things I hope you can add:

\define macroMe(name:"teacup")
I'm a little $name$
\end

Can macro definitions have a certain color, and the macro name to be bold? For example, I wish this whole block to be <<colour muted-foreground>>, where $name$ is highlighted in another color, maybe <<colour code-foreground>>, sample:

\define macroMe(name:"teacup")
I'm a little $name$
\end

 

As an extension to this thought: can I target this whole text block in CSS? This is a desirable workflow for me: on mouse-hover, this whole block of text is very visible, to allow no room for mistakes while editing. Then with no mouse hover, it assumes the coloring as stated above, or maybe even just a lighter opacity (I can do this with CSS of course, if it's a class that can be exposed to me)

//ddf//
 __underline__
  ~~strikethrough~~ 

And some sup^^s^^ and sub,,s,, because I write like this sometimes

I hope you can add the above in the future, especially the //Italics//, __underlines__, and ~~strike-throughs~~! (no google groups formatting for strikethroughs, so I can't show the visualization)!

 

<<list-links "[tag[task]sort[title]]">>
<<macroMe "ant">>

Like [[*]] and {{*}}, can <<* "">> have a color? And within it, can strings starting and ending with " also be styled? Sample:

 <<list-links "[tag[task]sort[title]]">>

<<macroMe "ant">>

For strings inside back-ticks, 

`monospace me, and color <<colour code-foreground>>?` 
```
monospace me, too?
```

I've set my CodeMirror font to NonSerif, can it be so that strings within back-ticks are monospaced, colored <<colour code-foreground>>?

As for the html links, they're colored already, but can that be extended so that maybe clicking on them while CTRL is held down, will result to the link opening in another browser tab? Also, I write external links this way a lot:

[[title|http://adithyab.tiddlyspot.com/]]

can it be treated differently from a normal tiddler [[*]] link ? Sample:

[[title|http://adithyab.tiddlyspot.com/]]

 

I'm sorry if these are a hassle to include! I am requesting these from the perspective of someone going in and out of wikitext and defining macros, who need these visual identifiers in the textarea.

Also from a perspective external to tiddlywiki... In my line of work, there is a lot of visual identifiers in "edit mode", before we pass on the work to people who will only ever access it in "view mode". This is to help us designers in our field to self-correct immediately, reducing the need for multiple checks, while the raw form of the work is still exposed to us (rarely do we even access the work in "view mode").

Your CodeMirror extension has the potential to really mirror my actual non-tiddlywiki work setup, and thus I'm really excited! I hope somehow these can be implemented in your future plugin. If not, I wish you can provide tutorials so I can personally extend the features (I have totally no idea how to JS)

Thanks for this, really! It has so much potential! 

-jd

[Adithya B]

Thanks for the suggestions and enthusiasm :)

I am too a bit rusty with javascript but am gaining confidence as I work on this more.

I just fixed this today (check the latest version on adithyab.tiddlyspot.com):

```
monospace me, too?
```

Do you use github? It would help if you can start filing these on the github repo.

https://github.com/adithya-badidey/TW5-codemirror-plus

I will use that to chip through these slowly.

Cheers,

Adithya

[E Browns]

Thank you! I'll file these feature requests there ^^,

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/8gtLjAwgQG0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8c3b6dad-a24d-42a6-8bf2-28caf86143d7n%40googlegroups.com.

[Adithya B]

@PMario

I am trying to extend the editor functionality further (here: https://github.com/adithya-badidey/TW5-codemirror-plus) but most of the code in the TW repository is minified.

For example:

- https://github.com/Jermolene/TiddlyWiki5/blob/master/plugins/tiddlywiki/codemirror/files/addon/selection/activeline.js

- https://github.com/Jermolene/TiddlyWiki5/blob/master/plugins/tiddlywiki/codemirror-closebrackets/files/addon/edit/matchbrackets.js

Where can I find the non-minified code for all the TW addons for CodeMirror?

Cheers,

Adithya