DEV Community

loading...

Formatting Code for DEV Comments and Posts

Chris Achard
I'm trying to teach everything I know at chrisachard.com Instructor at egghead.io Mostly, I use JS, React, Rails, and Node
・3 min read

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:

Thanks for reading!

Discussion (15)

Collapse
peter profile image
Peter Kim Frank • Edited

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 :)

As I made my way down the post, I was wondering if we'd arrive here. Definitely a bit of a "yo dawg" Markdown situation. πŸ˜†

Collapse
chrisachard profile image
Chris Achard Author

Yep! πŸ˜†

Collapse
adam_cyclones profile image
Adam Crockett

Now I knew about some of this bit knowing the library behind it is very helpful, thank you for deep diving so I don't have to. Unless it's al wrote down somewhere, in that case, thank you for reading that so I don't have to. 🐠 Why is there no diver emoji?

Collapse
chrisachard profile image
Chris Achard Author

No problem - The ability to deep dive is a bonus of DEV being open source! There's a technical overview doc that mentions that they use rouge and redcarpet for markdown parsing: github.com/thepracticaldev/dev.to/...

Collapse
thepeoplesbourgeois profile image
Josh • Edited

&gt; and &lt; ?

Collapse
chrisachard profile image
Chris Achard Author

You got it :) I believe there are a few other ways to do it as well though; I tried about 3 before I just used that one

Collapse
thepeoplesbourgeois profile image
Josh

Boss-level debugger 😎

My original thought was the trusty rusty backslash, but that can have all kinds of unexpected parsing behaviors compared to the HTML character codes.

Although, now I wonder what subset of HTML is parsed and what subset is scrubbed, and if there are backdoors in every dev.to post 😰

... ahhh, it's probably fine.

Thread Thread
chrisachard profile image
Chris Achard Author

I actually went digging through the dev.to source after I posted this, and found that answer! Here you can see the allowed tags and allowed attributes:

github.com/thepracticaldev/dev.to/...

Neat!

Collapse
dillionmegida profile image
Dillion Megida

Oh wow, didn't even know some of these, especially diff.
Thanks for sharing πŸ˜‡

Collapse
rachelsoderberg profile image
Rachel Soderberg

You have just made my life so much easier, Chris. Thank you!!! <3

Collapse
chrisachard profile image
Chris Achard Author

Glad to hear it!

Collapse
tacianosilva profile image
Taciano Morais Silva

How to highlight commands in linux command line?

For example, color the commands: "sudo", "echo", "cd", "ls", "apt-get". And if possible, color "git", "docker", "java", "python", etc.

Collapse
geekjs profile image
Vic-Orlands

How about a react code formatter. Like I wrapped my react js with and javascript but instead it only showed the html files in web format

Collapse
bekbrace profile image
Bek Brace

Thank you, Chris

Collapse
nazanin_ashrafi profile image
Nazanin Ashrafi

This saved my life thank you