code or pre element isn't working perfectly on Bootstrap - html

I am creating a landing page for myself with Twitter Bootstrap framework and I want to show some code on my landing page and that's why I am writing my code into <code></code> or <pr></pre> this elements but it's not showing. I put my code like below:
<code>
<command type="?">Click Me!</command>
</code>
or
<pre>
<command type="?">Click Me!</command>
</pre>
But, Twitter Bootstrap is only showing to me "Click Me!" word. He don't show me the whole code into the <code> or <pre> elements.
How may I fix this?

You still have to replace the < and > characters with < and >, respectively, or they will be interpreted as HTML:
<pre>
<command type="?"> Click Me! </command>
</pre>

Related

blog post not displaying using HTML

I am running a blog on blogger. I used </head> tag in my blog posts and when I published this posts, It was not showing on front end (On opening post in browser). Some more html codes when I use they just don't show in front end. When I open post to edit them again, it doesn't show those html space. Blank space is inserted at their place.
If you want to include HTML in your blog posts use the Blogger post editor in "HTML" Mode and copy & paste the code you want to include within <pre> or <code> tags.
For example
<pre>
</head>
</pre>
<code>
</head>
</code>
However you first have to escape the code (for example using tools like this one) within the pre/code tags like this in order for being correctly displayed:
<pre>
</head>
</pre>
<code>
</head>
</code>

Post HTML code in a div box without getting it affected

Right now I have posted the code into a textbox because I want the code in plain text. Now I wonder if I can put the code into a div box instead i get the same result.
Right now:
<textarea id="copytext" readonly="readonly"><p>Show the p tags in plain text</p></textarea>
Place your code between <pre> tags so that it is not interpreted by your browser. http://www.w3schools.com/tags/tag_pre.asp
<pre><img src="pic.jpg"></pre>
if you want a block of code this should be your markup:
<blockquote>
<pre>
<code>
My pre-formatted "quoted" code here.
</code>
</pre>
</blockquote>
Also take a look at this tool: https://code.google.com/p/syntaxhighlighter/
Testing 123, This shows the picture for me ????
<blockquote>
<pre>
<code>
<img src="http://lorempixel.com/200/200"/>
</code>
</pre>
</blockquote>

What are valid places to put HTML comments?

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.

Create mediawiki template with html inside

MediaWiki creates <pre> tags after parse {{Template}} with html code.
How to prevent this tags?
Example template:
<span style="color:#FF0000">{{{1}}}</span>
In wiki html page looks like:
<pre>
<span style="color:#FF0000">Some Text</span>
</pre>
In basic templates like:
My name is {{{1}}}
no problem with <pre> tags.
PS <pre> tag creates unwanted borders around elements in MediaWiki.
Bergi's solution: avoid to indent some markup (either in the template or outside at the inclusion) with one (or more) spaces.

Highlighting sections of HTML/code that is wrapped in <pre><code> tags

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/