What's the easiest way to style code and pre content?

[nixnerd]

I need to embed some code snippets, which seems easy enough… except for the fact that I’ve never done it. The simple problem of escaping HTML is what is eluding me.

I’m taking a look at Prism but from what I can tell it only handles the syntax highlighting? Or does it give the whole block of code inside the <code> tag the ability to escape?

One thing is for sure… I KNOW that people don’t do this by using a bung of escape characters. That would be arduous.

So what’s the easiest way to get HTML to NOT render as HTML… if that makes sense.

Is there an easy way to include a markdown doc with PHP or something?

Show me the way.

[__]

The simple problem of escaping HTML is what is eluding me.

Is this coming from the server? or do you need a client-side method?

PHP:

echo htmlspecialchars( $yourCodeSnippet );

JS:

var txt = document.createTextNode( yourCodeSnippet );
yourDOMElement.appendChild( txt );

[nixnerd]

@TheDoc the reason yours works is because it’s not HTML. The browser makes no attempt to render it AS HTML. It just sees its in a <code> block and leaves it alone. But, if you put HTML inside one… it doesn’t work for OBVIOUS reasons. I’m trying to essentially keep HTML code as plain text in an HTML document.

Is this coming from the server? or do you need a client-side method?

Actually I was hoping there was an even easier method if possible but I guess there is not. I’m probably going to put this on a GitHub page and they don’t allow server-side scripts. So… I’ll probably have to go the JS route.

[nixnerd]

This is a stupid question for two reasons:

A: The title sucks. I should have specified that I want to put HTML inside <code> tags. I’m sure I’d have no problem with any other language.

B. There is no magical way to make HTML NOT BE HTML inside a browser. It just doesn’t work. It doesn’t matter how it gets to the browser… PHP, JS, Python, etc… when it gets there… it’s still just HTML. Therefore, it will never work.

The only way to do this is to use escape characters like unicode or something for < and >.

[nixnerd]

That’s kind of what I’m wondering about. I think Prism just highlights syntax… which is AWESOME… don’t get me wrong. But I don’t think it gives you an easy way to escape HTML snippets from HTML.

This will probably be the tool I use.

[Author]

Posts