tags:

views:

179

answers:

3

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.

+3  A: 

Your correct. There is no way to do this in CSS alone. Doing so in Javascript however would be quite trivial.

Gary Green
+4  A: 

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.

Arve Systad
A: 

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.

tardate
Hello, thanks for answering. In fact I don't need a syntax highlighting solution, it would be just a convenience for me since I am using google docs to edit latex files collaboratively. As far as I know, there is no support for custom java script in google docs. Regards.
seuvitor
Yes, I tried it myself in google docs, and it doesn't work. google docs strips out anything interesting, so you are truly left with CSS hacks alone - and I don't know any that would help unless you specially markup the code in the first place
tardate