DEV Community

Chris Achard
Chris Achard

Posted on

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:

Thanks for reading!

Top comments (20)

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

Yep! 😆

Collapse
 
chidioguejiofor profile image
Chidiebere Ogujeiofor • Edited

Is three a way I can make a text to wrap to new line. I find that my readers have to scroll when I show some code examples. For instance:


...

schema_pattern = "^(feat|fix|chore|perf|refactor)(\\([A-Za-z0-9\\-]{1,}\\)){0,1}: [A-Za-z][\\S ]{1,}\n\n((- [A-Za-z][\\S ]+\n)*\n){0,1}(closes ticket#\\d+)\\s*$"

...



Enter fullscreen mode Exit fullscreen mode

Is there a way I can prevent the scroll, here?

Collapse
 
thepeoplesbourgeois profile image
Josh • Edited

&gt; and &lt; ?

Collapse
 
chrisachard profile image
Chris Achard

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

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

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
 
dillionmegida profile image
Dillion Megida

Oh wow, didn't even know some of these, especially diff.
Thanks for sharing 😇

Collapse
 
kaamkiya profile image
Kaamkiya

About the <pre> and backticks, did you use HTML escape sequnces?

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

Glad to hear it!

Collapse
 
mezieiv profile image
Chimezie Innocent

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
 
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
 
efecollins profile image
Efosa Collins EVBOWE

Thanks for this, I've been wondering why mine is always white

Collapse
 
tuanhuynhvn profile image
Tuan Huynh

Is there any way to make the background white instead of black?

Collapse
 
bekbrace profile image
Bek Brace

Thank you, Chris

Collapse
 
ffex profile image
ffex

Thank you!! 😁

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

This saved my life thank you