pre | 易学教程

CSS code highlighter - margin in pre code tag

阅读更多关于 CSS code highlighter - margin in pre code tag

Please look at this fiddle: Here What I am looking for is a way to remove that extra space at top (the one between black circular 1 and top edge of pre tag) in first example and make it look like second one The first example has some extra space above it (except the margin from strong elements), and I know that its because of the extra new-line after <pre><code> I didn't wanted to remove that extra newline as removing it makes the code look really unreadable, so I added this pre > code > strong:first-of-type { margin-top: 10px; } I thought it'll work but I forgot that I might have multiple

Indent code on a web page like in a code editor?

阅读更多关于 Indent code on a web page like in a code editor?

问题 Is it possible to wrap indented code on a web page the way it's done in a code editor? See the screenshot comparison below to better understand what I mean: pre-wrap on a web page: Wrapping of indented lines in a code editor: What I am implying is that the indented lines maintain indentation even after wrapping. This doesn't seem to happen on web pages. Is there a CSS property that does this? (JavaScript would be fine too.) NOTE: I am not talking about code highlighting here. It's about

code inside pre goes in one line on IE8

阅读更多关于 code inside pre goes in one line on IE8

I'm trying to take the value from a textarea and put it inside a pre tag , and it works ok on chrome and mozilla but on IE8 the entire content stays on one line in the pre tag jsbin link: http://jsbin.com/uwunug/4/edit this is the whole thing: <html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> </head> <body> <script type='text/javascript'> $(function(){ $('#b1').click(function(){ x = $('textarea').val(); $('#tt').html(htmlEscape(x)); }); }); function htmlEscape(str) { return String(str) .replace(/&/g, '&') .replace(/"/g,

How are nested tags in html translated by web browsers and how does order of nesting tags in matter?

阅读更多关于 How are nested tags in html translated by web browsers and how does order of nesting tags in matter?

In html suppose I have two tags in hand <code> and <pre> and I want to write preformatted code then does the ordering of these tags matter? E.g. Are the following equivalent? <!DOCTYPE html> <html> <body> <p>Code example:</p> <pre><code>var person = { firstName:"John2", lastName:"Doe" }</code></pre> </body> </html> Now I nest <pre> inside the <code> tag, <!DOCTYPE html> <html> <body> <p>Code example:</p> <code><pre>var person = { firstName:"John2", lastName:"Doe" }</pre></code> </body> </html> Would there be any technical difference between the above two approaches? Addendum: I also don't

Angular 4 Output Complete HTML Syntax code in HTML as raw text

阅读更多关于 Angular 4 Output Complete HTML Syntax code in HTML as raw text

I have scoured the possible answers and none of them work. All the innerHTML and PRE tag examples are fine with code or text, but NOT with HTML. Here is EXACTLY what I want to put into a variable: <div [ngStyle]="{'display':'flex', 'flex-direction':'column', 'width': '100vw', 'height': '100vh'}"> <top-header> <a class="topHeaderItem" (click)="goToHome()">Home</a> <a class="topHeaderItem" (click)="gotoTOC()">Contents</a> </top-header> AND THAT is precisely what I want to show up on the screen - every single character because it is a tutorial example. Here's my agony. My HTML: 1 <div [innerHTML]

Is it possible to use an <a> tag within a <pre> tag?

阅读更多关于 Is it possible to use an tag within a tag?

Im working with some legacy code that generates a given message on a webpage but surrounds it with a <pre> tag - I was hoping to put a link (anchor tags) within it like this: <pre>User created successfully - <a href='/View/User/17'>click here</a> to view the users profile</pre> But I think because its a <pre> tag it ignores tags within it. Is there any way around this? APOLOGIES Im really sorry to have wasted everyone's time - the reason why it was happening was due to the fact that I was using ModelState.AddModelError (in ASP.NET MVC) to set the error message, which automatically HTML encodes

How to make another tag behave exactly like the pre tag using CSS?

阅读更多关于 How to make another tag behave exactly like the pre tag using CSS?

I want <code> tags to behave like <pre> tags. But the problem is that I get a line break at the beginning of the block. How do I get rid of that line break? This shows what I mean ... http://jsfiddle.net/6NmPN/ Sander Marechal This appears to be a browser bug. See e.g. this page . SGML (and thus HTML) says that the browser needs to remove a newline immediately following an opening tag, or immediately preceding a closing tag. But it appears that most browsers (note: not all) only adhere to this requirement on the <pre> tag and not on other tags such as the <code> tag. So, it appears there's not

Using <pre> and <code> tags to display a javascript script

阅读更多关于 Using and tags to display a javascript script

I'm experimenting with the < pre> and < code> tags in html 5 as I would like to include some code snippets on my website. I'm using the page below as a test page but it is not displaying anything. Any reason why? <body> <div style="color:#000000"> <pre> <code> <script type="text/javascript"> $('#inputField').hide(); </script> </code> </pre> </div> </body> It was my understanding that using these new tags would negate any code that they contain within however this does not appear to be the case. Cheers, J These tags are only for "decorational" purposes. Code within will still be executed. If

Is it possible to make any CSS element behave like <pre>

阅读更多关于 Is it possible to make any CSS element behave like

问题 I am loading some content inside an iframe. I want this content to behave as-if it was inside a <pre> tag - namely for it to respect line breaks. I am using javascript to set the style of the body element of this iframe. I am wondering if it would be possible to set a particular style that will cause the body of this iframe to act like it's inside <pre/> . 回答1: you can find the default setting or how they're suppose to be at http://www.w3.org/TR/CSS2/sample.html just apply the same style to

Indent code on a web page like in a code editor?

阅读更多关于 Indent code on a web page like in a code editor?

Is it possible to wrap indented code on a web page the way it's done in a code editor? See the screenshot comparison below to better understand what I mean: pre-wrap on a web page: Wrapping of indented lines in a code editor: What I am implying is that the indented lines maintain indentation even after wrapping. This doesn't seem to happen on web pages. Is there a CSS property that does this? (JavaScript would be fine too.) NOTE: I am not talking about code highlighting here. It's about indentation of wrapped lines. If this matters — this is how I am showing code blocks on my web pages: <pre>