I know nothing about JavaScript except how to use it in my html and a little bit about changing the variables. I have some Javascript on my math webpage that converts LaTex code to an image tag, which is sent to codecogs and it renders the image of the equations and is downloaded, allowing anyone to see equations without any plugin.

There are two things i wanted modified in this script (it's a freeware under GNU license). first, the latex code allows 3 colors. i wanted an easy way to specify colors in the <span> tag.

for example, to make this equation red: <span>$\frac{a}{b}$</span>, i would have to write <span>${\color{red}\frac{a}{b}}$. Instead, I would like <span class="red">$\frac{a}{b}$</span> (or id="red" or whatever works), so that I can use CSS.

And two, the renderer allows higher dpi for images rendered. See the codebox below where it says 100dpi. I can specify 120, 150 dpi for better quality images. Specifying higher dpi obviously gives higher quality image and a bigger image. I want to be able to specify higher quality and adjust the size of the image. Is there a way I can do that with variables and again in the <span> tag? Like for example: <span class="red" id="150dpi" height="50px">$\frac{a}{b}$</span>?

Thanks in advance.