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.

We used to kinda “fake” Stylus support around here. We offered it as a preprocessor and it worked great that way, but the syntax highlighting for it wasn’t quite right. The indentation behavior wasn’t quite right. And one thing that people noticed a lot, was that Emmet didn’t work quite right in that mode either.

Cory Simmons brought this to our attention a few times. He even dug through the Emmet source and found that Emmet does indeed handle Stylus as a mode. The trouble on our end was that we were faking Stylus support by setting CodeMirror into SCSS mode, which was the closest we found to make it behave about right.

Fortunately, CodeMirror started supporting Stylus, so now we made all the changes necessary to use that mode properly throughout the app. That means proper syntax highlighting, indentation, Emmet, everything. And not just in the editor! This propagates everywhere on CodePen. Embeds will syntax highlight it properly, as will the blogs, and everything like that.

Yay for proper Stylus support!