GitHub code guides

A userscript that allows you to add one or more vertical guidelines to the code

• The userscript adds CSS to use a monospace font in all comment textareas.
• Code will also include these guidelines.
• 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.
• Click this link to install from GitHub, or install from GreasyFork.

Screenshot

Customization

Guidelines

• Guidelines are set using a background linear gradient set using the ch unit, the width of the font's zero glyph (see browser support).
• Because the ch unit 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 add 1ch and then another 0.1ch to give the guide a tiny bit of white space to the left.
  • The minimum width of the guideline is 0.2ch because if any less, the guideline is not visible.
  • See the example section below to see that a guideline set to 80ch with a 0.2ch width is converted into a background linear gradient definition with stops at 81.1ch and 83.1ch.
• I know the following method of adding guides isn't great, but it's a quick and dirty method to

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.

  

Font

• 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.

Examples

Default guideline

[{
  "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)

background: linear-gradient(
  to right,
  transparent 0%,
  transparent 81.1ch, rgba(0, 0, 0, .3) 81.1ch, rgba(0, 0, 0, .3) 81.3ch, transparent 81.3ch,
  transparent 100%
) !important;

Two guidelines

/* 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)

background: linear-gradient(
  to right,
  transparent 0%,
  transparent 81.1ch, rgba(255, 130, 0, .3) 81.1ch, rgba(255, 130, 0, .3) 81.3ch, transparent 81.3ch,
  transparent 85.1ch, rgba(255, 0,   0, .3) 85.1ch, rgba(255, 0,   0, .3) 85.3ch, transparent 85.3ch,
  transparent 100%
) !important;

Troubleshooting

• 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. "80" and "80.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.

Change Log

Version 1.0.1 (9/12/2016)

• Beautify.

Version 1.0.0 (8/27/2016)

• Initial commit