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 has been out a few weeks now, but I wanted to give a little special attention to the improvements that we rolled out for commenting code with keyboard shortcuts.

It’s likely no surprise to you, but code comments are different depending on what language you are in.

  <!-- I'm commented. -->
  I'm not
.site-nav {
  /* I'm commented */
  im: not;

In native HTML and CSS, what you see above is the only syntax for commenting. In JavaScript, there is a distinction between line and block commenting.

var obj = {

  // I'm a line comment.

  foo: "bar"



Having both options like that is pretty useful, and a concept that carries over into preprocessing languages SCSS and Less.

Different Key Commands for Line vs Block Comments

Not too hard to remember:

  • Line comment: cmd + / (Mac) or ctrl + / (PC)
  • Block comment: cmd + shift + / (Mac) or ctrl + shift + / (PC)

To the docs!

There are some more important things to know about. For example, if you select multiple lines but still use the line comments key command, it will use line comments on each line rather than wrap the area in a block comment.

But… rather than explain every single thing in this blog post (and how it works for each different language) let me refer you do the docs:

CodePen Docs: Code Commenting

High Five to Jake

Jake took the lead on this one.

As we were trying to talk out all the details, we kept getting ourselves lost. I enjoyed that ultimately we reached for a collaborative spreadsheet to clearly document all the situations, then made each one work one by one.

A nice bit of UX polish, from us to you 😉