When adding markup to raw text to turn it into html, wysiwyg editors let you select the piece of text you want to apply the markup to and then press something like <C-b> and get some <strong> markup around of it. It's very quick and useful.
I would like to know what options I have to do this using Vim' visual mode, and maybe make it usable only on html/jsp/php files or so. I have been looking for this for a long time. Does anyone have anything nice to share about this? Thanks in advance.
surround.vim should do what you want:
S<a href='/path/to/link'>
Surround would be my choice too because it is universally useful; not only for html.
Zencoding as well can be used for that with <C-y>,.
Related
Notice how in the 'ugly' side, the doctype is all the way indented and some of the meta lines extend past the left indent.
How can I get my markup looking neat when viewing source in a browser? Is there a certain way to encode the code while using an editor? I use Notepad++ by the way.
Large blocks of unindented code like you see in the left hand side are probably being written out server side, and so although the tag that creates them is nicely indented in your HTML the erver script output will not honour that.
It's not about encoding, it's about writing neat source code, haha. If you are outputting from php or something you can use keep track of how far to indent each thing or you an use some sort of template output function that keeps track of how many tags are open for you and indents the correct amount each time. But, there is no point on having neat HTML, the only important thing is that it's valid. Developer Tools will make it neat for you when you're trying to debug, and actually removing all that whitespace used to make it neat can reduce your page size quite a bit.
The ugly ones probably look pretty in the underlying php or other source. Once generated into HTML it looks ugly, and very few programmers will try to make that pretty too - it's not worth it.
It's funny that what you list as "ugly" seems properly indented to me... at least from what I can tell from the screenshot.
In any case, it doesn't matter. Most of the time these days, sites are made with something dynamic, and a lot of the HTML formatting isn't explicitly output.
If you were to view the source on many of my sites, it is all rammed together on one line, as that is how I echo it out. I don't see the point in wasting bytes on line feeds. Especially these days with all of the browser tools available that reformat the source while debugging.
I use Eclipse to do my coding and I can use Source->Format to clean up my code and format it nicely.
For Notepad++, I believe you can use HTML tidy as per: Formatting code in Notepad++
TextFX -> HTML Tidy -> Tidy: Reindent XML
You really want your HTML code to look like this:
view-source:http://lightningsoul.com/
As it uses the minimum amount of data to present itself to the browser. Remember that indents and white-spaces consume data as well as any other character.
I'm not sure how to describe this one. Basicly I want to show the coding of my website, in my website. So I'm not sure what tag to put. I've done some googling but i'm not even sure what I'm Googleing. I've found these tags, but none of them seemed to work. I found the script tag which I found out isn't what I needed and the code tag but that didn't do what I wanted. Anyone know what to do?
Thanks in advance
write the < as < and the > as > (their character entity equivalents). This will prevent the browser from interpreting them as tags.
So instead of
<p>This is an <i>example</i> of html.<p>
You'd write
<p>This is an <i>example</i> of html.</p>
Tedious, but necessary. Technically speaking, a > is only seen as a tag closer if it was preceded by a < somewhere, so you MIGHT be able to get by with just doing < -> <, but it's safer to write out both characters in entity format.
Once that's done you may want to wrap it with the <pre> tag (as in preformatted) which will cause the spacing and line breaks to be rendered just as they appear in your source code.
Utilize the HTML entity for each applicable symbol. Alternatively, you could use PHP and run the string through htmlentities.
I am not sure if you can do it with a simple tag, but I use this php library to convert my code to nice html code
http://qbnz.com/highlighter/
take a look at this, i think it may be what you are looking for.
http://code.google.com/p/google-code-prettify/
I am looking for a substitute for the HTML <pre> tag. Using the <pre> tag, long lines sometimes have issues on different resolutions, and it just gets worse and worse. The problem is I need to use the <pre> tag because the one who will be the updater of the website doesn't know much HTML and also doesn't have the time. So it would be easiest for him to simply copy and paste the text. But while using the <pre> tag makes that easier, it causes other complications down the line, making other things harder and harder. Suggestions?
Use something like Markdown or Textile on the server to generate HTML from a simplified markup language.
Why would you want a substitute? If the <pre> does what you want, use it. But I agree with you, using <pre> is not going to look good.
David has a good suggestion. Try a search on "convert text to html." If you need a WYSIWYG editor for a CMS that you are building, search for "wysiwyg html editor." TinyMCE is popular, also YUI 2: Rich Text Editor
I have a website with Dutch text which I want to translate to English. Is there a fast way of doing this with keeping the HTML tags(<strong>,<span>) in tact. I know I can just copy the parsed TEXT into a translator but this will remove the formatting.
I also know that at the end I have to go trough the text manually to fix some minor spelling and grammar.
Online translators are good to turn foreign text into something that can be understood, but they are useless for producing quality translations. Even if you fix obvious problems at the end, you will get an amateurish word-by-word translation. If you want your visitors to take you seriously, you should translate from scratch.
If you want to preserve the HTML formatting at the same time as translating, you will have to work directly with the HTML source and update the text yourself without touching the formatting.
You may be able to use an XML editor like XmlSpy that will let you edit text nodes directly without touching the tagging, but this requires that the HTML is actually XHTML. You may still need to translate some attributes (such as title and alt attributes).
Is a virtual traslate a good option for you? Because if you paste google translato script into your page source, it will translate your text on the site, and the formating will stay there too. http://translate.google.com/translate_tools
Well, that's the context: I am editing a latex source file in google docs, and I wonder if I could use CSS to color arbitrary keywords and text enclosed in dollar signs.
For example, given this HTML file:
<html><body>
\section{Heading 1}
<br>
This is a simple file with a formula $x_1 = x_0 + 1$.
<br>
Here it ends \cite{somebody}.
</body></html>
I wanted CSS to let me see this:
\section{Heading 1}
This is a simple file with a formula $x_1 = x_0 + 1$.
Here it ends \cite{somebody}.
I assume it can't be done, since there is no markup isolating these constructs I want to format.
Cheers.
EDIT: Seems like the sample output is not colored as I intended, although it is in the edit view.
You'd need to insert a span-element to wrap around those bits you want highlighted, then style them with a different background color or something else.
So no, a pure CSS-based sollution is impossible.
Your correct. There is no way to do this in CSS alone. Doing so in Javascript however would be quite trivial.
As noted by Arve and Gary, I don't think a pure-CSS solution is possible.
However, if you are able to use javascript in your context is is possible. I am using SyntaxHighlighter by Alex Gorbatchev for syntax highlighting tasks. I would recommend it as long as the kind of style that SyntaxHighlighter can produce fits your needs.
There is some work to do however. It uses a "brush" plugin architecture, and although there is no brush defined for latex it should be quicker to create a brush than build a syntax highlighting solution from scratch.