DEV Community

loading...
Cover image for Enhance your code reading experience on GitHub

Enhance your code reading experience on GitHub

ceoshikhar profile image Shikhar Sharma Updated on ・2 min read

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:

  1. 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-size of the code text.
  2. 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.

Discussion (21)

pic
Editor guide
Collapse
aahnik profile image
Aahnik Daw • Edited

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.

Collapse
ceoshikhar profile image
Shikhar Sharma Author

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.

Collapse
naruaika profile image
Naufan Rusyda Faikar

Yes, please. I'd love too seeing an opportunity on Firefox!

Thread Thread
ceoshikhar profile image
Shikhar Sharma Author

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.

Collapse
ceoshikhar profile image
Shikhar Sharma Author

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

Collapse
theonlytails profile image
TheOnlyTails

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.

Collapse
ceoshikhar profile image
Shikhar Sharma Author • Edited

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.

Collapse
theonlytails profile image
TheOnlyTails

I don't think it is!

Thread Thread
ceoshikhar profile image
Shikhar Sharma Author

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.

Collapse
mwrpwr profile image
Joseph Maurer

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!

Collapse
ceoshikhar profile image
Shikhar Sharma Author

Yeah, that's a great idea. I'll definitely write it down. Thanks for reading the post and the good words.

Collapse
michaelcurrin profile image
Michael

Oh this is interesting.

I like to just zoom my browser with CTRL +

Or edit font size in the browser or OS.

Collapse
ceoshikhar profile image
Shikhar Sharma Author

So doing that solves the problem for you? Did you try to use this extension?

Collapse
michaelcurrin profile image
Michael

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.

Thread Thread
ceoshikhar profile image
Collapse
ben profile image
Ben Halpern

Ah this is cool.

Collapse
ceoshikhar profile image
Shikhar Sharma Author

Thanks! I'm so glad you liked it.

Collapse
ra1nbow1 profile image
Matvey Romanov

Good job!

Collapse
ceoshikhar profile image
Shikhar Sharma Author

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.

Collapse
maxiqboy profile image
Thinh Nguyen

Great extension, but I use github1s.com to get the VS Code experience in the browser :p

Collapse
ceoshikhar profile image
Shikhar Sharma Author • Edited

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?