- Using WYSIWYG Equation editor and Mathtex3.js for Beginner User
For inserting an equation to a posting in a simple way, we need to make sure that LaTeX code can be rendered in the blog. Please follow the steps bellow:
<script src="http://www.watchmath.com/cgi-bin/mathtex3.js" type="text/javascript"></script>
<script type="text/javascript">
replaceMath( document.body );</script>
- Add a HTML/Script footer Gadget by accessing your Dashboard and choose Layout>>Page Element, and then click the hyperlink Add a Gadget in the bottom of the layout, followed by selecting HTML/JavaScript gadget. In the popup windows paste the script which is copied before, so that it is like the picure bellow:
Click save with out typing any title. Then save the Page Elements.
Creating WYSIWYG Equation Editor
Latex code is quite complex to remember because it is like programming script. Since we prefer works in the GUI environment, we need WYSIWYG (What You See Is What You Get) Equation Editor. The steps bellow will show you how to make a Blogger Gadget for equation editor:
- Copy the following script:
<script type="text/javascript" src="http://latex.codecogs.com/editor.js"></script>
<p align="center" style="margin-top: 0; margin-bottom: 0"><font face="Arial">
Sample:
<a href="javascript:OpenLatexEditor('testbox','latex','')">
<img src="http://www.codecogs.com/gif.latex?\sum_{i=1}^{n}{(X_i - \overline{X})^2}"
align="middle" /></a></font></p>
<p align="center" style="margin-top: 0; margin-bottom: 0"><b><font face="Arial">
<a href="javascript:OpenLatexEditor('testbox','latex','')">
Launch
Editor</a></font></b></p>
<p align="center" style="margin-top: 0; margin-bottom: 0">
<textarea id="testbox" rows="10" cols="20"></textarea></p>
<p align="center" style="margin-top: 0; margin-bottom: 0">
<a href="http://www.codecogs.com" target="_blank">
<img src="http://www.codecogs.com/images/poweredbycc.gif" border="0"
title="CodeCogs - An Open Source Scientific Library"
alt="CodeCogs - An Open Source Scientific Library" /></a>
<p style="margin-top: 0; margin-bottom: 0" align="center"><font size="1"><font face="Arial">
<a href="http://a2mstats.blogspot.com/">Aam Sudrajat</a></font> </font>
</p>
- Add a HTML/Script footer Gadget by accessing your Dashboard
- Paste the copied script in the content, and you can give Equation Editor as the Title.
- Save the gadget and the Page Elements.
Inserting LaTeX code in a Posting
Because the equation editor is not embedded in the posting editor, we should keep the page contained it and open a new window/tab for creating/editing a posting. Then follow these steps:
- Open Equation Editor by clicking the Lauch Editor link.
- Create an equation by click the symbol or samples of equation
- Click Copy to Document, the the windows will directly change to the main page where the equation editor gadget is.
- Copy the code from the box by blocking and copying
- Paste the code to the posting editor either in Compose or Edit HTML mode.
- Publish your post
\[ x = a_0 + \frac{1}{a_1 + \frac{1}{a_2 + \frac{1}{a_3 + a_4}}}\]
- Using Mathtex3.js for Advanced User
\frac{{\displaystyle\sum\nolimits_{n> 0} z^n}}{{\displaystyle\prod\nolimits_{1\leq k\leq n} (1-q^k)}}
\[\frac{{\displaystyle\sum\nolimits_{n> 0} z^n}}{{\displaystyle\prod\nolimits_{1\leq k\leq n} (1-q^k)}}\]
V = \frac{k_2{[E]}+{[S]}}{K_m + {[S]}}}
\[V = \frac{k_2{[E]}+{[S]}}{K_m + {[S]}}\]
6CO_2 + 6H_2O \xrightarrow{Light Energy} C_6H_{12}O_6 + CO_2 \ \delta G^{\circ} = +2870kJ/mol
\[6CO_2 + 6H_2O \xrightarrow{Light Energy} C_6H_{12}O_6 + CO_2 \ \delta G^{\circ} = +2870kJ/mol\]
Sources:
Codecog (2009). LaTeX Equation Editor v2.96 Installation. Retrieved 15 April, 2010, from http://www.codecogs.com/latex/install.php
Downes, M. (2002). Short Math Guide for LATEX. Retrieved 15 April, 2010, from ftp://ftp.ams.org/pub/tex/doc/amsmath/short-math-guide.pdf
WatchMath (2010). How To Install Latex On Blogger/Blogspot. Retrieved 15 April, 2010, from http://watchmath.com/vlog/?p=438
11 comments:
hai
verry nice tutorial
how to post the java script code with slider inside your tutorial
nik
Hi , thank you very much for your tutorial , i want to know how to remove annoying borders of a latex equation : check my post http://safaelmarwa.blogspot.com/2010/10/blog-post_26.html
First of all, thanks a lot for this!
I also have the annoyng borders problem. Any ideas!
@SARiX: Go to your template and find: .post img{border: n px ....}. You replace "n" by "0".
@pkl : Thanks for reviving and answering , gonna ty this :-)
@SARix: How's about your result?
My blogspot: http://gopnhatlinhtinh.blogspot.com/
@PKL : Your tip is working fine man , check it here : My post , but i wonder if this is gonna affect something else because i had :
.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
}
which i changed to :
.post img, table.tr-caption-container {
padding:4px;
border:0px;
}
@SARiX:
I think you can split
.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
}
into:
.post img {
padding:4px;
border:0px
}
. table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
}
Then, the latex (image in your post) have no border and other things remain the same. Hopeful
@pkl : Yep , it's likely the solution , despite i don't know much about css ! thanks for everything.
Post a Comment