CODEWITHSUNDEEP
html
ravindUwU
ravindUwU

Reputation: 746

How would HTML code be added to a webpage?

How would one add HTML code snippets into an HTML file without them being rendered as elements on the webpage?

While this could be achieved using images, I'd prefer to have a 'code window with syntax highlighting' like the one pictured below taken from css-tricks.com;

Screenshot of an HTML code snippet, from css-tricks.com

Upvotes: 3

Views: 566

Answers (6)

sensation
sensation

Reputation: 437

Hello RavinduL and welcome to StackOverflow.

First, I would advise you to learn HTML and CSS completely before teaching others, but if you think you will learn better if you teach others in the meantime, then go ahead.

In case you want to display a syntax highlighted text on your website, I would advise you to use 'highlight.js', which is coded in JavaScript. It supports syntax-highlighting for many languages, and it won't give you the headache of creating your own function for highlighting code. It also won't mess with your HTML and/or CSS styling.

Check out the highlight.js in action!

Another JavaScript library which may come in handy is Alexis Gorbatchev's SyntaxHighlighter. It's also free and configurable, be sure to check it out.

You can also use a predefined HTML tags (the <code> and <pre> tags).

Resources: highlight.js & SyntaxHighlighter

Upvotes: 1

James Paterson
James Paterson

Reputation: 2915

You should be able to use the code tag to designate code. If not, you can use the character entity to display < and >.

Upvotes: 0

Novocaine
Novocaine

Reputation: 4786

To be able to write html snippets onto an html web page you need to switch opening and closing tags < > with &lt; and &gt;

And to give it syntax highlighting you can use googles own prettify script found Here

Upvotes: 2

STLDev
STLDev

Reputation: 6174

The problem you're running into is that characters such as less-than and greater-than are HTML entities, and will be interpreted as the beginning and end of HTML tags. And there are lots of other characters that will be misinterpreted as well.

HTML provides a mechanism to prevent this, and that is to use either "&" and the entity name, or "&#" and the entity number.

For instance, for less-than, you would use "<" rather than "<". Similarly, for greater-than you would use ">" rather than ">".

There are other HTML entities, which you can learn more about here: http://www.w3schools.com/html/html_entities.asp

Upvotes: 0

user2445977
user2445977

Reputation: 1

<div class="post-text">
    <p>I have some HTML that I would like to make it appear like the code option here</p>

    <pre><code>&lt;a href="#"&gt;test&lt;/a&gt;
    </code></pre>

    <p>How can I do it?</p>
</div>

Upvotes: 0

Matze
Matze

Reputation: 11

You'll have to escape special characters like < and >. Just replace them with their corresponding escape sequence.

Upvotes: 1

Related Questions