Formatting Code for DEV Comments and Posts

Have you ever wondered how to get the nice code formatting in comments and posts on dev.to?

Here's an example:

const myMethod = (a, b) => {
   return a + b
}

The trick is that all DEV comments and posts accept markdown! So we can use the markdown code syntax highlighting method, of wrapping our code in three backticks, like this:

```
const myMethod = (a, b) => {
   return a + b
}
```

However, that only gets us halfway there. That will output this:

const myMethod = (a, b) => {
   return a + b
}

To get the syntax highlighting, we also need to specify what language we're writing after the backticks. So in this case, that's javascript:

```javascript
const myMethod = (a, b) => {
   return a + b
}
```

And now we have:

const myMethod = (a, b) => {
   return a + b
}

Hooray!

A few notable supported lexers

DEV uses rouge-ruby to do syntax highlighting, and so we can check those docs for a complete list of supported languages

There are a couple of interesting lexers on that list, like jsx (which is different than javascript):

const myVariable = "abc"
return <p>{myVariable}</p>

And diff, which will color each line red, green, or white, if there is a -, +, or space as the first character:

```diff
+ const newMethodName = (a, b) => {
- const myMethod = (a, b) => {
    return a + b
 }
```

Gives us:

+ const newMethodName = (a, b) => {
- const myMethod = (a, b) => {
    return a + b
 }

Things I couldn't figure out

There were a few things I wanted to do that I couldn't figure out - so if anyone knows how to make these happen, I'm all ears!

1. Highlight certain lines

Some markdown processors let you add line numbers to highlight to code blocks; but as far as I can tell, rouge doesn't have that ability by default.

2. Adding extra styles

When I couldn't get line highlighting to work, I thought I'd try adding my own css styles to the markdown to make that happen - but I couldn't figure out how to get that to work either. I believe rouge strips out all style and other attributes from the markdown before rendering.

3. Line numbers

There appears to be no way to get line numbers to show up. The only real way I could figure out how to do it is to add them straight to your code as the first character in the line, like this:

```javascript
1 const myMethod = (a, b) => {
2    return a + b
3 }
```

and that does work:

1 const myMethod = (a, b) => {
2    return a + b
3 }

but it does add an extra step.

How I showed the backticks throughout this post

Ok, so if three backticks automatically starts a codeblock - then how could I show them throughout this post like this?

```javascript
console.log("WAT")
```

The trick is to first wrap them in a <pre> HTML tag - which will then just render whatever is inside as a block itself. So that looks like this:

<pre>

```javascript
console.log("WAT")
```

</pre>

Now here's something to ponder... how did I get both <pre> and the backticks to show up in that block? It's not just as easy as wrapping it in another <pre>... go ahead - try it :)

🤯

Hope that helps!

Like this post?
You can find more by:

• Following me on twitter: @chrisachard
• Joining the newsletter: chrisachard.com

Thanks for reading!