I want to show code in a html page. The code may be written in any language.The output should be as follows:
All you need to do is write up some CSS (or use inline styling) for the grey background div and then use <span> tags to color the text inside of a <p> tag.
Here is some info on span tags: http://www.w3schools.com/tags/tag_span.asp
Also, you have to replace some characters in the code you want to display. You should replace < with <, and replace > with >. You can put all of that inside of a <code> tag if you would like, but I don't think its necessary.
If you would like it to automatically be colored and formatted and such, then you may need some JavaScript or something, but if it is a static HTML page, then you should just stick with the basics.
Related
I'm doing an HTML write up for a colleague that is going to go on our intranet site, but I have to write the instructions in the HTML itself. I need to write the word <div> in the instructions, but I need to have it so the '' displays as the word , not an actual div.
Because I'm writing it directly inside the HTML, I need a way of somehow escaping the HTML, but keep the word and it's arrow brackets.
How do I go about doing this?
EXAMPLE
<p>This is some text followed by the word <div>, but not an actual div.</p>
Replace < with < and > with > Those are HTML Entities which can replace real tags. That way, it'll apear as <div> althought it isn't actually a div.
<p>This is some text followed by the word <div>, but not an actual div.</p>
This question already has an answer here:
Why is a newline converted into a ' ' in any given .html file?
(1 answer)
Closed 6 years ago.
I am developing a page, I am returning data from the server (sharepoint), and displaying it in a paragraph element using $("#Fees").html();
The text should contain carriage return, it shows ok when I view it inside the rendered html itself like the following:
<p id="Fees">Fees should be like the following:
Main fees:
1- Fee1
2- Fee2</p>
As you can see, inside my paragraph, the carriage return is visible, however, on my page, it's not, as you can see below:
Fees should be lik the following: Main fees: 1- Fee1 2- Fee2
What should I do? Is it something related to code, or is it a known thing with paragraph tags? I tried it with div tag, and same result. Any idea would be great.
add the following CSS
#Fees {
white-space: pre
}
This will make that <p> tag behave like a pre tag, without all the other changes a <pre> tag has (like font for instance)
Multiple White Spaces and Line Breaks are read in HTML as a Single White Space. Use the <pre> tag if you want to preserve White Space, either that, or use to create Non-breaking White Spaces in conjunction with <br /> to create Block-level line breaks. The CSS solution to make White Space act like the <pre> tag would also work: p{white-space:pre;}.
I think you should translate your line feeds into <br> tags before putting your data into the paragraph. Regular line feeds inside html code don't get rendered.
For example, assuming you have your text inside a string before writing it in your <p>:
yourstring.replace(/(?:\r\n|\r|\n)/g, "<br>");
Then you move it into the <p> tag.
I have a SVG logo i want to place a few times on a single page. Each time it should show up in a different color. That colors are defined via the Wordpress backend. The colors get applied with a snippet like that:
<div class="logo" style="fill:<?php the_field('op-about-color', 'option'); ?>;"></div>
The SVG is placed in the CSS and is base64 encoded. Inside the <svg>tag i've also included the class logotest. But the problem is the SVG isn't getting colored. I've created an example pen with the base64 encoded svg:
http://codepen.io/rpkoller/pen/DuqBh
It stays black.Opposite to the fact that the inline style filled it red and even the assignment of the fill color green for the sktest class has no effect at all.
If i place an unencoded svg code right into the html into a div everything works as expected. Inline style assignment as well as with the logotest class:
http://codepen.io/rpkoller/pen/rdFup
Is there a way to get things going with the base64 variant? Best regards Ralf
Your problem is in your implementation. It's not necessarily that base64 is the issue so to speak, but the difference between including the image as a CSS background, versus including it in HTML.
In HTML... You literally can read the code of the SVG in the HTML. Because that HTML markup exists in the DOM, it is editable via CSS through your classes. If you were to right click the page and click "View page source" you would see the code of the SVG in the HTML.
In CSS, you are adding the image as a background image. Background images don't get any sort of HTML markup that is outputted into the DOM. It is... an "effect" if you want to say it that way, which is applied to some HTML element that you define. If you right click the page and click "View page source" you will see the element that you are applying the background image to, but there is no additional markup outputted that further CSS could then read and modify.
What are your options? Well, you could apply the inline styling directly to the SVG image, but that isn't in any way dynamic, so you won't be able to do your back-end snippet for class names and such.
The other option is to include the SVG like you have done already, which is called "Inline SVG". This way you can effect it with CSS code.
</body>
</html>
visit us
I have wordpress theme with this ahref in ALL pages, can i remove??. I search on all php functions and css style but nothing...any idea?
Thanks for your time!
CSS cannot remove element from DOM. If you know javascript or better jQuery, just give all anchor which you want to remove a specific class then remove it all by using:
$(".yourClass").remove();
If you don't know jQuery, then you need to use the parent of each element to remove it:
element.parentNode.removeChild(element);
Look like you have this tag in footer template, scroll down to check if there is any text written after closing html tag, or sometimes the case may be that your editor does not have wrap text option set as a result you are not able to see this text may be on right side, scroll to right of the editor or alternatively you can use the search option to locate the text.
I've got a <textarea>, but I need to color specific lines different colors. Apparently, I can't do this.
I could perhaps use a <div>, but I like the look and scrollbar of a <textarea>.
Is there any sort of database of HTML elements somewhere that I can check? It's rather annoying having to burden the posters of StackOverflow whenever I can't place the name of an element.
Textareas can only contain plain text. No possibility to format via CSS. You need something like a WYSIWYG Editor (CKEditor or TinyMCE)
Or if readonly, filled by javascript:
Use a simple div which can contain HTML markup inside for your line colors. Then style it with CSS to look like a textarea (scrollbar maybe)