-
-
Notifications
You must be signed in to change notification settings - Fork 169
GitHub code colors
Rob Garrison edited this page Jun 11, 2016
·
54 revisions
GitHub-code-colors | GitHub-custom-hotkeys | GitHub-image-preview | GitHub-issue-comments | GitHub-issue-counts | GitHub-issue-highlighter | GitHub-remove-diff-signs | GitHub-table-of-contents | GitHub-title-notification | GitHub-toggle-wiki-sidebar | Gist-to-dabblet
A userscript that adds a color swatch next to the code color definition
- It works in comment previews and code pages.
- Supports hex, rgb, rgba, hsl, hsla and all named colors.
- Additional support for colors set inside strings (e.g. javascript or canvas).
- It does not interfere if you copy & paste the code.
- Click this link to install from GitHub, or install from GreasyFork.
Test these examples once the userscript is installed
.style {
background: #123456;
color: rgb( 255,128,64);
border-left: 1px hsla(65, 100%, 50%, 1) solid;
border-right-color: maroon;
box-shadow: 3px 3px hsl( 128, 30%, 50% );
text-shadow: 2px 5px rgba(255, 0, 183,0.5);
}
// code slightly modified from the source:
// https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#A_globalAlpha_example
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
// draw background
ctx.fillStyle = 'gold';
ctx.fillRect(0,0,75,75);
ctx.fillStyle = '#6C0';
ctx.fillRect(75,0,75,75);
ctx.fillStyle = '#09F';
ctx.fillRect(0,75,75,75);
ctx.fillStyle = 'hsl(12, 100%, 50%)';
ctx.fillRect(75,75,75,75);
ctx.fillStyle = 'rgba(255, 255, 255, 1)';
// set transparency value
ctx.globalAlpha = 0.2;
// Draw semi transparent circles
for (i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
ctx.fill();
}
}
draw();
- Support unix style hex colors (e.g.
0x9988aa
). - Support colors inside strings.
- Cache regex in loop.
- Moved code to GitHub-userscripts
- Remove flag preventing updates after ajax load.
- Include named colors.
- Add userscript meta data
- Initial commit