[TxMt] List all colours in a CSS file command

james at vennt.net james at vennt.net
Wed May 23 11:56:05 UTC 2007 

I've made a command which will list all colours in a CSS file as a list of
swatches.

At the minute it only does Hex colours also I would like it if you could
click
colours and it would jump to them in your document but I lack the ruby
skills as I'm sure you will notice from the shoddy
"colourArrayToTrim.each" bit.

Anyway some people might find it useful
input:entire document
output:show as HTML
activation:Key cmd+shift+opt+ctrl+c (ALL modifiers + C, to show ALL
colours ;) )
scope: source.css
Code as follows:


#!/usr/bin/env ruby

file = STDIN.read
fileName = ENV['TM_FILENAME']


hex = Regexp.new(/(#(\d|[a-f]|[A-F]){3,6})/)


colourArrayToTrim = file.scan(hex)
colourArray = []
colourArrayToTrim.each { |colour|
    colourArray.push colour.shift
}

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;
                        line-height: 22px;
                        border: 1px solid #fff;
                        padding: 2px;
                }

                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;
                }

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


colourArray.each { |colour|
  puts "
  <a href='' class='colourRow'>
  <div class='swatch'>
  <div style='background-color:#{colour};'></div>
  </div>
  #{colour}
  </a>
  "
}

puts "
</body>
</html>
"

More information about the textmate mailing list