\documentclass[a4paper]{article} \usepackage{amsmath} \usepackage{amssymb} \usepackage[top=2cm,left=2.54cm,bottom=2cm,right=2.54cm]{geometry} \usepackage{parskip} \usepackage{chngpage} \usepackage{color} \usepackage[pdftitle={Typesetting equations},% pdfauthor={Steve Mayer},% pdfkeywords={KaTeX},% pdfsubject={KaTeX},% pdfstartview=FitH,% colorlinks=true,% urlcolor=blue,% linkcolor=blue,% bookmarks=true% ]{hyperref} % Define \KaTeX, copied from % https://github.com/Khan/KaTeX/blob/master/test/screenshotter/test.tex \DeclareRobustCommand{\KaTeX}{\mbox{% K\kern-.26em% {\sbox0 T\vbox to\ht0{\kern.05em\hbox% {\fontsize{.75em}{1em}\selectfont A}% \vss}}% \kern-.23em% \TeX}} \let\oldsubsection\subsection \renewcommand{\subsection}[1]{\pdfbookmark{#1}{subsec:#1}\oldsubsection*{#1}} \begin{document} \begin{minipage}[t]{0.8\textwidth} \section*{Simple guide to using $\KaTeX$} \end{minipage} \begin{minipage}[t]{0.2\textwidth} \href{http://sixthform.info/katex/guide.html}{HTML version}\\ \href{http://sixthform.info/katex/guide.tex}{LaTeX file}\\ \href{http://sixthform.info/katex/smrender.js}{JavaScript file}\\ \href{http://sixthform.info/katex/examples/demo.html}{Katex Live Demo} \end{minipage} \subsection{Requirements} This shows how to use $\KaTeX$ using pure JavaScript without installing extra programs, so will work on any machine. \begin{enumerate} \item katex files in \href{https://github.com/khan/katex/releases}{GitHub KaTeX Downloads}, katex.zip or katex.tnar.gz\\ You only need katex.min.css, katex.min.js and the fonts and images folders (see \href{https://github.com/Khan/KaTeX/wiki/Font-Options}{Font Options)} \\ Alternatively you can include the files from Cloudflare CDN (see \href{https://github.com/Khan/KaTeX/blob/master/README.md#usage}{README.md}). \item smrender.js \end{enumerate} \begin{adjustwidth}{1em}{} \textbf{Firefox Fonts}\\ Firefox possibly might not allow the fonts folder to be in a separate directory.\\ \emph{Either}\\ \hspace*{1em} put a copy of katex.min.css and the fonts folder in the same directory as the HTML document \\ \footnotesize \hspace*{1.3em} Note that, from Firefox 68, this won't work if the file is a local one so URI is \texttt{file:///},\\ \hspace*{1.3em} See \href{https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp}{Reason: CORS request not HTTP}. In this case use katex.min.css from the CDN \href{https://github.com/Khan/KaTeX/blob/master/README.md}{README.md}.\normalsize\\ \emph{or}\\ \hspace*{1em} use one of the solutions at \href{https://zinoui.com/blog/cross-domain-fonts}{Cross Domain Fonts} \end{adjustwidth} \subsection{Implementation} (Taken from \hyperlink{ref2}{[2]} If you have only a few equations on your page, you can proceed as follows: \begin{verbatim} ... \end{verbatim} which gives $f(a,b,c) = (a^2+b^2+c^2)^3$ This will place the equation into your Web page, as properly rendered maths. A second equation would need a new id on the span, and in the script, like this: \begin{verbatim} ... \end{verbatim} $f(a,b,c) = (a^2+b^2+c^2)^3$ \subsection{Autorendering} If you have lots of equations on the page you need auto-rendering which renders the equations inside prescribed delimiters (Katex does have an autorendering plugin in the contrib subfolder you may wish to use). The work is done by \emph{smrender.js} (see \hyperlink{jsfile}{below}) following an idea from \hyperlink{ref2}{[2]} and there are two rendering modes: \subsubsection*{Displayed formula} The following alternatives have the same effect \begin{verbatim}
...<
\end{verbatim}
\subsection{Examples}
\subsubsection*{Displayed formula}
Aligned at equals sign
\begin{verbatim}
\begin{aligned}
\int_0^1\frac{x^4(1-x)^4}{1+x^2}\,dx &=\frac{22}{7}-\pi\\ \\
\int_{-\infty}^\infty e^{-x^2}\,dx &=\sqrt{\pi}
\end{aligned}
\end{verbatim}
\[
\begin{aligned}
\int_0^1\frac{x^4(1-x)^4}{1+x^2}\,dx &=\frac{22}{7}-\pi\\ \\
\int_{-\infty}^\infty e^{-x^2}\,dx &=\sqrt{\pi}
\end{aligned}
\]
\subsubsection*{Inline formula}
$\int_{-\infty}^\infty e^{-x^2}\,dx =\sqrt{\pi}$ is a well-known result.
Formulae can be on more than one line
\begin{verbatim}
$\sum_{i=1}^\infty\frac{1}{n^2}
=\frac{\pi^2}{6}$
\end{verbatim}
gives $\sum_{i=1}^\infty\frac{1}{n^2}=\frac{\pi^2}{6}$
\subsection{Errors}
$\KaTeX$ errors are shown in red. For example, wrong spelling of \verb=\infty=:
\begin{verbatim}
\[
\int_{-\infinity}^\infinity e^{-x^2}\,dx &=\sqrt{\pi}
\]
\end{verbatim}
\color{red}
\begin{verbatim}
ParseError: KaTeX parse error: Expected '}', got '\infinity' at position
16: int_{-\infinity̲}^\infinity e^
\end{verbatim}
\normalcolor
Errors should not stop rendering of further correct formulae: $|x|=\begin{cases} \phantom{-}x,&x\ge0,\\ -x,&x<0. \end{cases}$
\newcommand{\lt}{<}
\begin{adjustwidth}{1em}{}
\textbf{Note}\\
Using less than signs before a letter such as \verb=a
\end{verbatim}
to the head element and works in most browsers, though not Edge or Internet Explorer. You can try it with the formul\ae\ on this page.
See \href{https://github.com/Khan/KaTeX/tree/master/contrib/copy-tex}{Copy-tex extension} for full details.
\pdfbookmark{KaTeX Commands}{subsec: KaTeX Commands}
\oldsubsection*{$\KaTeX$ Commands}
These are listed in KaTeX's Wiki at Function Support in KaTeX
\href{http://folk.uib.no/plo092/katex}{Sample KaTeX Document} and its source code show how to implement automatic equation numbering, referencing and bibliography numbering.
\subsection{Minimal autorender page}
\begin{verbatim}