I'm writing a app in Polymer (and I have the same issue with custom angular directives).
For HTML elements like div, span, etc the indentation and highlighting works fine in Vim.
For custom directives/elements like <paper-tabs> it does not. Indentation leaves them all on the same line, and highlighting is broken:
How can I make vim take all elements at the beginning of a <elementname attribute="value"> and treat them like a normal HTML element - like <div> for example.
I use https://github.com/othree/html5.vim.git with Pathogen. Doesn't help too much with indentation, but highlighting works correctly.
Related
I have a text like this
Html is a Webbased language. For styling the webpage we have to use
the css. For this we have to write the css and include those files.
My expected out put like this:
Html is a Webbased language.
For styling the webpage we have to use the css.
For this we have to write the css and include those files.
HTML ignores whitespace like newlines by default. You can handle it with CSS using the white space property.
div {
white-space: pre-line;
}
This will tell the browser to preserve line endings in divs.
EDIT
But if your text does not have newlines after the full stops, you either have to do this with JavaScript as Hashem Qolami pointed out, or serverside using whatever language you have there.
See String.prototype.replace() for how to do this client side.
The correct way to do this would be to use a list. Here's why:
HTML comes with it's own styling provided by H1-H6, p, strong, ul, ol etc. CSS merely adds visual styling.
You're obviously not breaking these lines for "the heck of it".
The output you desire is structured like a list.
The output would be read correctly regardless of the availability of visual styling (css) ex. screen readers etc.
Simple remove the list styling ex.
list-style-type: none;
The answer to your question is not "This can't be done", but you're approaching the problem from the wrong angle. This is not a CSS issue, but a problem with your markup.
Either use pre and make the text have actual line breaks after the periods
<pre>Html is a Webbased language.
For styling the webpage we have to use the css.
For this we have to write the css and include those files.</pre>
Or add html breaks with the <br> element
Html is a Webbased language.<br/> For styling the webpage we have to use the css.<br/> For this we have to write the css and include those files.
This is a old question but people here says it's impossible in html/css etc and no one has contributed with the most simple answer.
Yes, it is possible. You first need to specify that there should be a new line in the string by using "\n".
Then as Jørgen R answered:
"HTML ignores whitespace like newlines by default. You can handle it with CSS using the white space property."
So to answer the question.
Change the string to the following:
Html is a Webbased language. \n For styling the webpage we have to use the css. \n For this we have to write the css and include those files.
and add to your css:
.div{
white-space: pre-line;
}
Not doable in CSS. There is no selector that allows you to select a portion of the text. You'll have to add the line breaks "manually" in javascript.
Ok, this is a really strange case, I've got a page where I'm styling a "custom" tag.
<comment>This is a comment</comment>
In production, I output a simple style in the html template so it doesn't show up:
<style type="text/css">
comment {display:none;}
</style>
The strange thing is that if I edit the <style> node in Chrome's dev tools and add something insignificant, like one space ... it works all of a sudden. Here's a picture of the comment node's style when the page first loads:
And then this is after I add one space to the style element
Any thoughts on what might be going on?
Make sure to register your custom element and separate it with a dash (-):
document.registerElement('x-comment');
Your element must contain a dash, otherwise the browser won't be able to recognize it as a custom element.
From the specs:
The custom element type identifies a custom element interface and is a
sequence of characters that must match the NCName production, must
contain a U+002D HYPHEN-MINUS character, and must not contain any
uppercase ASCII letters. [...]
I just wonder why should I use "class=" identificator instead of my own "tag"()?
Class example
<span class="red"> Hello there! (using class)</span>
.red {color: red;}
Tag example
<div id="reddiv">
<red>Hello, there (using own tag)</red>
</div>
#reddiv red {color: red;}
Its much more easier for me to use my own tags, since its faster to write.
Can you please tell me if doing it in first/second way has any negative/possitive sides?
While this may work in most browsers, your HTML then loses context. When an application like a search engine (or screen readers or anything else that looks at the source) parses your document, what is it to make of a tag named 'red' or 'purple' or 'job'? It won't have context, so you'll lose out. HTML uses a set of predefined tags that have meaning, you can venture out of it but you'll lose the advantage of everyone instantly understanding (all or part) of your document.
If this document is part of a data transfer framework and not on the public web, you should look at XML.
There are many advantages of using class.
First of all, with class, we use css styles which gives a lot more configuration options than simple HTML tags.
We give all the styles and formatting at one olace and just call the class everywhere we want to apply those, which in big projects like ERP, makes a big difference in code size.
The css style is more compatible with latest versions of browsers and a lot of old HTML formatting and style tags are deprecated in latest versions of HTML.
HTML tags behave differently under different browsers and different document modes. Where css will give same result everywhere.
The css classes can be applied to all the relevant tags on page at once just by defining it somewhere at the top of page.
You should also not forget that predefined tags have a lot of default properties and your custom tags none. So you would need to define everthing over again for all elements apart from span.
Also, you can have more than one class on an element, so <span class="red bold">Red</span> is possible.
You can remove, change and swap between classes to change dynamical the element style or behavior, what you can't do with tags.
Tag is element that needs class to set it behavior and style.
Custom elements are created using document.registerElement():
var reds = document.registerElement('red');
document.body.appendChild(new reds());
I'm trying to display some HTML files that have code samples, surrounded by codeblock tags. Is there any CSS styling that could display codeblocks as if they were pre tags? (respect newlines, respect whitespace, etc)
Like this
div { white-space: pre; }
If you want to get pretty fancy, consider a libraries like Pygments or highlight.js that will do full syntax coloring, in addition to pretty printing of your code.
Pygments would be implemented in server-side Python; highlight.js works browser side.
OR: use a browser-based "code editor" such as Ace, which will then format/color the code... and just use the control in a read-only fashion.
Is there a way to write HTML onto a webpage, but have it rendered as text?
Let me explain: I want to build a webpage with a discussion on HTML. Therefore there will be sections like
<div>
<p>
<span>Hello world</span>
</p>
</div>
I would like that to formatted properly with indentation, and perhaps even have the tags in a different colour scheme.
I'm fully aware that I could write the styling for this myself, but surely someone has already written and made available a stylesheet, a LESS mixin, or perhaps a jQuery plugin which recognises and formats for me?
UPDATE: Just to make people aware, I realise that I have to HTML-encode the tags (< and >). But that doesn't help with the formatting/presentation, and it's the formatting/presentation that I'm looking for help with.
Use the <xmp> tag instead of <pre>.
E.g.
<xmp>
<html>
<body>This is my html inside html.</body>
</html>
</xmp>
You need to convert < and > to HTML entities.
<div>
<p>
<span>Hello world</span>
</p>
</div>
As for color coding, look into Google Code Prettify. Here are some examples.
You are looking for SyntaxHighlighter. See demo page here
As regards to escaping characters, what you need to escape are “<” (as <) and “&” (as &). If you use automated tools, make sure they handle these characters.
To preserve the formatting (line breaks and spacing), you can use <pre> markup. It is best used so that the first line starts immediately (on the same line) after the <pre> tag and the last line is immediately (without linebreak) followed by the end tag </pre>. Otherwise some browsers may display extra empty lines.
The <pre> markup implies a system-dependent monospace font by default. This can of course be changed in CSS. The markup also implies font size reduction on most browsers, presumably to cope with the properties of monospace fonts; you may therefore wish to set font-size to a value (maybe 100%) to match your design.
Alternatively, you can wrap the code inside any block element (like <div>) and set white-space: pre for it in CSS. This means that the formatting is preserved but the font face and size are the same as for surrounding text (unless you explicitly set it).
You may additionally use <code> markup to indicate the content as computer code. It, too, sets the font to monospace and reduced-size but is otherwise purely logical. If you wish to indicate the language used, then class=language-html would be the way suggested in HTML5 drafts. This has no direct impact as such; it just makes it easier to style your HTML code samples consistently and to recognize them in JavaScript processing if needed.
Example:
<pre><code class=language-html><div>
<p>
<span>Hello world</span>
</p>
</div></code></pre>
As above I it is always a good idea to use the HTML characters to display the demonstration of HTML so always use **<** for < and **>** for < or if you want to be a bit more helpful to your target user then you could use a code highlighter such as Code Highlighter
Hope this helps!