HTML syntax highlighting for Silverstripe .ss template files in vim

David Nash silverstripe, vim, xhtml 3 Comments

By default vim opens .ss files with some other file format syntax highlighting. To enable HTML (actually XHTML) syntax highlighting on your .SS Silverstripe template files, create (or edit) your ~/.vim/filetype.vim file. Then enter this: au BufNewFile,BufRead *.ss      setf xhtml Then open a .ss file and it’ll give you nice HTML syntax highlighting. And because it’s in your home directory, it’ll keep working even after you upgrade vim.

Pixel Perfect Firefox Extension

David Nash css, xhtml Leave a Comment

When I write HTML and CSS I’ll usually create a mockup – I take a high quality JPG of the design and put it into a very simple page that shows the JPG, centered on the screen. Then in Firefox I switch back and forth between the page I’m working on and the mockup so that I can get the design pixel-perfect. Well today all that will change. I’ve discovered the Pixel Perfect Firefox Extension which allows me to overlay the mockup over what I’m designing.  You can set the opacity and quickly toggle the overlay on and off. I’m …

Remove empty LEGEND tags in Silverstripe search form

David Nash silverstripe, xhtml 3 Comments

I’m pretty obsessive about my HTML validating with no errors and no warnings. It bugs me that when I use Silverstripe’s incredibly convenient $Searchform in the template that it outputs an empty legend tag inside the fieldset. There’s an easy way to fix this: Create a templates directory inside mysite. Copy sapphire/templates/SearchForm.ss to mysite/templates/SearchForm.ss Edit your copy of the file and remove that pesky <legend></legend> line Refresh your page that uses the searchform and bathe in the warm glow of a error and warning free page! Thanks to Maksfeltrin in the Silverstripe forums for pointing this out.

Strip <span> tags from HTML in vim

David Nash vim, xhtml 4 Comments

When upgrading a website you might see source code like this: <span style=”font-family: Arial; color: #0000ff; font-size: small;”>Some text goes here</span> You’re using CSS now and all those <span> tags are ruining it. In gvim, do this search and substitute: %s/<span.\{-}>//g Then to get rid of the </span> tags, do this: :%s/<\/span>//g

1px high DIV in IE6

David Nash css, xhtml 2 Comments

Very occasionally I’ll use an empty DIV for decoration, and in CSS use height: 1px. In IE6 to make this work you need to put comments inside the DIV, otherwise it’ll display at the height of the font you’re using. <div class=”line”></div> becomes <div class=”line”><!– –></div> You don’t need any line-height fixes in the CSS. Yes, it’ll add to your markup a bit, but you should probably be explaining why you’re using meaningless, empty DIVs anyway.

Assorted Handy vim Commands, Part 1

David Nash vim, xhtml 1 Comment

To reverse the order of lines, eg 1-5 : 1,5 g/^/m0 For example, one two three four five becomes five four three two one To remove blank lines : %g/^$/d Delete all lines that don’t contain “string” : %v/string/d

Turn all links in an HTML file into ‘#’

David Nash vim, xhtml Leave a Comment

Replace all in the current file instances of: <a href=”link_to_somewhere.html”>link</a> with: <a href=”#”>link</a> :%s/\(a href=”\)\(\S\+\)\(“\)/\1#\3/g This is great if you’ve got a big HTML file that you want to demo to a client where you don’t want the links to do anything when clicked. You could also use javascript to do the same thing – just “return false” for all <a> elements on the page.