Color Synthax HighLight to Custom Story Format

X-Raym

Hi !
Is there any way to add/guide for adding color syntax highlight to Custom Story Format in the Twine editor ?

I am interested by Snowman and especially Protagonist variant but not having visual clues about the syntax make it hard to code.
It was requested for Protagonist here.

Thanks for your support !

greyelf

Twine 2 requires the story format developer to implement syntax highlight by accessing the build-in editor programmatically and writing the Javascript required by it, and currently the only story format(s) with this feature is Harlowe.

I don't know of any guide explaining how to implement this feature for Twine 2, so I can only suggest the developers of other story formats look at Harlowe's source code to see how it was done.

Someone else may have a better answer.

X-Raym

Thanks greyelf this helps understand the situation, and give hope about how to find a solution.

So here is the file in harlow which allows that
_L_ / harlowe / source / js / markup / codemirror / mode.js — Bitbucket

I think it also works with some other js in the parent directory.

But I don't know yet how to minify Protagonist (or any other custom format) for distribution (and so for testing).

For Snowman, I see there was infos about that at the bottom of the readme, it seems that learning basic Node.js and Gulp is necessary. I don't have any experienced with those so I can't test color syntax implementation for now.

Meanwhile, I posted a FR for Color Syntax Highlight for Snowman.

X-Raym

ARF I cant edit my post,
I meant NPM, not Node.js ^^

X-Raym

Just succeeded to update / compile Protagonist but...
it doesn't look like the format.js is loaded on the editor side...

Did I miss something ?

TheMadExile

First question. Did you install it?

X-Raym

@TheMadExile
Yes it is installed.
Following your comment, I did a bit of inspection.

It seems that custom format.js is only loaded when clicking on the Change Story Format button, even if you don't change the story format. More, it loads ALL the format.js of all story format.



I don't know if this expected, but it doesn't look very right, IMHO.

What do you think ?

TheMadExile

Each story format is stored as, essentially, a JSONP chunk within its format.js file. To populate the format dialogs with the details of each installed story format—e.g. name, version, author, description—it must load the format.js file of each format. This is expected and normal.

X-Raym

So the format.js script is loaded/cached even if I don't see it in the network log ?

TheMadExile

What do you mean? The animated GIF you posted clearly shows the story format being loaded from what I assume is your website, extremraym.com.

X-Raym

@TheMadExile
The gif shows that format.js are downloaded when clicking on story format. I understand this is to display formats.js info, contains as JSONP chunk.
But the gif also shows that these format.js are NOT downloaded before clicking on story format, even if a custom format was already choosen.
So the question is the following : can a format.js, as suggested by greyelf, handes color syntax information for backend ? But what about the fact that the format.js is not loaded at document.ready but only after clicking the menu ?

Put in another more global way : How would you put color syntax support in the editor to a custom language ? Do you have any working demo to show us ?

--
I tried a different approach with the codemiror mode.js file of Harlowe and with GreaseMonkey browser addon, without success. But maybe I miss a thing for this method.

TheMadExile

X-Raym wrote: »

But the gif also shows that these format.js are NOT downloaded before clicking on story format, even if a custom format was already choosen.

Because there is no need to load the format at that point. Format loading is lazy, it does not happen until the format is required. Merely being on the story map does not require a format to be loaded—no information about the format is displayed there, nor is its CodeMirror mode yet necessary.

If you open the project's change story format dialog, which enumerates the formats, then loading the formats is required, as your GIF showed.

If you had opened the passage editor, then you would have seen the project's selected format being loaded, as doing so would be required to obtain its CodeMirror mode. Give it a try.

X-Raym

TheMadExile wrote:

If you had opened the passage editor, then you would have seen the project's selected format being loaded, as doing so would be required to obtain its CodeMirror mode. Give it a try.

You are right Thanks for the detailed information.
So, format.js can indeed be used for syntax colorization. That's a good news.

That's where the hard begin.
I guess I could start by trying to import mode.js and see how it goes.