CodeEditApp / CodeEditApp/CodeEdit

✨ Export code to image for social media / blogs

Open
#276 1 comment 2 reactions 0 assignees View on GitHub
enhancement
Dominant language
Swift
Stars
23k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

**Problem:**
It's hard to share code on social media, e.g. on Twitter with its character limit and lack of syntax highlighting. The same is true for some popular blogs, e.g. on [medium.com](https://medium.com) or even newsletters like [getrevue.co](https://www.getrevue.co/).

For example, I recently wrote [this newsletter issue](http://se-monthly.flinedev.com/issues/swift-evolution-monthly-01-background-history-chris-lattner-6-proposals-1092625) / [blog article](https://jeehut.medium.com/swift-evolution-monthly-first-issue-7d276705c4e0?sk=ad1693bf56e189748f478e3538844aef) and I had to use services like [ray.so](https://ray.so) and [GitHub Gists](https://gist.github.com) to show properly syntax highlighted code snippets in a nice, legible size.

**Solution:**
Since CodeEdit already aims to support nice syntax highlighting for many languages and font size customizability and probably even more features that help "making code look nice", I suggest to add a "share image" functionality that could basically just **take a screenshot of the current editor view** and save that into an image file or allow copying the image into the clipboard for easy pasting into the aforementioned contexts (blog / newsletter / social media).

This should be possible for either the entire current file (e.g. via the existing "File > Share" or a new "File > Export" menu) or just the selected lines of code (same menu on right-click).

**Alternatives considered:**
Before thinking about adding such a feature to this app, I actually considered writing my own Mac app that is built for this purpose alone, supporting only Swift files. But I figured it would be more useful added to this app long term.

Note that there are these services which try to fill the same gap, but none of them allows to share a simple non-windowed image focusing on just the code without shadows & padding (I guess because you could just make a screenshot on your computer, but then I have to always get the pixels perfect and that rounding edge of windows on Mac also look ugly) – also some of them just fail at exporting a (Retina) image:

- https://carbon.now.sh
- https://ray.so
- https://codeimg.io

**Additional context**
A common use case would be that a developer creates a project with lots of small "snippet" files for an article or newsletter, or just a single file for a social media post. In the best case (could be added in later versions), there would be feature to select a specific theme or style where preferred background color and other options are set for the screenshots. Also some extra image-export specific funtionality such as adding a shadow, padding, window style, showing/unshowing line numbers, re-formatting code to a smaller line width etc could be added over time.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.