How to Display Formatted Code in Webpage

How to display formatted code in webpage

You have quite a few options here, but I would recommend against using a JavaScript formatter. If a user has scripts disabled, you still want the code to look good.

If you are using Visual Studio, the Productivity Power Tools add-in has a "copy HTML" option:
http://blogs.msdn.com/b/kirillosenkov/archive/2010/06/07/copy-code-in-html-format-with-visual-studio-2010.aspx

Jon Skeet provides a code formatter for public use:
http://csharpindepth.com/CodeFormatterTool.aspx

If you are using PHP, GeSHi is a good server-side option:
http://qbnz.com/highlighter/

I believe that stack-overflow uses google-code-prettify:
http://code.google.com/p/google-code-prettify/

SyntaxHighlighter is another good client-side solution:
http://alexgorbatchev.com/SyntaxHighlighter/

How to display formatted javascript code in webpage

Although this question is not about JavaScript coding, I am gonna answer it.
The highlighting you are looking for is called 'syntax highlighting'.
Here are my recommended JS libraries for easy syntax highlighting:-

highlight.JS
Prism.JS
Prettify JS

Hope I helped :-)

how do i display c# source code on a web page

Yes it's all done via CSS. Here is a blog post that should help you.

How to display html code in a html page in a formatted manner

The most vanilla way to do this and have HTML show up as actual content on your webpage is by wrapping you HTML markup you want to display inside of ' <pre> ' tags.

Then you would need to use HTML entities to show the special characters you need, an open bracket is

and a closing bracket is

You can also use a plug-in to help aid in making your code look nice, like for syntax highlighting and more. A pretty nice javascript plug-in can be found here http://prismjs.com/

How to display source code with indent in a web page? HTML? CSS?

The <pre> element (using <code> elements with appropriate class names to mark up the parts you want to syntax highlight)

<pre><code class="javascript"><code class="keyword">function</code> <code class="name">foo</code>()…

How to display raw HTML code on an HTML page

is there a tag for don't render HTML until you hit the closing tag?

No, there is not. In HTML proper, there’s no way short of escaping some characters:

& as &
< as <

(Incidentally, there is no need to escape > but people often do it for reasons of symmetry.)

And of course you should surround the resulting, escaped HTML code within <pre><code>…</code></pre> to (a) preserve whitespace and line breaks, and (b) mark it up as a code element.

All other solutions, such as wrapping your code into a <textarea> or the (deprecated) <xmp> element, will break.¹

XHTML that is declared to the browser as XML (via the HTTP Content-Type header! — merely setting a DOCTYPE is not enough) could alternatively use a CDATA section:

<![CDATA[Your <code> here]]>

But this only works in XML, not in HTML, and even this isn’t a foolproof solution, since the code mustn’t contain the closing delimiter ]]>. So even in XML the simplest, most robust solution is via escaping.

¹ Case in point:

textarea {border: none; width: 100%;}

<textarea readonly="readonly">
  <p>Computer <textarea>says</textarea> <span>no.</span>
</textarea>

<xmp>
  Computer <xmp>says</xmp> <span>no.</span>
</xmp>

nicely formatted python code in html files

Update:
I just discovered highlightjs.org, which supports over 189 languages and 91 styles, and way easier to use. There is a code sample below:

<head>
  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
  <pre><code class="python">def fib(n):
  a, b = 0, 1
    while a < n:
      print(a, end=' ')
      a, b = b, a+b
      print()
  fib(1000)</code></pre>
</body>

How can I display and format HTML code within the page?

Is this what you mean?

<textarea><script id="ff">gdgdgs</script></textarea>

Look up HTML entities.

Formatting for displaying source code on a web page

You could make a separate <pre> tag for the line numbers, and use float: left to make it adjacent to the <pre> with the source.

EDIT: Demo

2^nd EDIT: Demo with full background

How to Display Formatted Code in Webpage