Experiment: CSV to MMD tables with color coding

This is a quick experiment with Google Docs, CSVs, MultiMarkdown tables and CSS3 selectors. It’s really hackish, but it’s a start. I wanted to take Google Docs spreadsheet output and turn it into a clean table with color coding and my own styling. Here’s what I’ve done so far (example output here):

1. Downloaded the iOS text editor spreadsheet as a CSV
2. Opened in Numbers for minor edits
   • Added a row of :-----: alignment syntax under first (header) row
   • Removed long text (HTML tables are a pain with wrapping and overflow)
3. Exported a new CSV with changes
4. Regex magic to convert CSV to MMD table (almost automatically, still 5 minutes of hand editing)
5. Applied basic CSS3 using inline <style> tags in the Markdown
   • turn empty cells dark grey
   • highlight any cell with content (minus first column) in green
   • cells with a full-width colspan (tailored to this table, 11 columns) turn lighter grey
6. Load it up in Marked and output the results with embedded style

###Pretty pictures

The cleaned up spreadsheet in Numbers

The converted table in MultiMarkdown

(after using Fletcher’s table cleanup script)

###The CSS:

table th {
	white-space:nowrap
}
table td:nth-child(n+2) {
	background: rgb(156, 230, 144);
	font-weight:bold;
	color:rgb(95, 191, 68);
	vertical-align:middle;
}
table td:empty {
	background: #777;
}
table td[colspan="11"] {
	background: #aaa!important
}

###The hack Ruby CSV→MMD code:

#!/usr/bin/ruby

input = STDIN.read

# find quoted cells and replace commas inside quotes with placeholder
input.gsub!(/"([^,].*?)"/m) { |quoted|
	quoted.gsub(/[\n\r]*/,'').gsub(/,/,'zXzX')
}
# replace remaining commas with table divider (pipe)
input.gsub!(/,/,"| ")
# remove quotes from quoted cells
input.gsub!(/(\| |^)"(.*?)"/,"\\1\\2")
# replace placeholders with commas
input.gsub!(/zXzX/,",")

input.each { |l|
	puts "| #{l.strip} |"
}

The script takes input on STDIN, so to use it you pipe the contents of the CSV to it with cat:

cat myfile.csv | ~/scripts/csv2mmd.rb > outputfile.md

###The result:

You can view a truncated version of the output here. Please note that this comparison chart is not complete and does not include even half the apps in the spreadsheet. It’s just for testing!

You can also see the raw MMD code here. It’s straight from the conversion script but has been run through Fletcher Penney’s table cleanup script to make it readable.