Better GitHub

🎨 Enhance your code reading experience on GitHub

Firefox · Chrome

Demo

Get the extension

Firefox

Chrome

Features

Simple interface to use the extension

Better Github allows you to apply custom fonts and modify font size of code text. These styles are applied to :

Example below have the following Better GitHub's config: Font Name is Hack and Font Size is 14.

• All the text inside a file while viewing( reading ) it.

  

• Code in README files that are inside "<code>" blocks also known as <pre> tags.

  

• Code in pull request diffs.

  

Note: If the custom styles are not applied( it can happen sometimes ), refresh the page.

Motivation

Default font size of code text was very small which gave me had a hard time reading code in any repository and in PR diffs. I also wanted my code editor font and GitHub font to be same.

Couldn't find anything existing to help me solve my problem, so I created this simple yet powerful extension for Chrome browser. If something does exist though, let me know, alright?

I called it Better GitHub inspired by Better Twitch TV and Better Discord.

Todos

Context: I created this list of tasks after I decided to make this extension public. Initially the code was very small and the font styles were hard coded. If I needed to modify the styles, I had to change it in the source code, reload the extension and refresh GitHub pages to reflect the updates. Consider this list as the roadmap for the project.

• Instead of hard coding the fontFamily and fontSize, we should be able to allow the user to choose a font size and font family of their choice (which they have installed on their machine).
• Create a browser action popup to show an interface to allow the user to customise their extension's settings for fontFamily and fontSize.
• Integrate browser action popup with chrome API to persist and read user's settings for fontFamily and fontSize from and to the storage.
• Apply styles without reloading whenever the settings are changed from the browser action popup interface.
• If no custom font styles are set, load GitHub's default font styles.
• User can reset font styles to GitHub's default font styles.
• Add GIF to show the usage( demo ) of the extension.
• Installation instructions on how to clone/download this repository, install the extension and use it.
• Logo for the extension that will be used as favicon, icon, in documentation etc.
• Firefox support as it was requested by others.
• Publish it as an official Mozilla Firefox addon.
• Publish it as an official Chrome extension on Chrome Web Store.
• Allow user to change only one property instead of all properties being mandatory.
• Add CONTRIBUTING.md to help others so that they can contribute to the project.