TL;DR - I created a chrome extension to modify font styles of code text on GitHub to make my life a bit easier.
GitHub Repository, a star is really appreciated 😀
Demo
Motivation
As almost everyone out there, I love to spend a good amount of time on GitHub to manage my personal and professional projects but I also love to just explore other people's projects as well. It's fun to learn how other great developers do their magic.
So I end up spending a lot of my time reading code on GitHub, SPOILER ALERT! But I had one very specific problem which was kind of annoying me. The font styles of code text on GitHub. I had two problems:
- The font size was very small. I had to pay real close attention to read the code. I know I can just increase the zoom but it makes rest of the app out of proportion. I just wanted to increase the
font-sizeof the code text. - Kind of very specific to me but as a lover of aesthetic, I wanted my GitHub font of code text to match my code editor font.
How I did it
As everyone, first I started to look on the internet to find something that would solve my above problems. After a few hit and trials with the existing solutions, nothing really actually solved it.
So I decided, fuck it, let me do it myself. I had no idea how chrome extensions are built, the chrome API, etc. All I knew was, I had a problem, I knew what the solution I wanted and luckily I have been programming in JS/TS for the past few months and this is the language needed to make the extension.
Initially the extension was very specific to my need. It had no UI interface. Although, it did solve my problem. It would change the font-family and font-size of the code text elements on the DOM to whatever font name and font size I provided. It was hard coded, so If I needed to alter it, I had to change the source code, reload the extension, refresh the GitHub page for it to update.
It was uhh..., okay for me, but then I decided to take it to a next level. A UI interface( browser action popup ) which opens when you click on the extension icon. It let's you enter font name and font size and apply them instantly to all the GitHub tabs open. Again, I did this to save my time when I wanted to make changes to my custom font styles.
So finally, today, I am releasing this extension to public as I think its decent enough. Check out the GitHub Repository on how you can install the extension, currently it's not published on the chrome store.
Top comments (21)
Love it 😌. How can I use in Firefox ?
Ditch chrome, the giant data gobbler.
I think publishing to Firefox is free.
Also, I am the third person to star the repo. I believe this repo will one day have 1000s of stars.
Hey! I'm glad you loved it. Thanks for the good wishes.
And yes, I'll definitely try to get it to other major browser, like Firefox. As mentioned, it was a personal problem solution, seeing you like it with such confidence, I'll definitely work on getting it to Firefox.
Yes, please. I'd love too seeing an opportunity on Firefox!
Give me some time. I will definitely be working on getting this extension to Firefox ASAP. Till then, I request you to be in touch with the development of the project. Maybe star the repo, or follow me. I will definitely make a post about it on here as well once it is ready to be used in Firefox as well.
To be honest, I am really surprised by the positive response from you people. I didn't expect this. Thank you each one of you.
Hey everyone!
I am so glad to say that Better GitHub extension now supports Firefox and you can get it from Mozilla Firefox Addon website. Read the update post about it over here!!!
Hope you guys install the extension on Firefox and let me know how did it go. <3
This is really cool! If you don't have the money to publish to the Chrome web store, maybe you can set up Github sponsors for the repo, so people who use the extension and want to see it grow will be able to donate.
Hey! First of all, thanks for thinking it is cool. I really appreciate the kind words. Second of all, you are right and it's a great idea. I should setup a GitHub sponsors for the repo, I am not sure if that's a paid thing or not. I will definitely check it out. Once again, thanks for the kind words.
I don't think it is!
Yeah, I just read about it. I will have to get my profile approved to enable the "Sponsor" feature on the repo. It will take a couple of days. Will let you know how it goes.
It would be cool if you could incorporate something like Code-Prettify into the project so that you can set a default background and highlighting style. Cool idea so far though!
Yeah, that's a great idea. I'll definitely write it down. Thanks for reading the post and the good words.
Oh this is interesting.
I like to just zoom my browser with CTRL +
Or edit font size in the browser or OS.
So doing that solves the problem for you? Did you try to use this extension?
I haven't tried the extension. Zooming the browser from like 100% to 120% works great for me. I don't have the issue you have where you want a specific for GitHub.
Fair enough.
Ah this is cool.
Thanks! I'm so glad you liked it.
Good job!
Thank you! I am already very close to releasing this extension as Firefox addon as well. Make sure to stay tuned. Once again, thanks for reading the post.
Star the GitHub repo, I would really appreciate that.
Great extension, but I use github1s.com to get the VS Code experience in the browser :p
I looked at
github1s, so how do I customize the "VS Code" settings to get that experience? My key mappings, my theme, my font, etc ? Or does it allow me to open the repo in VSCode?