<b
data-viva // illuminated text
data-vers // inverse illumination
data-ghost // ghosted text
data-vapor // vaporized text
data-blank // transparent text
data-pren // short hand for prens parenthesis
data-prens // puts ()'s around it
data-prens-viva // encloses in illuminated ()'s
data-prens-ghost // ghosts out enclosing ()'s
data-prens vapor // vaporizes enclosing ()'s
data-cirk // puts an illuminated circle around it
data-cank // draws cancel slash over it
data-opt# // alternative shapes
data-flip // flips the circle
data-turn // rotates the circle
>
...
</b>
<c-omm>
short comment
<b>
anything inside b tag will expand
</b>
</c-omm>
<r-ant>
longer, non-expanding comment
</r-ant>
<f-rak
data-viva // illuminates only the bar
data-slash // alternative slash-type bar
data-wide // wider slash-bar
style="
--frak-wide: 100% // width of slash
--slash-top: 50% - 6px // position of slash
">
<b> numerator </b>
<b> denominator </b> <!-- b optional -->
</f-rak>
if the denominator has no other tags, its
b tag is optional - for instance, this code
would display 3/5:
<l-ogb
data-viva // illuminates entire log
data-viva-base // illuminates only base
data-ghost // ghosts out
data-arc // shows solving gesture
data-hat // shows solving hat
data-gank // scribbles it out
>
<b> base </b> <-- optional -->
thing to log
</l-ogb>
<s-umm
data-viva // illuminates everything
data-viva-sigma // illuminates only sigma
data-viva-from // illuminates only from value
data-viva-to // illumiates only to value
data-ghost // displays in outline
data-scrib // scribbles out notation
>
<b> thing to sum </b>
<b> from </b> <!-- optional -->
<b> to </b> <!-- optional -->
</s-umm>
<v-iva> anything </v-iva>
<up-dn>
exponent
<br>
subscript
</up-dn>
<p-ren
data-viva // illuminates ()'s
data-viva-all // illuminates everthing
data-ghost // ghosts the ()'s
data-ghost-all // ghosts entire enclosure
data-vapor // vaporizes the ()'s
data-vapor-all // vaporizes everything
>
thing to enclose
</p-ren>
<b-rak
data-viva // illuminates []'s
data-viva-all // illuminates everything
data-ghost // ghosts []'s
data-ghost-all // ghosts everything
data-vapor // vaporizes []'s
data-vapor-all // vaporizes everything
data-tall // makes []'s extra tall
data-norm // makes []'s normal height
>
thing to enclose
</b-rak>
<c-url
data-dark // removes illumination
data-ghost // ghost out the curl
data-vapor // vaporizes the curl
data-lo // places the curl underneath
data-opt1 // alternative squared shape
>
grouped items
</c-url>
<e-kwa
data-dark // removes default illumination
data-norm // normal font
>
<b> old val </b>
<b> replacement </b>
</e-kwa>
<r-dux
data-dark // non-illuminated
data-norm // default font
data-viva-to // illuminates only redux val
data-opt# // alternative shaped slash
data-cirk // circle-shaped slash
data-hi // slashes higher
data-top // redux val on top
>
<b> reduce-to val </b> <!-- optional -->
item to cancel
</r-dux>
<c-ank
data-dark // non-illuminated slash
data-hi // higher slash
data-opt# // alternative shaped slash
data-scrib // scribbled out
>
item to cancel
</c-ank>
<c-irk
data-dark // no illumination
data-vers // inverse illumination
data-opt# // alternative shapes
data-flip // mirrors the shape
data-turn // rotates the shape
data-norm // default font on note
data-big // doubles normal size
style="
--cirk-wide: 20% // circle width
--cirk-high: 3% // circle height
"
>
things to encircle
<n-ote> note </n-ote> <!-- optional -->
</c-irk>
<m-ove
data-top-rite // to the right, from the top
data-top-right // to the right, from the top
data-bot-rite // to the right, from the bottom
data-bot-right // to the right, from the bottom
data-top-left // to the left, from the top
data-bot-left // to the left, from the bottom
data-dark // no illumination
data-inverse // inverse color
data-verse // inverse illumination
data-ghost // ghosts out the term
data-vapor // vaporizes the term
> ... </m-ove>
<e-val
data-viva // illuminates everything
data-viva-from // illuminates from val
data-viva-to // illuminates to val
>
expression
<b>from</b> <-- optional -->
<b>to</b> <-- optional -->
</e-val>
<i-fak
data-dark // faktors not illuminated
data-vapor // value vaporized
>
<b>value</b>
<b>
list of faktors
</b>
</i-fak>
<k-wad
data-step# // step number 1 through 6
data-guess // displays (x+/-?)(x+/-?)
data-var-y // sets guess var to y
style="
--kwad-var: 'x'; // variable for guess
"
>
<b> a </b> x2 +
<b> b </b> x +
<b> c </b>
<b> a × c </b> <-- literally written out-->
<i-fak>
<b> a×c </b> <-- product of a times c -->
<b>
faktors of the product a×c
<b>
the two faktors to use
</b>
</b>
</i-fak>
</k-wad>
<r-oot
data-viva // illuminated bar and index
data-vapor // vaporized bar and index
data-cank // ghosted bar and cancelled index
>
<b>index</b> <!-- optional -->
radicand
</r-oot>
<!-- any immediately following sup gets formatted -->
<sup
data-viva // correctly illuminates
>
exponent
</sup>
<r-aze
data-dark // no illumination
data-dark-value // value not illuminated
data-dark-arrow // arrow not illuminated
>
<b> base </b>
<b> side to raze to </b>
</r-aze>
<s-tar>
...
</s-tar>
<g-ood
data-left // moves gesture to left side
data-opt# // alternative shapes
>
...
</g-ood>
<s-in></s-in> sin(x)
<c-os></c-os> cos(x)
<t-an></t-an> tan(x)
<c-sc></c-sc> csc(x)
<s-ec></s-ec> sec(x)
<c-ot></c-ot> cot(x)
<s-in2></s-in2> sin2(x)
<c-os2></c-os2> cos2(x)
<t-an2></t-an2> tan2(x)
<c-sc2></c-sc2> csc2(x)
<s-ec2></s-ec2> sec2(x)
<c-ot2></c-ot2> cot2(x)
<sin-1></sin-1> inverse sine
<cos-1></cos-1> inverse cosine
<tan-1></tan-1> inverse tangent
<a-sin></a-sin> inverse sine
<a-cos></a-cos> inverse cosine
<a-tan></a-tan> inverse tangent
<!-- optionally, set values in parent tag -->
<parent
data-var-x // sets variable to x
data-var-theta // sets variable to θ
data-var-phi // sets variable to φ
data-var-none // no variable
data-no-prens // removes enclosing ()'s
data-prens // includes enclosing ()'s
style ="
--variable // directly set the variable
--power // directly set the exponent
">
<-- any trig tag also has these options -->
<-- that override the parent values -->
<t-rig
data-var-x // sets variable to x
data-var-theta // sets variable to θ
data-var-phi // sets variable to φ
data-var-none // no variable
data-no-prens // removes enclosing ()'s
data-prens // includes enclosing ()'s
data-pow-3 // raises to third power
data-pow-4 // raises to fourth power
data-pow-8 // raises to eighth power
>
</t-rig>
</parent>
<i-teg
data-viva // illuminates everything
data-viva-sigma // illuminates only sigma
data-viva-diff // illuminates differential
data-viva-from // illuminates from val
data-viva-to // illuminates to val
data-ghost // ghosts out the integral
data-vapor // vaporizes the integral
data-iprt // u and v' labels for by-parts
data-dark // no illumination of by-parts
>
<b>
integrand
<u-u> <!-- optional u for by-parts -->
<v-v> <!-- optional v' for by-parts -->
</b>
<b> differential </b>
<b> from </b> <!-- optional -->
<b> to </b> <!-- optional -->
</i-teg>
<p-owr
data-dark // not illuminated
data-ghost // ghosts out the gestures
data-opt# // uses different gestures
data-margin# // increases right margin
>
3x<sup>2</sup> <!-- use sup tag -->
</p-owr>
<i-pow
data-dark // no illumination
>
3x<sup>5</sup> <-- use sup tag -->
</i-pow>
<uv-table
data-empty // u' and v not shown
>
<b>u </b>
<b>u'</b>
<b>v </b>
<b>v'</b>
</uv-table>
<by-parts
data-dark // no illumination
>
<b>u </b>
<b>v </b>
<b>v </b>
<b>u' dx</b>
</by-parts>
<rite-dist
data-dark // no illumination
data-norm // regular font
style="
--arc1-wide: // first arc width
--arc2-wide: // second arc width
"
>
<b> leading coefficient </b>
<b> first term
<b> ...muliplied by</b> <!-- optional -->
</b>
<b> second term
<b> ...muliplied by</b> <!-- optional -->
</b>
</rite-dist>
<!-- more simple version -->
<rite-dist>
<b> leading coefficient </b>
(item)
</rite-dist>
<left-fakt
data-dark // no illumination
data-vapor // vaporizes the gesture
data-norm // uses normal font
style = "
--arc1-wide: 46% // first arc width
--arc2-wide: 100% // second arc width
"
>
<b> faktor </b>
expression
</fakt-left>
<n-t> <!-- inherit color dot -- >
<p-t> <!-- lightness dot -- >
<v-t> <!-- illuminated dot -- >
<t-t> <!-- x-shaped symbol -- >
<p-m
data-viva // illuminated
></p-m>
<i-mp
data-dark // not illuminated
></i-mp>
<d-dx
data-viva // illuminated
data-ghost // ghosted out
data-vapor // vaporized
data-cank // cancelled out
></d-dx>
<dy-dx
data-viva // illuminated
data-ghost // ghosted out
data-vapor // vaporized
data-cank // cancelled out
></dy-dx>
<dz-dx
data-viva // illuminated
data-ghost // ghosted out
data-vapor // vaporized
data-cank // cancelled out
></dz-dx>
<n-add or <add-n
data-dark // not illuminated
>
value
</n-add>
<min-n or <n-min
data-dark // not illuminated
>
value
</min-n>
<tim-n or <n-tim
data-dark // not illuminated
>
value
</tim-n>
<n-ote
data-dark // not illuminated
>
things to note
</n-ote>
<n-pad
data-dark // not illuminated
> note text </n-pad>
<q-fak
data-dark // not illuminated
data-n // changes var to n|q|x|y|z
style="
--qfak-var: 'x' // sets the display variable
"> expression </q-fak>
<f-x
data-viva // illuminates notation
data-viva-all // illuminates everything
data-eq // includes = in notation
data-var-n // changes variable to 'n|q|y|z'
style="
--var: 'x' // value of variable
">
function
</f-x>
<g-x
data-viva // illuminates notation
data-viva-all // illuminates everything
data-eq // includes = in notation
data-var-n // changes variable to 'n|q|y|z'
style = "
--var: 'x' // value of variable
">
function
</g-x>
<h-x
data-viva // illuminates notation
data-viva-all // illuminates everything
data-eq // includes = in notation
data-var-n // changes variable to 'n|q|y|z'
style="
--var: 'x' // value of variable
">
function
</h-x>
<f-ogx
data-viva // illuminates
>expression</f-ogx>
<g-ohx
data-viva // illuminates
>expression</g-ohx>
<w-ear
data-viva // illuminates everything
data-viva-from // illuminates only from val
data-viva-to // illuminates only to val
data-ghost // ghosts out everything
data-vapor // vaporizes everything
>
<f-rom> <!-- optional from val -->
<t-o> <!-- optional to val -->
statements <br>
... <br>
</w-ear>
<a-rea
data-viva // illuminates everything
data-viva-a // illuminates the A variable
data-viva-icon // illuminates the gesture
data-no-formula // no formula for data-shape
data-cirk | -circle // circle formula and gesture
data-tri | -triangle // triangle formula and gesture
data-rect | -rectangle // rectangle ...
data-lips | -ellipse // ellipse ...
data-para | -parall.. // parallelogram ...
data-trap | -trapezoid // trapezoid ...
data-opt1 | -right // right triangle
data-opt2 | -scalene // scalene triangle
data-flip // flips icon
data-turn // rotates icon
data-big // doubles the icon size
style ="
--icon-rot: 0deg; // icon rotation
--icon-scale: 1,1; // icon scale
">
<track> <!-- add track tag for icon -->
</a-rea>
for example:
<a-rea data-no-formula data-cirk><track> ... </a-rea>would display the circle icon but allow for entering any, or no, formula for area
<v-olm
data-viva // illuminates everything
data-viva-v // illuminates the V variable
data-viva-icon // illuminates the gesture
data-no-formula // no formula for data-shape
date-sphere // sphere formula and gesture
data-cube // cube formula and gesture
data-cone // cone ...
data-box // rectilinear solid ...
data-cyl | -cylinder // cylinder ...
data-pyr | -pyramid // pyramid ...
style ="
--icon-rot: 0deg; // icon rotation
--icon-scale: 1,1; // icon scale
">
<track> <!-- add track tag for icon -->
</v-olm>
<b> <!-- must be in a b-tag -->
x\**2
x\**(3 + 5)
x\**[7 - y]
x\**<v-iva>7 + 1<v-iva>
x\\** <!-- literal display of ** -->
</b>
<i-arc
data-dist // distribution [faktor is default]
data-rite // value on right [left is default]
data-cirk // gesture only to <c-irk> tags
// [default is all children]
data-blank // blanks out circled terms
data-dark // no illumination
data-no-prens // does not enclose in ()'s
data-min="20" // minimum px height of arc gestures [20]
data-dif="15" // difference between gesture heights [15]
data-size="10" // thickness of arc [10]
>
<b>
distribute|faktor value
</b>
<any-tag> <!-- any number of tags -->
...
</i-arc>
<any-tag
data-line=" // coma-separated list of queryselectors
#target_id, // accepts any valid css selector
.class, // lines will be drawn TO these elements
...
"
data-line-dir="90" // optional - coma-separated list of
// angles, from 0-360 at which the
// line leaves this element; default
// is 90, if only one angle is given,
// all lines leave at that angle
data-line-size="100" // optional - coma-separated list
// of the magnitudes of the
// leaving vector; default is 100,
// if only one value is given,
// all lines will have that same
// magnitude
>
</any-tag>
<target-tag // any tag can be targeted
id="target_id" // an id is a typical way to select
data-line-dir="90" // optional - line direction, 0-360
data-line-size="100" // optional - vector size of line
></target-tag>
<g-eom
data-viva // illuminates the drawing
data-dark // non-illuminated dimensions
data-grey // greys the dimensions
data-ghost // ghosts the dimensions
data-vapor // vaporizes the dimensions
data-type="
cirk // circle: r, d
square // square: s
rect // rectangle: l, w
tri-rite // right triangle: b, h, hyp, angle
tri-306090 // special triangle: b, h, hyp, angle
tri-454590 // special triangle: b, h, hyp, angle
tri-345 // pythagorean triangle: b, h, hyp
tri-equ // ekwilateral triangle: s, b, h
tri-scalene // scalene triangle: b, h
tri-iso // isoscelese triangle: b, h
sphere // sphere: r, d
cyl // cylinder: r, d, h
cone // cone: r, d, h, slant-h
cube // cube: s
box // box: l, w, h
pyr // pyramid: l, w, h
v-tank // v-shaped tank: ...
u-tank // u-shaped tank: ...
"
>
<!-- if object has such a dimension, -->
<!-- these optional tags can be added -->
<!-- that will use their 'default' caption -->
<!-- or whatever caption is provided -->
<l-l>length 'l'</l-l>
<w-w>width 'w'</w-w>
<h-h>height 'h'</h-h>
<r-r>radius 'r'</r-r>
<d-d>diameter 'd'</d-d>
<s-s>side 's'</s-s>
<a-a>angle 'θ'</a-a>
<b-b>base 'b'</b-b>
<b1-b1>base-1 'b1'</b1-b1>
<b2-b2>base-2 'b2'</b2-b2>
<hyp-hyp>hypotenuse 'h'</hyp-hyp>
<!-- adding a tank tag treats 3D objects like --&t;
<!-- a filling tank --&t;
<t-ank
data-fill="75%" // how full the tank is
>
<!-- every dimension tag above can be --&t;
<!-- repeated here to have another --&t;
<!-- label for partially full tank --&t;
...
</t-ank>
</g-eom>