List all colours in a CSS file command - TextMate

23 May 2007


      I was in two minds over bothering to write this because I was shocked you
hadn't already Thomas. Looks like I chose wrong :)
However I had some spare time this afternoon and added line numbers and
made the links work on mine.
#!/usr/bin/env ruby
myFile = STDIN.read
fileName = ENV['TM_FILENAME']
hex = Regexp.new(/(#(\d|[a-f]|[A-F]){3,6})/)
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%;
    	}
a:hover {
    		background-color: #EFEFEF;
    		border: 1px solid #999;
    	}
.colourRow {
    		display: block;
    		margin-top: 5px;
    		margin-bottom: 5px;
    		width:160px;
    		margin-right: 10px;
    		float:left;
    	}
.colourRow span {
    		font-size: 60%;
    		color: #7F7F7F;
    	}
.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;
    	}
</style>
</head>
<body>'
puts "<h2>Colours used #{fileName}</h2>"
lines = myFile.split("\n")
counter = 1
lines.each do |line|
  colourArrayToTrim = line.scan(hex)
  colourArray = []
colourArrayToTrim.each do |colour|
      colourArray.push colour.shift
  end
colourArray.each do |colour|
    swatch(colour,counter)
  end
  counter+=1
end
puts "
</body>
</html>
"