GitHub code guides
A userscript that allows you to add one or more vertical guidelines to the code
- The userscript adds guideline(s) to code blocks.
- Customize the guideline position, color and width.
- Add as many guidelines as you desire.
- By default, one guide is set at 80 characters.
- Guidelines are added as a background linear gradient with multiple stops.
- It will not interfere if you copy & paste the code.
- The script was inspired by this thread: https://github.com/isaacs/github/issues/738.
- Click this link to install from GitHub; or, install from GreasyFork or OpenUserJS.
-
NOTE: A Chrome linear gradients bug currently makes the guide(s) invisible or blurry - See the known issues page for more details. -
See this issue as to why the guidelines don't always line up (in diff files). -
The userscript adds CSS to use a monospace font in all comment textareas. Removed in v1.1.0. Use the toggle instead.
* The misaligned guides inside the expanded content still align with the set position.
- Guidelines are set using a background linear gradient set using the
chunit, the width of the font's zero glyph (see browser support). - Because the
chunit is used, the font must be monospace or the guidelines will not be accurately set. - The specific values used are adjusted as follows:
-
To align the guides after the setting, we need to addRemoved in v1.1.7.13px(for padding) - The minimum width of the guideline is
0.2chbecause if any less, the guideline is not visible. - See the example section below to see that a guideline set to
80chwith a0.2chwidth is converted into a background linear gradient definition with stops at81chand81.2ch. - The extra
1chis added to move the guides after the character column which indicates the maximum line length.
-
- I know the following method of adding guides isn't great, but it's a quick and dirty method to add guides.
To change the setting in Greasymonkey:
-
Click on the Greasymonkey addon icon.
-
Select "User Script Commands..."
-
Choose "Set code guideline position & color".
- A prompt will open asking you to enter a guideline object.
- Enter a valid JSON string following the example format shown in the example section.
In Tampermonkey:
-
Click on the Tampermonkey extension icon.
-
Choose "Set code guideline position & color".
- A prompt will open asking you to enter a guideline object.
- Enter a valid JSON string following the example format shown in the example section.
- Enter a font that is installed on your system; the script will not load external fonts.
- Font names are added to a font stack with the entered name first.
- The other fonts listed in the stack are (in order): Consolas, "Liberation Mono", Menlo, Courier and monospace.
To change the setting in Greasymonkey:
- Click on the Greasymonkey addon icon.
- Select "User Script Commands..."
- Choose "Set code guideline default font".
- A prompt will open asking you to enter a font name.
- Do it.
In Tampermonkey:
- Click on the Tampermonkey extension icon.
- Choose "Set code guideline default font".
- A prompt will open asking you to enter a font name.
- Do it.
- Tab size option added in v1.1.4.
- A default tab size of
2is set. Use the Greasemonkey/Tampermonkey settings panel to modify it. - If you are using GitHub Dark, this setting will be overwritten by the GitHub Dark tab setting.
[{
"chars" : 80,
"color" : "rgba(0, 0, 0, .3)",
"width" : 0.2
}]Resulting CSS (see the Guidelines section above to see why these values are used)
.blob-code {
background: linear-gradient(
to right,
transparent 0%,
transparent calc(81.0ch),
rgba(255, 0, 0, 0.3) calc(81.0ch),
rgba(255, 0, 0, 0.3) calc(81.2ch),
transparent calc(81.2ch),
transparent 100%
) !important;
}/* example css of two guidelines at 80 and 84 characters
(84 used in case you indent using spaces) */
[{
"chars" : 80,
"color" : "rgba(255, 130, 0, .3)",
"width" : 0.2
}, {
"chars" : 84,
"color" : "rgba(255, 0, 0, .3)",
"width" : 0.2
}]Resulting CSS (see the Guidelines section above to see why these values are used)
.blob-code {
background: linear-gradient(
to right,
transparent 0%,
transparent calc(81.0ch),
rgba(255, 0, 130, 0.3) calc(81.0ch),
rgba(255, 0, 130, 0.3) calc(81.2ch),
transparent calc(81.2ch),
transparent calc(85.0ch),
rgba(255, 0, 0, 0.3) calc(85.0ch),
rgba(255, 0, 0, 0.3) calc(85.2ch),
transparent calc(85.2ch),
transparent 100%
) !important
}-
If after updating the guideline position & color value, no guidelines appear, then
- Check the "chars" value. It will be ignored if set to zero, or if it is within character width of the previous guideline (e.g. "81" and "81.2").
- Re-check the color values. No color validation is done, so any error in this setting will cause the browser to ignore the entire guideline definition.
- Width's less than 0.2 character width are not visible. The script does attempt to prevent values less than this setting.
-
For all other problems, check the development console for errors.
- Restore guides.
- Restore diff +/- markers.
- Realign & stop interference with GitHub-Dark.
- Update GitHub icon.
- Update assets.
- Guides no longer prevent text selection. Fixes issue #32.
- Fix alignment issues.
- Set guide after indicated character.
- Change license to MIT.
- Clarify option name in menu.
- Meta: update screenshots.
- Fix position accuracy; alignment is still slightly off. See issue #10.
- Add tab size option & fix paddings.
- Fix linting.
- Fix overflow of content on blame pages.
- Remove guides & monospace font from textarea. Fixes issue #9.
- No guides on non-code lines. Fixes issue #10.
- Beautify.
- Initial commit