Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(shared/codeHighlight): add additional syntax highlight languages #7915

Merged

Conversation

jimeh
Copy link
Contributor

@jimeh jimeh commented Apr 1, 2025

🧢 Changes

Add syntax highlighting for additional languages in diff view. Specifically added Go, YAML, TOML, Lisp, Lua, and Swift. I have tested that each language does correctly syntax highlight files via the dev build.

This is my first change to Gitbutler, and some of the first TypeScript I touch, so apologies if anything is off or weird. I'd be more than happy to implement any changes. I couldn't spot any relevant tests that might have needed updates, but it is very possible I'm blind.

☕️ Reasoning

I primarily wanted support for Go, and also added a few more languages I commonly use, along with Swift to resolve #2684 as well while I was in the area.

🎫 Affected issues

Fixes: #2684

Screenshots

Dockerfile

Screen-Capture-2025-04-06-02-27-30

Go

Screen-Capture-2025-04-01-02-39-03

Jinja2

Screen-Capture-2025-04-06-02-28-01

Lisp

Screen-Capture-2025-04-01-02-40-22

Lua

Screen-Capture-2025-04-01-02-39-16

sh/bash/zsh

Screen-Capture-2025-04-06-02-27-45

Swift

Screen-Capture-2025-04-01-02-39-34

TOML

Screen-Capture-2025-04-01-02-38-49

YAML

Screen-Capture-2025-04-01-02-38-36

Copy link

vercel bot commented Apr 1, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
gitbutler-components ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 6, 2025 1:27am

Copy link

vercel bot commented Apr 1, 2025

@jimeh is attempting to deploy a commit to the GitButler Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Collaborator

@Byron Byron left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks so much for contributing, and the screenshots are a great idea, too!

Since a lot of care went into the individual commits, a Butler Review would be great to have for review as well.

In any case, @estib-vega will know what to do here.

jimeh added 9 commits April 6, 2025 02:25
Add CodeMirror's Go language parser to the codeHighlight module, 
allowing syntax highlighting for .go files and code blocks.

The changes:
- Install `@codemirror/lang-go` package as a dependency
- Add Go file extension detection in parserFromFilename
- Reorganize package.json dependencies alphabetically
remove golang extension check
Add `@codemirror/lang-yaml` dependency and configure it in the code 
highlight module to enable syntax highlighting for YAML files. Both 
.yml and .yaml file extensions are now supported with proper syntax 
highlighting.
Add support for TOML file syntax highlighting by importing the TOML 
language mode from CodeMirror legacy modules and configuring the 
parser to recognize .toml file extensions. This extends our code
highlighting capabilities to support TOML configuration files.
Add Lua language to the code highlighting support by importing the Lua 
module from CodeMirror legacy modes and registering it in the 
parserFromFilename function.
Add support for Common Lisp language highlighting in code snippets.
This includes importing the commonLisp module from CodeMirror's
legacy modes and configuring the parser to recognize .lisp, .cl, 
and .el file extensions. The implementation also handles Emacs Lisp
files which share the .el extension.
Add support for Swift language highlighting in the code highlighter
component. This enables proper syntax highlighting for Swift code by
importing the swift language module from @codemirror/legacy-modes and
adding a parser definition for files with the 'swift' extension.
Add support for syntax highlighting of shell scripts (.sh, .bash, .zsh)
This change enhances code highlighting functionality by adding support 
for Dockerfile syntax.

It specifically handles files named exactly `Dockerfile` (case-sensitive), begins with exactly `Dockerfile.` (case-sensitive), or has file extension `dockerfile`  (case-insensitive).
@jimeh
Copy link
Contributor Author

jimeh commented Apr 6, 2025

I've just rebased on top of latest changes from master, and also added syntax highlighting for shell scripts (sh, bash and zsh), Dockerfiles, and jinja2 template files.

With the shell scripts, I did also have a look if I could check any shabang comments at the beginning of the files to determine the language, but that was a no-go when I realized that the create function is called for each individual line, rather than each file as a whole.

But I guess that makes sense as we're operating on diffs rather than whole files. Though I assume things could be optimized to run once on a per-file basis rather than one per line. But that definitely falls outside of my experience level with TypeScript ^_^

@Byron Byron requested review from estib-vega and krlvi and removed request for estib-vega April 6, 2025 05:32
@Byron
Copy link
Collaborator

Byron commented Apr 6, 2025

Thanks again - even better!

Indeed, I'd also want to try and get this PR merged as is, but am interested in learning what would need to be done to be able to fetch language information from shebangs, or even markdown codeblocks.
On top of that, it would be interesting if such a system could be tuned to allow highlighting markdown blocks in Rust files correctly.

I also realize that @krlvi was editing this (old) file more recently.

Copy link
Member

@krlvi krlvi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice contribution, thank you very much @jimeh!

@krlvi krlvi merged commit 6a22cff into gitbutlerapp:master Apr 6, 2025
18 of 19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature request: missing color highlighter for Swift
3 participants