Formatting Code for DEV Comments and Posts
Tags: beginners, discuss, todayilearned, javascript
Published: 2019-08-28 12:52:02

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

Here's an example:

```javascript
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:

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


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:


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

And now we have:


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

Hooray!

## A few notable supported lexers

DEV uses [rouge-ruby](https://github.com/rouge-ruby/rouge) to do syntax highlighting, and so we can check those docs for a [complete list of supported languages](https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers)

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

```jsx
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:

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

Gives us:

```diff
+ 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:

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

and that does work:

```javascript
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?

<pre>```javascript
console.log("WAT")
```</pre>

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>&lt;pre&gt;```javascript
console.log("WAT")
```&lt;/pre&gt;</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!


&nbsp; 

**Like this post?**
You can find more by:

- Following me on twitter: [@chrisachard](https://twitter.com/chrisachard)
- Joining the newsletter: [chrisachard.com](https://chrisachard.com/)

Thanks for reading!