Showing posts with label TeX. Show all posts
Showing posts with label TeX. Show all posts

Equation Editor in HTML Environment

Sample:
Category: 0 comments

Writing Equation in Blogger using LaTeX - Mathtex3.js

  • Using WYSIWYG Equation editor and Mathtex3.js for Beginner User
Creating LaTeX renderer for Blogger
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:
    - Copy (to clipboard) the following script using block and ctrl-c
    
    <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 
    Basically all the code can be used in a posting after adding a HTML/Script footer Gadget containing Mathtex3.js. You may read Short Math Guide for LATEX  for looking up the type set.Here some example codes:

    \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
    Category: 11 comments

    LaTeX Parameter for Position Adjustment in Ning.com

    Inserting LaTeX using <img src="http://www.codecogs.com/gif.latex?copy_paste_here"/> should be treated as image because we use image tags for HTML ( <img .../>).

    There are several parameters that can be use for position adjustment:

    Parameter Value Using Example Output
    align
    align="top" <img src="http://www.codecogs.com/gif.latex?\frac{x-\mu }{\sigma }" align="top"> Sample text
    middle align="middle" Sample text
    bottom align="bottom" Sample text
    border 0 border="0"
    &lt;img src="http://www.codecogs.com/gif.latex?\frac{x-\mu }{\sigma }" align="middle" border ="1">
    Sample text
    1 border="1"
    width % or pixel
    width="10"
    width ="100%"

    &lt;img src="http://www.codecogs.com/gif.latex?\frac{x-\mu }{\sigma }" align="middle" height ="40" width="70">
    Sample text
    height % or pixel
    height="20"
    height ="90%"
    hspace % or pixel
    hspace="5"
    hspace ="5%"
    <img src="http://www.codecogs.com/gif.latex?\frac{x-\mu }{\sigma }" align="middle" vspace ="20" hspace="10%" border ="1"> Sampletext
    vspace % or pixel
    vspace="10"
    vspace ="10%"

    Resource:
    W3C (n.d). 13 Objects, Images, and Applets. Retrieved 16 April, 2010, from http://www.w3.org/TR/REC-html40
    Category: 0 comments

    Writing Equation using LaTeX code at Ning.com


    Ning.com does not provide renderer like wikipedia or any other CMS for creating equation such as:

    We can use LaTeX source from another WYSIWYG LaTeX editor and copy-paste into blog or Forum in HTML mode. Follow the steps bellow:

    Because we use external WYSIWYG equation editor, then it is not embedded in the posting editor, we should open the equation editor and the entry blog/posting editor in the different windows/tabs. Then follow these steps:
    1. Open WYSIWYG Equation Editor in a new window/tab.


    2. Create an equation by click the symbl or samples of equation

    3. Click Copy to Document, the the windows will directly change to the page where the WYSIWYG equation editor is.
    4. Copy the code from the box by blocking and copying
    5. Paste the code to the posting editor either in Compose or Edit HTML mode.

    6. Then you change to Rich Text mode again, and you will see:

    7. If you come back to HTML editor and want to change the equation, you will see the script has been changed. It is recommended to repeat the steps 1-6.

    LaTeX code for Advanced User 
      Basically all the code can be used in a posting . We can read Short Math Guide for LATEX  for looking up the type set.Here some example codes:

      \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 (2010). 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
      Category: 0 comments

      TeX Testing in Blogger

      a^2+b^2=c^2
      


      \[a^2+b^2=c^2\]
      Category: 0 comments