Show HN: Gitcasso – Syntax Highlighting and Draft Recovery for GitHub Comments

33•etwigg•3mo ago

I built a browser extension called Gitcasso which:

- Adds markdown syntax highlighting to GitHub textareas

- Lists every open PR/issue tab and any drafts

- (Optional, unimplemented) autosaves your comment drafts so you don’t lose work

I made it because I was impressed by https://overtype.dev/ (a markdown textarea syntax highlighter) which went big on here on HN a few weeks ago, and it seemed like a perfect fit for a GitHub browser extension. Keeping up with changes on upstream GitHub would normally be a pain, but with with Playwright and Claude Code it seemed possible for it to be nearly automatic, which has turned out to be mostly true!

This was the first time where I built a tool, gave the tool to AI, and then AI used the tool to make the thing I hoped it would be able to make. I'm pretty sold on the general technique...

GitHub repo (Apache2-licensed, open source): https://github.com/diffplug/gitcasso

Video walkthrough (2 mins of the tool, 12 mins of its development tooling): https://www.youtube.com/watch?v=wm7fVg4DWqk

And a text writeup with timestamps to the video walkthrough https://nedshed.dev/p/meet-gitcasso

Comments

dorianniemiec•3mo ago

The idea seems good - this can make Markdown in the comment editor more readable!

But when I tried your Chrome extension, I found a problem - the comment box became light mode, when GitHub is in dark mode...

I have opened a GitHub issue about this problem.

etwigg•3mo ago

Agggh! My eyesssss!!! Thanks for creating the issue and posting a screenshot, we will 100% have to fix it!

https://github.com/diffplug/gitcasso/issues/112

andreynering•3mo ago

For those that don't know, on Settings > Appeaarance there is a setting for "Use a fixed-width (monospace) font when editing Markdown". It's already a good QoL improvements (and it should be the default, honestly).

https://github.com/settings/appearance

etwigg•3mo ago

At the beginning of Gitcasso, I took a little survey of GitLab, Reddit, ChatGPT, Claude, etc. to see how they were doing their textboxes. Of those I just listed, GitHub is the only one still using a plain textarea, all of the rest have a wysiwyg richtext gizmo (with GitLab and Reddit you can opt-in to markdown).

But by using the same variable-width font that the rendered comment uses, GitHub's default gives you more of a wysiwyg experience than a monospace font does. With syntax-highlighting it's an even more wysiwyg feel, but with absolutely none of the content ambiguity that richtext normally brings with it.

I came away really impressed with GitHub. For any given decision, it's hard to tell if the market victor won because of their good taste or if they won in spite of that particular decision and there was somewhere else where the good decisions were decisive. But as the GitHub issue/PR commenting system stands today, I have a hard time finding much to gripe with (except the missing syntax highlighting, of course).

DiabloD3•3mo ago

When is this being added to the Firefox extensions repo?

etwigg•3mo ago

I was basically waiting for someone to ask: https://github.com/diffplug/gitcasso/issues/115

DiabloD3•3mo ago

Thank you.

DTrejo•3mo ago

Nice extension!

1. It'd save a lot of time if one could just click a Markdown PR description and start editing it, without entering edit mode first.

2. Thanks to the following prompt, I barely write PR descriptions these days.

> Run `gh pr view` then `gh pr edit` to fill out the PR description. Use my words verbatim as much as possible. Be brief. Use tasteful markdown formatting.

lelandfe•3mo ago

> I barely write PR descriptions

As someone who has to read a coworker's AI-generated slop PR descriptions every day, what a bummer

imiric•3mo ago

Thanks for sharing. Seeing related issues and PRs seems like a useful feature. Though it would be better if the extension could somehow determine and show the related issues and PRs to the current issue/PR, instead of listing all open tabs.

But I find the other two features to be less useful, personally. I tend to do all writing in my favorite text editor (where I'm writing this now), which is already configured with syntax highlighting, and all my editing preferences. I can save my work at any time, and always have a local copy of it. In contrast, typing in textareas is a cumbersome and risky experience no matter how friendly the UI is. One wrong click or keypress could waste minutes or hours of your time. We all have our workflow preferences, of course, but I would encourage any technical person to use their editor instead. If you don't like manually copy/pasting text back and forth, there are browser extensions that automate opening up an editor, and syncing the contents with a specific textearea.

I watched your video walkthrough, and as someone who still uses LLMs exclusively via a conversational UI, it's shocking to me that it took you 7 minutes to update the "corpus" for the LLM, and run several commands, only for the actual fix to be a single-character change in a CSS selector. Sure, the difficult thing is knowing which file and character to change, but given the issue, any developer familiar with the codebase would instinctively know where to look first, and fix the issue in a fraction of that time. Maybe even add a test case for it.

This is far from the efficiency and speed these tools were promised to deliver. Aside from the fact that you admit not having an understanding of the testing framework you vibe coded, when your entire development workflow depends on it. If this is the future of software development, as you claim, what a bleak future it is.

BTW, you have a very nice shed, Ned. :)

etwigg•3mo ago

> I tend to do all writing in my favorite text editor

Have you tried https://ghosttext.fregante.com/

> typing in textareas is a cumbersome and risky experience

Exactly! Forget syntax highlighting, that's the real problem to be solved! (gitcasso is very far from achieving that rn)

> any developer familiar with the codebase ... fix the issue in a fraction of that time

Fair point. I published an example which was easy to follow rather than an example which showed off the tooling at its "max strength". I recorded a different take where I added support for issues being opened within a GitHub Project. The scraping there is a lot more complex, fixing one case tends to break another, and the AI can solve it in pretty much the same time, but the video felt too confusing to bundle with the launch.

> any developer familiar with the codebase

Refined GitHub (a popular github browser extension) has long rejected syntax highlighting for being too hard to maintain. So part of the goal here is to automate that maintenance - hopefully there won't even be a developer who is currently familiar with the codebase pretty soon. The slowest part by far is capturing the snapshots in the first place, which could/ought be automated.

> you have a very nice shed

Thanks imiric! And thanks for sharing your thoughts :)

westurner•3mo ago

refined-github > Highlights > Adding comments, Conversations: https://github.com/refined-github/refined-github#writing-com...

etwigg•3mo ago

yeah, refined-github is definitely the legend here, GitHub has incorporated so many of their ideas. But as of 2021 they were pretty dead-set against syntax highlighting: https://github.com/refined-github/refined-github/issues/5075

> We are not going to mess around with the comment box with syntax highlighting, which numerous people tried and failed due to GitHub updates or edge cases that are not so edgy.

smcleod•3mo ago

Nice but is it possible to limit which websites the extension has access to? It's requesting access to read and modify content on all websites!

OpenCiv3: Open-source, cross-platform reimagining of Civilization III

The Waymo World Model

Show HN: Look Ma, No Linux: Shell, App Installer, Vi, Cc on ESP32-S3 / BreezyBox

Monty: A minimal, secure Python interpreter written in Rust for use by AI

A century of hair samples proves leaded gas ban worked

Show HN: I spent 4 years building a UI design tool with only the features I use

Dark Alley Mathematics

Microsoft open-sources LiteBox, a security-focused library OS

Sheldon Brown's Bicycle Technical Info

Show HN: If you lose your memory, how to regain access to your computer?

Hackers (1995) Animated Experience

Show HN: R3forth, a ColorForth-inspired language with a tiny VM

An Update on Heroku

I spent 5 years in DevOps – Solutions engineering gave me what I was missing

How to effectively write quality code with AI

Learning from context is harder than we thought

Understanding Neural Network, Visually

FORTH? Really!?

I now assume that all ads on Apple news are scams

The Oklahoma Architect Who Turned Kitsch into Art

I'm going to cure my girlfriend's brain tumor

Claude Composer

Show HN: Smooth CLI – Token-efficient browser for AI agents

Evaluating and mitigating the growing risk of LLM-discovered 0-days

Show HN: Slack CLI for Agents

How virtual textures work

The Beauty of Slag

Evolution of car door handles over the decades

Planetary Roller Screws

Masked namespace vulnerability in Temporal

OpenCiv3: Open-source, cross-platform reimagining of Civilization III

The Waymo World Model

Show HN: Look Ma, No Linux: Shell, App Installer, Vi, Cc on ESP32-S3 / BreezyBox

Monty: A minimal, secure Python interpreter written in Rust for use by AI

A century of hair samples proves leaded gas ban worked

Show HN: I spent 4 years building a UI design tool with only the features I use

Dark Alley Mathematics

Microsoft open-sources LiteBox, a security-focused library OS

Sheldon Brown's Bicycle Technical Info

Show HN: If you lose your memory, how to regain access to your computer?

Hackers (1995) Animated Experience

Show HN: R3forth, a ColorForth-inspired language with a tiny VM

An Update on Heroku

I spent 5 years in DevOps – Solutions engineering gave me what I was missing

How to effectively write quality code with AI

Learning from context is harder than we thought

Understanding Neural Network, Visually

FORTH? Really!?

I now assume that all ads on Apple news are scams

The Oklahoma Architect Who Turned Kitsch into Art

I'm going to cure my girlfriend's brain tumor

Claude Composer

Show HN: Smooth CLI – Token-efficient browser for AI agents

Evaluating and mitigating the growing risk of LLM-discovered 0-days

Show HN: Slack CLI for Agents

How virtual textures work

The Beauty of Slag

Evolution of car door handles over the decades

Planetary Roller Screws

Masked namespace vulnerability in Temporal

Show HN: Gitcasso – Syntax Highlighting and Draft Recovery for GitHub Comments

Comments