Showing/formatting code on the page

HTML & CSS
1

Hi there,

I’m making a little snippets page for myself which as some useful bots of code on.
What I am trying to do is have the code wrapped in a box so it shows as code, with the CSS/HTML tags etc still in place… basically like this post will display the below code and not actually process it.

This is what I have tried, but it’s not working.

<pre>
	<code>
	  @media screen and (min-width:960px) and (max-width:992px){
			.header-wrapper{
			display: block
			}
		}
		
		<p>paragraph text</p>
	</code>
</pre>

Could someone show me a better way of doing this?

Thanks!

2

Can you explain what you mean by “not working”?

3

You could escape the < and > like &lt; and &gt; to also show the tags.

1 Like
4

It’s not working as in it’s not displaying the actual code for the paragraph tags.

image

5

As Erik said you’ll need to encode the start and end brackets of the tags as entities.

e.g.

<pre>
	<code>
      @media screen and (min-width:960px) and (max-width:992px){
			.header-wrapper{
			display: block
			}
		}
		
		&lt;p&gt;paragraph text&lt;/p&gt;
    
	</code>
</pre>

There are a number of online converters around if you can’t be bothered to do it manually :wink:

1 Like
6

If PHP is available then there are a couple of functions which may help and they also add color highlighting:

<?php 
highlight_file('filename.html'); 

highlight_string(" @media screen and (min-width:960px) and (max-width:992px){
			.header-wrapper{
			display: block
			}
		}
		");

?>
7

Thanks for the replies. I think I will go through and escape the tags :slight_smile:

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.