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.
Related
I want to replace single-line b/h2/h3/h4/h5 tags inside blockquote tags, with h6 tags.
So I want this:
^<[b|h[2-5]]>([^\.]+)</[b|h[2-5]]>$
to be replaced with this:
<h6>\1</h6>
but only if it's within a blockquote tag, which is on different lines. I'm thinking the solution must involve a lookbehind for a closing blockquote tag AND a negative-lookbehind for an opening blockquote, but I'm not sure how to implement this.
Regular expressions are extremely bad for parsing arbitrary HTML, as many things can go wrong.
That being said: this demo may get you started.
This doesn't deal properly with edge cases.
<div><b>This thing</div></b>
will not parse properly.
If you know your input is well-formed and doesn't have too deep of nesting (a <b> within a <h2> within something else, for example), then it may work. But to parse HTML, you really need a DOM parser.
Now, this does not handle the "between blockquote tag" requirement, but with Javascript (if this is what you're using), this isn't a very simple task example. You have to essentially run the same process over and over to get all of the elements converted to h6.
If you were to use jQuery instead, you could do it much more safely: jsfiddle
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.
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.
Is there a way to style comments inside a pre or code block (e.g. Ruby comments) using only CSS?
For example:
# I am a comment and should be lighter and italic
I = { :am => :normal_code, :and_want_no => :special_treatment }
I know you can use Javascript/jQuery to insert <span> elements in the right spots (like the <span>'s in the comment above provided by Stack Overflow) but can it be done with just CSS?
For background, I use a markdown renderer which outputs simple <pre> and <code> elements where necessary but without any hooks for indicating which language you're using and how to flag comments with <span> elements.
This task can't be done with just CSS.
CSS works at the element level and it is not possible to "select into" general text - even trivially, much less applying some rules to parse language grammar.
As noted, and as seen by inspecting the SO code rendering such as the one in this post, one approach is to output spans with the appropriate CSS classes (which are the result of separate grammar processing) - then these individual spans, which can selected, are styled.
a) What markdown renderer?
b) This can't be done with CSS with classes or ID's, as well as psuedo
elements
I will expand further as you do.
The problem is, you can't exactly render comments with your provided method, as these are technically never rendered in the first place.
comments are meant to be non-runnable code to help for debugging. Trying to add comments or manipulate comments would be a security breach and would require actually inserting a file into your appreciable code.
As far as that would go? That would be a tricky scenario unless you had the same comment or multiple files available to do so. I would say to just import your file if necessary with a duplicate version with a commented version.
I'm new to CSS and I want to minimize the amount of tagging I am doing in an HTML document.
Is there a way to define newlines as having <br /> so that for a given <div> that I've defined I can do the following:
.description {
br: on;
color: #D3E22A;
width: wrap;
}
white-space: pre;
or
white-space: pre-wrap;
See the specs.
white-space: pre;
this makes it just like a <pre> element.
It sounds like you want a tool to allow you to enter text in paragraph form without needing to write your own markup for it. You probably want a WYSIWYG editor. There are free JavaScript implementations that offer nice input formatting tools.
You definitely don't want to insert tags with CSS - that is just nonsense. CSS defines formatting for markup. It doesn't create new markup.
If you want to apply some sort of markup transformation, use JavaScript or a server-side scripting language. CSS is not a general-purpose programming language.
Well , if you have a text an you nave a new-line, it means ,
that you have began a new paragraph - a <p> tag.
Try reading this article :
http://brainstormsandraves.com/articles/semantics/structure/
Basicly that, what you call a "newline", is caused by a begining of a new block level element.
A paragraph is a block level element.
And for all block-level element you can set a verticla margins and paddings.
Recommended readoing:
- http://www.htmldog.com/guides/
- http://wsc.opera.com/