DEV Community

Formatting Code for DEV Comments and Posts

Chris Achard on August 28, 2019

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) => { ...
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
 
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
 
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
 
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
 
nazanin_ashrafi profile image
Nazanin Ashrafi

This saved my life thank you

Collapse
 
ffex profile image
ffex

Thank you!! 😁

Collapse
 
bekbrace profile image
Bek Brace

Thank you, Chris