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.
Related
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>,.
I was wondering how to create Code Editor Style in html page like this one.
http://www.tonymarston.net/php-mysql/databaseobjects.html
He has different colors for different variables and strings. He used <pre> and <span> to style but I am not sure if there are faster ways to do this. Any thoughts? Thanks a lot.
I haven't used it myself, but Stackoverflow uses Prettify (according to this question). It seems to have been built with only JavaScript and CSS.
I am just learning the basics of XHTML and am attempting to use the tag code and pre to display snippets or blocks of code respectively. How do i then show a working example of the code e.g.
<p>Code Sample</p>
<code>
#p1 {font-family: Arial;}
</code>
How do I then display a working example of the code below it?
You won't be able to map that kind of code to actual HTML/CSS using HTML/CSS alone. You could try using JavaScript to achieve this, but your mileage may vary as I haven't done that kind of thing before.
When I wrote HTML/CSS articles with code examples + working samples like you're doing, I used to write style attributes containing the example CSS, or style sample elements by ID, completely manually, but I'm not sure if you're looking for that kind of solution.
StackOverflow uses a simple series of SPAN tags around every single element. The resulting markup is very clean (and even uses the CODE tag), but I'm sure the logic to parse it is not simple.
However, the grammar for these languages is all standardized, so:
1) Someone has probably already written a parser that you can use.
2) If you have/acquire the skill, you can write your own.
Lastly, as BoltClock said, you can style your own markup manually to achieve the desired effect.
I'm using google docs, and some templates we are using were created using MS-Office.
The resulting HTML is fat and ugly, and the 500KB per doc limitation on google makes some cleanup mandatory.
I was able to find redundant "style" attributes and move them to some CSS class, and rename the most redundant classes names to shorter ones, which makes me save about 50% of the original size.
Are you aware of some existing tools/scripts/lib which could do this painful job for me, or at least help me to write this magic tool ?
Thanks in advance !
EDIT: I gave a try to both tidy, demoronizer and "manual rewrite":
- Input : 140Kb
- Tidy'ed : 110Kb
- Demoronized : 135Kb
So my favorite answer will be "rewrite it!"
Thanks !
MS-Office makes crappy HTML, period. You're better of spending time rebuilding the HTML from the original text than trying to walk through that minefield.
I made a few macros that do some search/replace functions on Word to do basic things like wrap <p> tags around paragraphs and stuff like that, then re-markup the whole thing from scratch.
You could try tidy it will clean up many things.
Without commenting on its name, I could mention demoronizer, which the author describes as:
...a Perl program available for downloading from this site which corrects numerous errors and incompatibilities in HTML generated by, or edited with, Microsoft applications.
YMMV.
One of my favourite utilties now is actually Windows Live Writer - it does a neat job of stripping rubbish out of Word doc files. Some might disagree but I use it quite often!
Let's say I have a string holding a mess of text and (x)HTML tags. I want to remove all instances of a given tag (and any attributes of that tag), leaving all other tags and text along. What's the best Regex to get this done?
Edited to add: Oh, I appreciate that using a Regex for this particular issue is not the best solution. However, for the sake of discussion can we assume that that particular technical decision was made a few levels over my pay grade? ;)
Attempting to parse HTML with regular expressions is generally an extremely bad idea. Use a parser instead, there should be one available for your chosen language.
You might be able to get away with something like this:
</?tag[^>]*?>
But it depends on exactly what you're doing. For example, that won't remove the tag's content, and it may leave your HTML in an invalid state, depending on which tag you're trying to remove. It also copes badly with invalid HTML (and there's a lot of that about).
Use a parser instead :)
I think there is some serious anti-regex bigotry happening here. There are lots of times when you may want to strip a particular tag out of some markup when it doesn't make sense to use a full blown parser.
Of course there are times when a parser might be the best option, but if you are looking for a regex then:
<script[^>]*?>[\s\S]*?<\/script>
That would remove script tags and their contents. Make sure that you use case-insensitive matching.
If you don't want to remove the contents of the tag then you can use:
<\/?script[^>]*?>
An example of usage in javascript would be:
function stripScripts(markup) {
return markup.replace(/<script[^>]*?>[\s\S]*?<\/script>/gi, '');
}
var safeText = stripScripts(textarea.value);
I think it might be Raymond Chen (blogs.msdn.com/oldnewthing) that I'm paraphrasing (badly!) here... But, you want a Regular Expression? "Now you have two problems" ... :=)
If the string is well-formed (X)HTML, could you load it up into a parser (HTML/XML) and use this to remove any nodes of the offending variety? If it's not well-formed, then it becomes a bit more tricky, but, I suspect that a RegEx isn't the best way to go about this...
There are just TOO many ways a single tag can appear, not to mention encodings, variants, etc.
I strongly suggest you rethink this approach.... you really shouldnt have to be handling HTML directly, anyway.
Off the top of my head, I'd say this will get you started in the right direction.
s/<TAG[^>]*>([^<]*)</TAG[^>]*>/\1
Basically find the starting tag, any text in between the tags, and then the ending tag. Replace the whole thing with whatever was in between the tags.
Corrected answer:
</?TAG\b[^>]*?>
Because Dans answer would remove <br />, but you want only <b>
Here's a regex I wrote for this purpose, it works in a few more situations:
</?(?(?=b|img|a|script)notag|[a-zA-Z0-9]+)(?:\s[a-zA-Z0-9\-]+=?(?:(["",']?).*?\1?)?)*\s*/?>
While using regexes for parsing HTML is generally frowned upon or looked down on, you almost certainly don't want to write your own parser.
You could however use some inbuilt or library functions to achieve what you need.
JavaScript has getElementsByTagName and getElementById, not to mention jQuery.
PHP has the DOM extension.
Python has the awesome Beautiful Soup
...and many more.