Displaying code in your webpage



AD

How to display code

If you want to show html code in your webpage, you must convert the text to web ready text that you can use in your webpage. For example:

Screenshot of a list of HTML escape characters.

There is a Visual Studio Code extension that simply converts any text into web-ready text. Use the following instructions to install the extension. Click on the extension icon in the upper left hand side of Visual Studio Code. Search for "Escape HTML code", and install.

To Replace in Document, highlight (or select) the code to be converted. Press CTRL + Shift + p to open the command line. Type or locate "Replace Selection with Escaped HTML".The selected text will be converted. Remember, if you do not like the result, just go to Edit > Undo.




Using the HTML tag <code>

You can use the tag <code> to surround the code you are escaping. It changes the size and font for a distinctive look to code.This tag does not escape tag characters.




How to highlight blocks of code

Many times you will see blocks of code highlighted in a web page. It makes the code stand out. The code is highlighted using the CSS type selector for code. The type selector is placed between the style tags. You can see the following code placed at the top of this page. Just access the source code for this page.

code {
   background-color: #eeee;
   border: 1px solid #999;
   border: 1px solid #999;
   border-radius: 8px;
   display: block;
   padding: 20px;
}




Another useful Visual Studio Code extension: vscode-htmltagwrap

Ever get tired of typing tags, especially for bolding words? Then this extension is for you. Click on the extension icon in the upper left hand side of Visual Studio Code. Search for vscode-htmltagwrap and install. I have outlined how to use it below.

That is all there is to it.

theSurfDragon.com


Html-CSS-Win Navigation

Home Page
Visual Studio Code
Simple Webpage
Website Structure
Webpage Layout
HTML Escape
Web Hosting
FTP
Using Paint 3D
Printer Friendly