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) => { ...

Read full post

Peter Kim Frank • Aug 28 '19 • 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. 😆

Chris Achard • Aug 28 '19

Yep! 😆

Chidiebere Ogujeiofor • Dec 9 '21 • 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*$"

...

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

Josh • Aug 29 '19 • Edited

> and < ?

Chris Achard • Aug 29 '19

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

Josh • Aug 29 '19

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.

Chris Achard • Aug 29 '19

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!

Adam Crockett 🌀 • Aug 28 '19

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?

Chris Achard • Aug 28 '19

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