[TxMt] List all colours in a CSS file command

james at vennt.net james at vennt.net
Thu May 24 12:05:12 UTC 2007 

Thanks for the regex tip Chris, worked great.

The command now displays Hex, RGB and Named colours (thanks to the bit I
copied out of the CSS language file) and I tidied some of the layout up a
bit to fit the longer colour names etc.

So here is my final version



#!/usr/bin/env ruby


myFile = STDIN.read
fileName = ENV['TM_FILENAME']
hex =
Regexp.new(/(#[0-9a-fA-F]{3,6})|(seagreen|hotpink|lawngreen|darkgreen|violet|darkred|crimson|green|sandybrown|navy|magenta|darkslategray|steelblue|silver|darkgrey|mistyrose|gray|aliceblue|blueviolet|lightpink|saddlebrown|chocolate|limegreen|lightslategray|yellowgreen|pink|lightskyblue|indigo|lightblue|floralwhite|navajowhite|mediumvioletred|honeydew|aquamarine|blue|olivedrab|palegreen|slategray|lavenderblush|wheat|moccasin|mediumturquoise|mediumspringgreen|lightcoral|mintcream|tomato|lightgrey|black|darkmagenta|dimgray|darkturquoise|midnightblue|plum|indianred|coral|lightcyan|mediumslateblue|darkcyan|darkslateblue|darkkhaki|ivory|azure|khaki|powderblue|darkgoldenrod|orangered|burlywood|turquoise|royalblue|maroon|cornsilk|antiquewhite|yellow|teal|orange|grey|darkslategrey|slateblue|seashell|darkorchid|snow|lightslategrey|cyan|greenyellow|palevioletred|goldenrod|deepskyblue|lightyellow|lightseagreen|sienna|lemonchiffon|darkviolet|paleturquoise|slategrey|skyblue|purple|mediumpurple|cadetblue|fuchsia|chartreuse|darksalmon|lightgoldenrodyellow|white|springgreen|olive|forestgreen|peachpuff|peru|dimgrey|mediumseagreen|thistle|firebrick|darkgray|mediumaquamarine|darkolivegreen|mediumblue|palegoldenrod|blanchedalmond|ghostwhite|gold|gainsboro|darkseagreen|cornflowerblue|lime|lavender|beige|orchid|mediumorchid|whitesmoke|bisque|lightgray|tan|salmon|rosybrown|red|dodgerblue|brown|aqua|oldlace|deeppink|papayawhip|lightsalmon|lightsteelblue|darkorange|darkblue|linen|lightgreen)|(rgb\([0-9]{1,3}\,[0-9]{1,3}\,[0-9]{1,3}\))/)


def swatch(colour,lineNumber)
  puts "
  <a href='txmt://open?line=#{lineNumber}' class='colourRow'>
  <div class='swatch'>
  <div style='background-color:#{colour};'></div>
  </div>
  #{colour}<br /><span>#{lineNumber}</span>
  </a>
  "
end


puts '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Colours</title>

		<style type="text/css" media="screen">
		a {
			color: #000;
			text-decoration: none;
			border: 1px solid #fff;
			padding: 2px;
			line-height: 11px;
			font-size: 90%;
		}

		h2 {
			border-bottom:1px solid #666;
			margin-bottom:0px;
			padding-bottom:5px;
			margin-top: 0px;
		}

		a:hover {
			background-color: #EFEFEF;
			border: 1px solid #999;
		}

		.colourRow {
			display: block;
			margin-top: 5px;
			margin-bottom: 5px;
			width:170px;
			margin-right: 10px;
			float:left;
		}

		.colourRow span {
			font-size: 60%;
			color: #7F7F7F;
			position:relative;
			bottom:-1px;
		}

		.swatch {
			width: 20px;
			height: 20px;
			display: block;
			border: 1px solid  #666;
			margin-right: 10px;
			float: left;
		}

		.swatch div {
			width: 18px;
			height: 18px;
			border: 1px solid #fff;
		}

		.holder {
			padding-bottom: 5px;
			float: left;
		}

	</style>

</head>

<body>'

puts "<h2>Colours used in #{fileName}</h2>
<div class='holder'>"



lines = myFile.split("\n")
counter = 1
lines.each do |line|
  colourArray = line.scan(hex)

  colourArray.each do |colour|
    swatch(colour,counter)
  end
  counter+=1
end

puts "
</div>
</body>
</html>
"

More information about the textmate mailing list