How to format a div like pre blocks?

8.2k views Asked by At

I'm trying to display some HTML files that have code samples, surrounded by codeblock tags. Is there any CSS styling that could display codeblocks as if they were pre tags? (respect newlines, respect whitespace, etc)

2

There are 2 answers

1
arunes On BEST ANSWER

Like this

div { white-space: pre; }
0
Dan H On

If you want to get pretty fancy, consider a libraries like Pygments or highlight.js that will do full syntax coloring, in addition to pretty printing of your code.

Pygments would be implemented in server-side Python; highlight.js works browser side.

OR: use a browser-based "code editor" such as Ace, which will then format/color the code... and just use the control in a read-only fashion.