I am only concerned about HTML5 in this question.
This does not seem to work:
<code><<!-- test -->span class="otherCode">Bar</span></code>
( http://jsfiddle.net/dYSeK/ )
However, this works for me when I have long URLs that I want to wrap in source code.
<div>
<a href="https://www.google.co.in/search?q=test">https://<!--
-->www.google.co.in/search?q=test</a>
</div>
( http://jsfiddle.net/wMGdk/ )
What are all the valid places in an HTML code where I can place HTML comments?
You can place comments between any tag, but not inside of a tag declaration.
So, this is correct:
<code><!-- test --><span class="otherCode">Bar</span></code>
...and here's what it looks like properly indented (which is why it makes sense):
<code>
<!-- test -->
<span class="otherCode">Bar</span>
</code>
You can place comments on the header and body section.
In your example try this:
<code><!-- test -->span class="otherCode">Bar</span></code
I just removed a less than sign.
Related
What I am trying to do:
I am attempting to create a web page with Angular2 which shows HTML on the screen in much the same way many websites do such as stackoverflow, css-tricks, and and w3schools (to name a few). I would like to be able to copy the code and paste it somewhere else after its shown on screen.
What I know:
I have come to realize that it will probably be necessary to convert all of my opening tags ( i.e., < ) to < and to convert all of my closing tags ( i.e., > ) to >, however I am still not sure what the best way to interpolate some variables into the template.
For example, I have this in my template file:
<div>{{myTitle}}</div>
<div><p>{{mySubTitle}}</p></div>
<div>
<ul>
<li>{{item1}}</li>
<li>{{item2}}</li>
<li>{{item3}}</li>
</ul>
</div>
What I want to see (and be able to copy) in the browser:
<div>This is my title</div>
<div><p>This is my subtitle</p></div>
<div>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Durian</li>
</ul>
</div>
Stack overflow makes this really easy and nice to accomplish by letting you highlight the code you want to display on screen and clicking the {} button in the editor. However, when I try using the <pre> and <code> tags in my Angular2 app, I do not get the same result, I cannot see the actual HTML elements like <div> and <li>.
Instead what I see is:
{{myTitle}}
{{mySubTitle}}
{{item1}}
{{item2}}
{{item3}}
I have used handlebarsjs in the past and am familiar with that library but I was under the impression that using Angular2 would eliminate the need for handlebarsjs. Does anyone know how to accomplish what I am trying to do in Angular2 without handlebarsjs?
For < and > you'll probably need to use < and >.
For the braces in template expressions you may want to use ngNonBindable directive.
<div ngNonBindable> {{myTitle}} </div>
Use <pre> or <code> for HTML to become rendered verbatim.
<pre ngNonBindable>
<div>{{'{{'}}myTitle{{'}}'}}</div>
<div><p>{{'{{'}}mySubTitle{{'{{'}}</p></div>
<div>
<ul>
<li>{{'{{'}}item1{{'{{'}}</li>
<li>{{'{{'}}item2{{'{{'}}</li>
<li>{{'{{'}}item3{{'{{'}}</li>
</ul>
</div>
</pre>
You need to escape { and } (for example like shown above)
How do you write <p></p> so that it can be displayed as text in an HTML page, rather than be interpreted as HTML (which would give an empty paragraph).
If you want to show the in the view,
Because, when you type that inside html element, it may be getting it as the html element itself.
if your purpose is showing that in the view just try this.
<p> </p>
Check this snippet :
<p> </p>
you can do it with using span
<span> < </span> <span>p</span> > <span> < </span> / <span>p</span><span> > </span>
or you can do below like this
<p> </p>
A P tag should print out text on your site no matter what. However, on most occasions you will need to refresh (F5) your page in order for it to take effect. Furthermore, if you got anything on your site that could be covering it up, try removing it just to see whether another element is "eating it up" or not. For example, try removing a banner image if thats something you got, or a navbar.
Usage for P, just in case:
<p> Text goes here </p>
Use Html entities to display the reserved html symbol
HTML Entities
this is what you mean? sorry if i understand wrongly but your description is very short.
View the source of this page. It managed it!
<p><\p>
and the answer was <p><\p>
I am creating an online tutorial and I'm displaying the html code by wrapping it in the <pre><code> tags. I would like to be able to highlight certain sections of the code. Is there a way to do that when the html is wrapped in the the <pre><code> tags?
<div data-role="page">
<h1>Hello</h1>
</div>
I would like to be able to highlight the "page" value of the data-role attribute. I tried to surround the "page" code with a span tag and style it, but the span tag showed up in the code. I also tried to use < and $gt; thinking maybe that would escape the < > around the span tags. It did, but it showed up in the code.
Again, I'm trying to display the code (without screenshots) with certain sections of the code highlighted with yellow.
You have to escape everything but the tag. I used <mark> since it seems more semantically correct:
<pre><code><div <mark>data-role="page"</mark>>
<h1>Hello</h1>
</div></code></pre>
Example http://jsfiddle.net/MFzsS/1/
I need to include some codes in my html document
I've tried <pre> tag, but that didn't help.
How do I get this code into a document like text?
Thanks
Short Answer.
Encode your code using an online HTML Encoder and then put it inside pre
<pre>
<%--your encoded code goes here--%>
</pre>
Long Answer.
The above will only help you to show your code. If you want proper highlighting for your code, Try something like SyntaxHighlighter
Link: How to use SyntaxHighlighter.
You have to use html entities. Example:
<div>
Some Stuff
</div>
should be
<div>
Some Stuff
</div>
and it will render as the first one
You can use <pre> tag. Each time you insert any texts within the <pre> tag it wont get parsed as html document. One caveat though, if you try to put an opening HTML tag inside the pre tag, you have to do it like this:
<pre>
<TEST>
TEST!!
</TEST>
</pre>
Use the xmp tag. It is easier and quicker than using an HTML encoder. Example:
<h1>This is a heading.</h1>
<p>This is a pharagraph</p>
<xmp>
<h1>This is a heading.</h1>
<p>This is a pharagraph</p>
</xmp>
You can use a combination of the <pre> and <code> tags. The <pre> tag retains the formatting , and the <code> tag outputs in monospaced font. Wrap the <code> tag in <pre> tag, and paste whatever block of code in the <code> elements body. This will output like the following:
<pre>
<code>
function(){
var myVar = "This is code";
return myVar;
}
</code>
</pre>
Some people might crucify me not escaping my code. But this worked for me.
CSS
.tag:before{
content: '<'
}
.tag:after{
content: '>'
}
HTML
<pre>
<span class="tag">tag</span>
</pre>
<!--Instead of having to escaping all the character-->
<tag> </tag>
<!--Kinda interested to see why this is bad. I understand that not escaping code can be dangerous b/c of SQL injections and all sort of BS but why is this not a viable option-->
Use
encode
Example:
<br> -> encoded -> <br>
use <br> in your text
same answer as Ibu but maybe you want a fast way to encode your tags.
To not escape any characters at all, you can use a textarea:
textarea {
font-family: inherit;
font-size: inherit;
border: none;
background-color: transparent;
resize: none;
outline: none;
}
<div>In order to show a bullet point in html use the li tags:</div>
<div>
<textarea readonly><li>Hello</li></textarea>
</div>
<div>And this is what it will look like:</div>
<li>Hello</li>
Run the snippet and notice the <li> and </li> tags render verbatim rather than being converted to a bullet.
Now why do we need the CSS and the extra HTML tags and attributes?
The CSS removes all the styling from textarea since the textarea will typically include styling for borders, resize gripper, and will use "input" style fonts. The textarea tag needs the "readonly" attribute so users can't edit it. The extra div tag around the textarea makes the textarea insert more correctly into the document flow.
It has some extra steps and it changes the DOM considerably but if you really need to show text strictly without escaping any characters at all for whatever reason.
I guess you just want to display a piece of code so you can just use https://highlightjs.org/
include this in your web page:
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release#11.6.0/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release#11.6.0/build/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
then add the <pre><code> tags to wrap your escaped piece of code
you can use https://www.freeformatter.com/html-escape.html
<pre>
<code class="language-html">
<h1>this is my HTML code</h1>
</code>
</pre>
or for CSS code
<pre>
<code class="language-css">
input { caret-color: red;}
</code>
</pre>
doc here https://highlightjs.org/usage/
The text in my source code is formatted properly, but when it shows up in the browser all the formatting disappears. Is there a tag I could add to the paragraph tag to make the text properly format?
you could use the <pre> and </pre> tags to preserve formatting instead of the <p> tag
The <pre> tag sounds like what you need.
<div style="white-space:pre">
hereIsSomeSourceCode();
if (blah == 3)
doSomething();
</div>