<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > The mkbook Book | KaTeX (Math) Formulas< / title >
< link rel = "stylesheet" href = "../style.css" type = "text/css" media = "all" / >
< link rel = "shortcut icon" href = "../favicon.ico" / >
< meta property = "og:title" content = "The mkbook Book" / >
< meta property = "og:site_name" content = "The mkbook Book" / >
< meta property = "og:type" content = "book" / >
< meta property = "og:url" content = "https://hamaluik.github.io/mkbook//02-markdown/04-katex-formulas.html" / >
< meta property = "book:author" content = "Kenton Hamaluik" / >
< meta property = "book:release_date" content = "2019-12-09T06:12:31.253923271+00:00" / >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity = "sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin = "anonymous" >
< / head >
< body >
< nav class = "big" >
< header >
< h1 > < a href = "../index.html" > The mkbook Book< / a > < / h1 >
< h2 > by Kenton Hamaluik< / h2 >
< / header >
< ol >
< li >
< a href = "../01-command-line.html" > Command-line Interface< / a >
< / li >
< li >
< a href = "../02-markdown/index.html" > Markdown< / a >
< ol >
< li > < a href = "../02-markdown/01-commonmark.html" > CommonMark< / a > < / li >
< li > < a href = "../02-markdown/02-syntax-highlighting.html" > Syntax Highlighting< / a > < / li >
< li > < a href = "../02-markdown/03-plantuml-diagrams.html" > PlantUML Diagrams< / a > < / li >
< li > < a href = "../02-markdown/04-katex-formulas.html" class = "current" > KaTeX (Math) Formulas< / a > < / li >
< li > < a href = "../02-markdown/05-images.html" > Images< / a > < / li >
< li > < a href = "../02-markdown/06-tables.html" > Tables< / a > < / li >
< li > < a href = "../02-markdown/07-task-lists.html" > Task Lists< / a > < / li >
< / ol >
< / li >
< li >
< a href = "../03-frontmatter.html" > Front Matter< / a >
< / li >
< li >
< a href = "../04-structure.html" > Structure< / a >
< / li >
< li >
< a href = "../05-customization.html" > Customization< / a >
< / li >
< li >
< a href = "../06-how-it-works.html" > How it Works< / a >
< / li >
< / ol >
< / nav >
< nav class = "small" >
< span >
< a href = "../index.html" alt = "Table of Contents" >
< span class = "icon" >
< svg class = "icon-list-ol" >
< use xlink:href = "../icons.svg#icon-list-ol" >
< / svg >
< / span >
< / a >
< a href = "../02-markdown/03-plantuml-diagrams.html" alt = "PlantUML Diagrams" >
< span class = "icon" >
< svg class = "icon-arrow-left" >
< use xlink:href = "../icons.svg#icon-arrow-left" >
< / svg >
< / span >
< / a >
< / span >
< span class = "title" > KaTeX (Math) Formulas< / span >
< span >
< span class = "placeholder" > < / span >
< a href = "../02-markdown/05-images.html" alt = "Images" >
< span class = "icon" >
< svg class = "icon-arrow-right" >
< use xlink:href = "../icons.svg#icon-arrow-right" >
< / svg >
< / span >
< / a >
< / span >
< / nav >
< article >
< h1 class = "title" > KaTeX (Math) Formulas< / h1 >
< p > If you have < a href = "https://github.com/KaTeX/KaTeX" > KaTeX< / a > installed and available on your path, < em > mkbook< / em > will try to render any code blocks with a language tag of < code > katex< / code > as inline math blocks.< / p >
< p > For example:< / p >
< pre style = "background-color:#2d2d2d;" >
< span style = "color:#d3d0c8;" > ```katex
< / span > < span style = "color:#d3d0c8;" > x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
< / span > < span style = "color:#d3d0c8;" > ```
< / span > < / pre >
< p > is rendered as:< / p >
< figure class = "math" > < span class = "katex-display" > < span class = "katex" > < span class = "katex-mathml" > < math xmlns = "http://www.w3.org/1998/Math/MathML" > < semantics > < mrow > < mi > x< / mi > < mo > =< / mo > < mfrac > < mrow > < mo > − < / mo > < mi > b< / mi > < mo > ±< / mo > < msqrt > < mrow > < msup > < mi > b< / mi > < mn > 2< / mn > < / msup > < mo > − < / mo > < mn > 4< / mn > < mi > a< / mi > < mi > c< / mi > < / mrow > < / msqrt > < / mrow > < mrow > < mn > 2< / mn > < mi > a< / mi > < / mrow > < / mfrac > < / mrow > < annotation encoding = "application/x-tex" > x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
< / annotation > < / semantics > < / math > < / span > < span class = "katex-html" aria-hidden = "true" > < span class = "base" > < span class = "strut" style = "height:0.43056em;vertical-align:0em;" > < / span > < span class = "mord mathdefault" > x< / span > < span class = "mspace" style = "margin-right:0.2777777777777778em;" > < / span > < span class = "mrel" > =< / span > < span class = "mspace" style = "margin-right:0.2777777777777778em;" > < / span > < / span > < span class = "base" > < span class = "strut" style = "height:2.276389em;vertical-align:-0.686em;" > < / span > < span class = "mord" > < span class = "mopen nulldelimiter" > < / span > < span class = "mfrac" > < span class = "vlist-t vlist-t2" > < span class = "vlist-r" > < span class = "vlist" style = "height:1.590389em;" > < span style = "top:-2.314em;" > < span class = "pstrut" style = "height:3em;" > < / span > < span class = "mord" > < span class = "mord" > 2< / span > < span class = "mord mathdefault" > a< / span > < / span > < / span > < span style = "top:-3.23em;" > < span class = "pstrut" style = "height:3em;" > < / span > < span class = "frac-line" style = "border-bottom-width:0.04em;" > < / span > < / span > < span style = "top:-3.677em;" > < span class = "pstrut" style = "height:3em;" > < / span > < span class = "mord" > < span class = "mord" > − < / span > < span class = "mord mathdefault" > b< / span > < span class = "mspace" style = "margin-right:0.2222222222222222em;" > < / span > < span class = "mbin" > ±< / span > < span class = "mspace" style = "margin-right:0.2222222222222222em;" > < / span > < span class = "mord sqrt" > < span class = "vlist-t vlist-t2" > < span class = "vlist-r" > < span class = "vlist" style = "height:0.913389em;" > < span class = "svg-align" style = "top:-3em;" > < span class = "pstrut" style = "height:3em;" > < / span > < span class = "mord" style = "padding-left:0.833em;" > < span class = "mord" > < span class = "mord mathdefault" > b< / span > < span class = "msupsub" > < span class = "vlist-t" > < span class = "vlist-r" > < span class = "vlist" style = "height:0.740108em;" > < span style = "top:-2.9890000000000003em;margin-right:0.05em;" > < span class = "pstrut" style = "height:2.7em;" > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > 2< / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = "mspace" style = "margin-right:0.2222222222222222em;" > < / span > < span class = "mbin" > − < / span > < span class = "mspace" style = "margin-right:0.2222222222222222em;" > < / span > < span class = "mord" > 4< / span > < span class = "mord mathdefault" > a< / span > < span class = "mord mathdefault" > c< / span > < / span > < / span > < span style = "top:-2.873389em;" > < span class = "pstrut" style = "height:3em;" > < / span > < span class = "hide-tail" style = "min-width:0.853em;height:1.08em;" > < svg width = '400em' height = '1.08em' viewBox = '0 0 400000 1080' preserveAspectRatio = 'xMinYMin slice' > < path d = 'M95,702
c-2.7,0,-7.17,-2.7,-13.5,-8c-5.8,-5.3,-9.5,-10,-9.5,-14
c0,-2,0.3,-3.3,1,-4c1.3,-2.7,23.83,-20.7,67.5,-54
c44.2,-33.3,65.8,-50.3,66.5,-51c1.3,-1.3,3,-2,5,-2c4.7,0,8.7,3.3,12,10
s173,378,173,378c0.7,0,35.3,-71,104,-213c68.7,-142,137.5,-285,206.5,-429
c69,-144,104.5,-217.7,106.5,-221
l0 -0
c5.3,-9.3,12,-14,20,-14
H400000v40H845.2724
s-225.272,467,-225.272,467s-235,486,-235,486c-2.7,4.7,-9,7,-19,7
c-6,0,-10,-1,-12,-3s-194,-422,-194,-422s-65,47,-65,47z
M834 80h400000v40h-400000z'/>< / svg > < / span > < / span > < / span > < span class = "vlist-s" > < / span > < / span > < span class = "vlist-r" > < span class = "vlist" style = "height:0.12661100000000003em;" > < span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = "vlist-s" > < / span > < / span > < span class = "vlist-r" > < span class = "vlist" style = "height:0.686em;" > < span > < / span > < / span > < / span > < / span > < / span > < span class = "mclose nulldelimiter" > < / span > < / span > < / span > < / span > < / span > < / span >
< / figure >
< p > This feature is still experimental, but I find it handy for my books.< / p >
< div class = "next-chapter" >
< a href = "../02-markdown/05-images.html" >
< span > Next chapter: “Images”< / span >
< span class = "icon" >
< svg class = "icon-arrow-right" >
< use xlink:href = "../icons.svg#icon-arrow-right" >
< / svg >
< / span >
< / a >
< / div >
< footer > < p > © 2019 Kenton Hamaluik< / p > < / footer >
< / article >
< / body >
< / html >
