UPDATE: This doesn’t work anymore. Sorry about that! We switched how we do syntax highlighting and the new method doesn’t offer it (for now).

NEWER UPDATE: Editable embeds have line numbers again.

If you’d like to see line numbers in the code tabs of your embedded Pens, now you can! Just add data-line-numbers="true" to the main embed element, like:

<p data-height="474" data-line-numbers="true" ...

Remember that main embed element is sometimes a <p> and sometimes a <div> depending on the default tab you choose. The end result is like this:

See the Pen %= penName %> by Katy DeCorah (@katydecorah) on CodePen

We use Prism.js for code highlighting in the embeds, because it’s so light. Prism has a plugin for line numbering and that’s what we’re using here. One caveat is that we can’t wrap lines like we normally do when using this, so you’ll see horizontal scrollbars if any line of code is longer than the width of the embed.

Someday we might try and get CodeMirror into the embeds which will allow the exact themes and behavior as in the editor, which would be cool, but for now we’re trying to stay as light/fast as possible for everyone’s benefit.

For now you’ll have to do this manually on embeds you wish to have line numbers. It’s not part of themes yet. We figured we’d get it out first and see how it goes and if it’s well-liked enough to make it into themes. The main point, we’d guess, is being able to direct people toward specific lines of code when sharing / writing about the code. If that’s indeed the case, we have some more ideas for making that better!