How to add more code highlighting support?

[fr0gger]

Hi, Thanks for your streamlit app, do you have recommendation or guidance of how to add a new syntax highlighting in the ace editor? Thanks

[bouzidanas]

Can you explain what exactly you are looking to do? Change syntax highlighting colors or create your own custom syntax detection or add special syntax keywords?

[fr0gger]

Basically I am trying to add my own custom syntax detection and keywords if possible. Not sure how to do it with Ace or if there is a way to do it through the option of your streamlit tool.

[bouzidanas]

So bad news on the latter. I did not build in a way to do this and I am not aware of any ACE options that allow you to do this.

The only way I know of is to add a mode file to ace which may be somewhat involved. Basically, right now, you would have to fork this repo, then go to streamlit-code-editor/code_editor/frontend/node_modules/ace-builds /src-noconflict/ and add your own mode-[custom-name-of-mode].js file. You can look into the others as examples and see how they differ to see what you would need to change for your purposes. After you finish creating this file and its contents, then you will need to make sure exports and imports are good here and here. Finally, you are going to have install your forked package on whatever machine is going to use it.

[fr0gger]

Right, okay that's still a good option! Thanks for taking the time to reply. :)

[bouzidanas]

I should mention that you have to alter the acebuilds node module that is included in this repo because the included module has bunch of bug fixes and includes the custom themes I created for streamlit.

In the future, I hope to migrate these changes to a fork of acebuilds which will help with maintenance and making the additions I described above.

[bouzidanas]

Here is a resource on how to compose syntax highlighter rules.

[fr0gger]

Thank you very much!