Stop html from being rendered inside code blocks - html

My problem is that HTML is being rendered inside code tags.
In ghost blog I have had no issues using code tags.
Except from HTML, which is actually rendered.
This example from below is actually rendered.
<pre><code>
<div>some text</div>
<input value="even this is rendered"></input>
</code></pre>
If I use 4-spaces inline it works fine.
I'm using the default style layout.
Looking at the official markdown-documentation this is supposed to work.
http://daringfireball.net/projects/markdown/syntax

<code> isn't supposed to stop HTML being rendered. It means "Present this in a way that indicates it is code" not "Don't treat this HTML as HTML".
Use character references for characters with special meaning in HTML if you want them to be displayed (&, <, etc).
The Markdown documentation says:
Within a code block, ampersands (&) and angle brackets (< and >) are automatically converted into HTML entities.
… but code block means "When the markdown source is indented by 4 characters" not "When wrapped in pre/code".

Try escaping problematic characters:
<pre><code>
<div>some text</div>
<input value="even this is rendered"></input>
</code></pre>

Related

How do I show actual HTML Code in textarea rather than rendered HTML?

I have a code that saves (html code) plus (some text) in mysql from textarea.
I then take the text from the mysql and display it under the textarea. The thing is if I save the code
<div style="color:red">Hello</div>
in mysql and then display it, I see Hello in red, but I want to see the actual
<div style="color:red">Hello</div>
to appear under the textarea. I hope you understand my problem.
so when you've grabbed the data from the database you want to actually display the html, rather than the page rendering the html?
if so just use the php function htmlentities();
You can use the xmp element, see What was the tag used for. It has been in HTML since the beginning and is supported by all browsers. Specifications frown upon it, but HTML5 CR still describes it and requires browsers to support it (though it also tells authors not to use it, but it cannot really prevent you).
Everything inside xmp is taken as such, no markup (tags or character references) is recognized there, except, for apparent reason, the end tag of the element itself, .
Otherwise xmp is rendered like pre.
When using “real XHTML”, i.e. XHTML served with an XML media type (which is rare), the special parsing rules do not apply, so xmp is treated like pre. But in “real XHTML”, you can use a CDATA section, which implies similar parsing rules. It has no special formatting, so you would probably want to wrap it inside a pre element:
<![CDATA[
This is a demo, tags will
appear literally.
<div style="color:red">Hello</div>
]]>
you can refer this ans : https://stackoverflow.com/a/16785992/3000179
If you want to do on browser level, you can follow the steps :
Replace the & character with &
Replace the < character with <
Replace the > character with >
Optionally surround your HTML sample with <pre> and/or <code>
tags.
Hope this helps.

Display CDATA as text in html

How can I display <!CDATA[ as text in an html document? I tried wrapping it in <pre> tags but that didn't work.
<! DOCTYPE html >
<html>
<body>
<div>This should show <pre><!CDATA[</pre> when the page renders</div>
</body>
</html>
Browsers do not support CDATA markers in text/html documents. Use character references instead (<, &, etc).
As others have written, you should escape “<” as <. HTML markup like pre or code does not change the way content is parsed, with “<” as markup-significant. You can use e.g. code markup here, since the content is computer code and this markup may have some advantages, but that’s a different issue. Example: <code><!CDATA[</code>.
There is a half-secret markup, however: <xmp><!CDATA[</xmp>. Within an xmp element, everything is taken literally; only the end tag of this element is recognized. Such markup is regarded as very obsolete by many, and it has been dropped from HTML specs, but it actually keeps working.

Is content within code HTML tags XSS vulnerable?

I am using Codeingiter, I see that the xss_clean() is replacing the tab characters with a single space character. This is breaking the contents that are later displayed inside <pre><code></code></pre> tags.
Can XSS attack string inside <code> HTML tag be of any problem?
If yes, is there a way to retain the tabs in such a situation?
Yes, XSS attacks within the <code> element are still a problem. To get around this, you should escape your code within the <code> block. e.g.
<pre><code><p%gt;this is an example paragraph in code</p></code></pre>
Which will display as:
<p>this is an example paragraph in code</p>

HTML <code> blocks - Should HTML tabs display inside?

Within a standard code block, should HTML appear exactly as written?
For example, if I put the following:
<code>
<script type="text/javascript">Something in javascript</script>
</code>
Should it appear exactly as above?
I assume the code button here on stackoverflow is doing something else other than just putting it in ?
Thanks!
There are certain characters that must be encoded even in the code block. My preference is converting the less than, greater than and ampersand. This handles most of the code.
To make tags appear as they are use the <pre> tags instead:
<pre>
<script type="text/javascript">Something in javascript</script>
</pre>
No. <code> isn't even block-level. It also depends on whether you mean "traditional" HTML or XHTML.

What was the <XMP> tag used for?

Does anyone remember the XMP tag?
What was it used for and why was it deprecated?
XMP and PRE differ. Content within PRE tags is formatted as follows:
Content is shown with a fixed font,
All whitespace is preserved, and
Each line break begins a new line.
If you want to include special characters such as <, > and & within PRE tags, they must be escaped so that they are not subject to special interpretation by the browser.
In contrast, content within XMP tags does not need to be escaped.
The only character sequence that cannot be included within XMP tags is the XMP end tag (</XMP>).
XMP is still supported by the browsers I have tested. You can try it with xmp.html. View the source to see the tags.
A quick Google search on W3C reveals that XMP was introduced for displaying preformatted text in HTML 3.2 and earlier. When W3C deprecated the XMP tag, it suggested using the PRE tag as a preferred alternative.
Update: http://www.w3.org/TR/REC-html32#xmp, http://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.5.2.1
XMP does some things that PRE does not support. I still depend on XMP, there is no substitute.
<xmp> is used with strapdown.js in formatting markdown notation. The name strapdown combining the terms bootstrap and markdown.
<!DOCTYPE html>
<html>
<title>Example</title>
<xmp theme="united">
## Example
- note one
- note two
- note three
</xmp>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</html>
I still use the xmp tag for debugging var_dump(); in PHP. I just can't remember to use the pre tag for some reason.
I think it doesn't really matter because if you really want to output text, you should use textarea with the readonly attribute.
See http://www.w3.org/Bugs/Public/show_bug.cgi?id=12235
For HTML5. it was, according to the HTML5 editor (comments 11 and 12), a very close call either way.
I used <textarea>, which puts the html code into a neat box and clearly defines the code as different from the text before or after.
<textarea><b>boldtext</b><textarea>
Still works to show raw html - if you use it in script, break the start tag.
var stuff='<xmp'+'>this is shown as is<br/>hello</xmp>';
document.getElementById("x").innerHTML=stuff;
<div id="x"></div>