Command/Control + Shift + .

January 17, 2015

Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

This is a fairly small thing, but it's a fairly small thing that I'm pretty dang excited about. It's that keyboard command that is the title of this post. What it does is close the closest open HTML tag.

So if you have like:

<h1>The Four Tops

and your cursor is at the end and you do the command, it'll close it up.

<h1>The Four Tops</h1>

It saves a few keystrokes, which is nice. But I like using it because you get to see if your mental expectation of what tag will be closed matches what actually happens. If it doesn't, something is amiss and you can go check it out.

I use this command a ton in Sublime Text, so it's wonderful to have it here too. (You don't actually have to have the Sublime Text bindings setting on for it to work.) We actually used to attempt to do this with our own custom code, but it was complicated and really never worked quite right.

We contemplated using the Close-Tag add-on for CodeMirror, but found it a little agressive. By default, it adds the closing tag the second you open one (or can be configured to finish a closing tag when it senses you've started one). That's pretty cool actually, but we have too many users used to how things work to change something so fundamental like that. Much easier to add (fix) functionality like this. So I asked and Marijn hooked it up.

Not to get too far ahead of ourselves, but we're also working on infrastructure that will allow us to offer better customization for stuff like that for you. More details soon.