streamlit-code-editor icon indicating copy to clipboard operation
streamlit-code-editor copied to clipboard

Adding lean4 as language

Open AnirudhG07 opened this issue 6 months ago • 2 comments

Hi, Thanks for the amazing streamlit code editor. I would like to add lean4 as a language in the option lang, which is currently not there as it seems. The community has made highlightjs-lean. Can you pls share on how to add this language for lang? Please share what other resources might be needed to get it to work. The react-syntax-highlighter repo seems unmaintained so this issue has yet to be resolved.

Thanks in advance!

AnirudhG07 avatar Jun 10 '25 10:06 AnirudhG07

That would be super useful, agreed!!

sorgfresser avatar Aug 12 '25 14:08 sorgfresser

Thanks for the reminder.

I probably wont be able to work on this anytime soon. If you want to add the language, there are a few steps and somewhat of a learning curve. If I were to do it myself, I would try to use AI to do it.

Here are the resources you need:

Steps:

  1. Create a fork of my fork of ace-builds
  2. Go to ace-builds > src-noconflict in your fork (of my fork)
  3. Add mode-lean4.js file
  4. Use the resources above and refer to other mode-*.js files as examples (maybe feed AI a couple of these files as examples in addition to the resource with instructions) to help you code this file.
  5. Add lean4 to ext-modelist.js file in the same directory.
  6. Add the new mode file you created (mode-lean4.js) to ace-modules.d.ts and the resolvers (webpack-resolver.js and esm-resolver.js) in the main directory ace-builds.
  7. Once you get it working, submit a pull-request to my fork.

I think that should be it. The last steps 5-6 should be easy, because you can follow the pattern used for all the other mode files and you probably have to only add like one line per file. AI should be capable of this task.

I only mention using AI because there are clear rules to follow and AI usually does better when you can feed it detailed rules and examples and also, the fastest way is probably to use AI unless you have experience with this.

What the above steps accomplish is wrapping the parts of the code with span tags with classes assigned. The first resource covers this. The last remaining thing to do is add CSS with those class names. This is the part I am not sure about. It think maybe its best to use the CSS used by other languages (since most programming languages have the same types of tokens..like comments, functions, definitions etc)

bouzidanas avatar Aug 12 '25 17:08 bouzidanas