Blog coding and discussion of coding about JavaScript, PHP, CGI, general web building etc.

Monday, April 18, 2016

Display Code (html css php javascript jQuery etc) on a webpage, just like code is displayed here, in a box, syntax-highlighted

Display Code (html css php javascript jQuery etc) on a webpage, just like code is displayed here, in a box, syntax-highlighted


I'd like to display code on a web page; However I'd like it to keep its spacing AND be color coded by syntax.

Please do not respond with:

  1. Replacing the < > & " with entities such as < This is not what I need: doing this removes all my line breaks and my spacing and provides no color
  2.   This totally fails it still tries to execute the HTML and PHP

See if I copy and paste code into here, it gives me EXACTLY what i want on my site nicely color coded and with the white space maintained.

                    ?stackoverflow.com                       ?api/apps                       ?careers                       ?serverfault.com                       ?superuser.com                       ?meta                       ?area51                       ?webapps                       ?gaming                       ?ubuntu                       ?webmasters                       ?cooking                       ?game development                       ?math                       ?photography                       ?stats                       ?tex                       ?english                       ?theoretical cs                       ?programmers                       ?unix                        
style="color:#bec0cb;font-size:140%">?apple ?wordpress

What I'm looking for is a way to display code (without it executing) and have the color coded syntax just like this website does, or like Text Wrangler (the text editor) does. Often this will be the code of the whole page from doc type to /html.

I've seen color coded display of code on many developer websites so I know it's doable but any google search ends up bringing me to the billion pages on how to change font color and such in html.

I need this to work for PHP HTML at MINIMUM and preferably css javascript and jquery as well.

PS: the color coded syntax is not necessary, but keeping my format ( line breaks spacing white space etc) is absolutely necessary and with the amount of code it post is not feasible to do do manually

Answer by Mark Baker for Display Code (html css php javascript jQuery etc) on a webpage, just like code is displayed here, in a box, syntax-highlighted


Have you looked at PHP's built-in highlight_string() and highlight_file() functions?

Answer by JB Nizet for Display Code (html css php javascript jQuery etc) on a webpage, just like code is displayed here, in a box, syntax-highlighted


I use the syntax highlighter from Alex Gorbatchev (JavaScript).

See http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html for instructions. But if you need to support displaying HTML containing script elements, you'll need to fall back to the

 method, and thus escape <, > and &. 

Answer by TNC for Display Code (html css php javascript jQuery etc) on a webpage, just like code is displayed here, in a box, syntax-highlighted


See Mark's reference or Check out this previous post. Works well.

Answer by Lie Ryan for Display Code (html css php javascript jQuery etc) on a webpage, just like code is displayed here, in a box, syntax-highlighted


This is what you need to do:

  1. Replace < > & " with entities such as < You do this, then do #2 to preserve spacing. You cannot avoid escaping entities since those characters can cause invalid HTML which causes parsing errors in the browser.
  2. Use
     to preserve spacing. After you escaped those special characters,  and  will not cause the escaped HTML and PHP to get executed (unless you explicitly told PHP and HTML to execute them).

Syntax coloring is a bit more difficult, since you will need a parser that understands the language you're trying to show; even SO's syntax coloring does not always work as well as it could

Answer by samir panchal for Display Code (html css php javascript jQuery etc) on a webpage, just like code is displayed here, in a box, syntax-highlighted


you can use syntax highlighter

Download SyntaxHighlighter.

SyntaxHighlighter plugin also available for word press user.

For details read this post -


Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72

Related Posts:

0 comments:

Post a Comment

Popular Posts

Fun Page

Powered by Blogger.