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)
Related
The pre tag is used for defining block of preformatted text in order to preserve the tab, text space, line break e.t.c.
But I don't really know while this is not working for me. Am having excess WhiteSpace in all my blog posts.
I have provided a screenshot for view as well as a live url to see the effect of what am trying to explained.
I tried this:
.pre-blog{white-space:pre-line;white-space:-moz-pre-line;white-space:-pre-line;white-space:-o-pre-line;word-wrap:break-word;word-break:keep-all;line-height:1.5em; display:inline;margin:0}
But no luck with it cos it couldn't solve the issue.
Here is one of the blog posts that you can access and see what I am trying to explain.
Screenshot:
the whitespace you show in the screenshot is the space between li items. This is default styling applied for these html elements.
Easiest way to get rid of the space would be to apply display: flex and flex-direction: column to the parent, which is the ol element
You seem to be trying to put <div>s and other elements inside the <pre>. As far as I know that's not how <pre> works; it's only meant to contain plaintext that you want preformatted in a certain way as described here. It's usually used for displaying things like computer code that need all their indentation preserved.
Your screenshot and linked web page seem to be ordinary formatted text. I'm not sure what exactly you're trying to achieve, but <pre> is not the right way to do it; you'll have better luck with proper use of <p> and <br> tags and CSS styling with properties like margin, padding, and line-height. (Depending on your use-case, if you want to avoid manually typing tags, you might want to consider something like Markdown to automatically add the formatting tags for you).
I suggest you replace your <pre> with a <div>, and then post a different question regarding the whitespace if you're not able to figure it out yourself.
Inside a wysiwyg editor, I have to code a lot of non-editable divs. This following method works :
<div contenteditable="false"> Non editable content here </div>
But "contenteditable" is quite a long word and i'd like to shorten it. Is there a way to define something at the top of the html file like "define ce = contenteditable" and then using it like that <div ce="false">...</div> ? I know that example doesn't work, but is there another, similar way ?
No, there is no way to alias the html element attributes.
However, the div element is not editable by default. Therefore it should not be necessary to set contenteditable="false" on any div. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
If you are finding that this is necessary to prevent the rendered content from being edited, then that may be an effect of the wysiwyg editor you are using.
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.
Let's say I have the following section on a form
Form Section:
Data:_____________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
and I want to be able to insert {{ data }} into the section while keeping every line (even if it's unused). I'm doing this for work to replicate an old form. This form has to be identical and that's why I can't simply do something like:
<u>{{ data }}<u>
Thanks in advance for any and all help!
There seem to be a couple of options here;
Hacky: Use multiple text inputs. Style them to have a solid bottom border (as the underline) and use a bit of javascript to handle moving between them on word wrap/arrow key movement. Downside: you'll miss something like handling text readers properly, obscure keyboard shortcuts, etc... Also, while pasting is fairly easy, copying would be a pain.
Use a textarea with a background-image with the lines. This relies on you locking down the font size/line spacing to look right
Html5: look into using contenteditable attribute. you should be able to replicate the appearance fairly easily using css and divs/spans. Then make the right one editable
This post might be helpful. How to underline blank space in CSS?
In their example, you would put your template code in the first span.
I have a little bit of a problem here. I am making a kind of chat application in Flash CS5, using Action Script 3, and I am trying to make URLs that appear in the main chat textbox (where all of the things that other people have said come up), which is a TextArea component, be converted into HTML link tags. I have this working, but the problem I am facing now is that the links appear black. I want them to appear with an underline, and blue text. I am formatting the TextArea with TextFormat, and I am using some of the functionality that is only available in TextAreas, so I cannot use plain dynamic labels.
I have also tried using the style attribute of the link tag, but that didn't do anything.
How can I change the formatting for the link tags to appear blue and with an underline?
My current code for changing the links to HTML link tags looks like this:
txtOutput.htmlText += replace(/(?:http|https):\/\/\S*/g, function ():String
{
return '' + arguments[0] + ''
});
have a look at style sheets you can implement hyperlink styles form there.
update:
The textArea has a textField property. try applying he style sheet to that.