Benny Sutton is 4 hire - just click here

Display HTML code on a HTML page

How do you display HTML code from a code editor as formatted text on a web page?

The wonderful prism.js works with most code languages - even CSS - turning text that could be code into fully colour formatted HTML for display inside a HTML page. It doesn't do HTML though.

The problem is of course that your browser will try to parse any HTML it comes across as  

HTML code, so reserved characters must be escaped to be displayed as a plain text. You need to go laboriously through said code and replace HTML opening tags with their encoded equivalent For example replace all < with &lt;

Here's my hack to turn HTML code into HTML display using Visual Studio

  1. Simply cut and paste your code from SOURCE view into MS Word - You will see it keeps all the colour formatting
  2. Then cut and past that back into the DESIGN view of a HTML page (must be .html)

You'll see that Word has generated HTML for you! Of course it does, Word is designed to save pages for the web!

You will see that the HTML produced is a bit messy. It styles every paragraph inline. You can streamline that by one more step. Paste it into a HTML cleaner like https://html-cleaner.com/ which removes all extraneous formatting - so your own stylesheets will format the content.

Alternatively, if you have a lot of different pages to save the to-and-fro just keep adding to your Word doc and do save as html to save the whole thing, then import that into your project.

 

VERY IMPORTANT this doesn't seem to work with the latest Visual Studio (v.18) but I always keep an older version of VS around (2017) for my production server. If you don't have, or won't install, the older version you could try this solution