Mathematics Display
To display mathematics on your webpages consider using LaTeX or AsciiMath notation. Serckitutilizes MathJax to produce high-quality mathematics for all modern browsers.
Using math notation is superior to uploading images/screen captures of math: notation easier to edit/maintain since it is plain text, the equations are accessible to visitors using screen readers, and the math is rendered with high-quality vector graphics.
If you're not familiar with LaTeX or AsciiMath math notation it's likely you'll want to start with AsciiMath. Its syntax is more generic and approachable. See the examples below and resource links in the upper right corner.
Serckit Tag & Notation Delimiters
Two steps to render your math notations on a page:
- Wrap your formulas with the Serckit tags [code math] ... your math notation ... [end code]
- Ensure your math notation utilizes one of these standard delimiter sets inside the [code] tags described above:
The two sets of delimiters allow you to wrap math notation fragments inside of a sentence (see example below)\(...\) or $...$ % LaTeX inline delimiters \[...\] or $$...$$ % LaTeX displayed (block) delimiters `...` % AsciiMath delimiters
The final result looks like:
[code math]$E=mc^2$[end code]: $E=mc^2$
[code math]If \(x\neq y\) then it is also true that \(y\neq x\).[end code]: If \(x\neq y\) then it is also true that \(y\neq x\).
Math notation or [code math] tags won't render inside of pre-formatted text (i.e. the <pre> html element).
Examples
LaTeX inline & displayed together
[code math] If $f$ is continuous on the interval $[a,b]$, then \[\int_a^b f(x)dx=F(b)-F(a)\] where $F$ is any anti-derivative of $f$.[end code]If $f$ is continuous on the interval $[a,b]$, then \[\int_a^b f(x)dx=F(b)-F(a)\] where $F$ is any anti-derivative of $f$.
AsciiMath
Helpful tips:
- To depict superscripts, use a carrot symbol ^ (see example 1 below)
- To depict subscripts, use an underscore symbol _ (see example 2 below)
- You can keep terms together by enclosing them in parentheses (see example 6 below, depicting the quadratic formula).
- If you'd like to add plain text, you can do so using quotation marks (see example 7 below)
Example 1: [code math]`(pi)r^2`[end code]: `(pi)r^2`
Example 2: [code math]`F_n = F_(n-1) + F_(n-2)`[end code]: `F_n = F_(n-1) + F_(n-2)`
Example 3: [code math]Solve for x: `x^2-6x+4=0` [end code]: Solve for x: `x^2-6x+4=0`
Example 4: [code math]`((A+X)/2 , sqrt(B+Y)/2)`[end code]: `((A+X)/2 , sqrt(B+Y)/2)`
Example 5: [code math]`INT[(4-x^2)dx] from -2 to +2`[end code]: `INT[(4-x^2)dx] from -2 to +2`
Example 6: [code math]`x = (-b+-sqrt(b^2-4ac))/(2a)`[end code]: `x = (-b+-sqrt(b^2-4ac))/(2a)`
Example 7: [code math]`E(t+dt)=rhocTdxdydz + del/(delt)[rhocTdxdydz]dt + "higher order terms"`[end code]: `E(t+dt)=rhocTdxdydz + del/(delt)[rhocTdxdydz]dt + "higher order terms"`