LaTeXSwiftUI

A SwiftUI view that renders LaTeX.

📖 Contents

• Installation
• Usage
  • Modifiers
    • Parsing Mode
    • Image Rendering Mode
    • Error Mode
    • Block Rendering Mode
    • Unencode HTML
    • TeX Options
  • Caching
  • Preloading

📦 Installation

Add the dependency to your package manifest src="https://raw.github.com/colinc86/LaTeXSwiftUI/main/

.package(url: "https://github.com/colinc86/LaTeXSwiftUI", from: "1.0.4")

⌨️ Usage

Import the package and use the view.

import LaTeXSwiftUI

struct MyView: View {

  var body: some View {
    LaTeX("Hello, $\\LaTeX$!")
  }

}

⚙️ Modifiers

The LaTeX view's body is built up of Text views so feel free to use any of the supported modifiers.

LaTeX("Hello, $\\LaTeX$!")
  .fontDesign(.serif)
  .foregroundColor(.blue)

Along with supporting the built-in SwiftUI modifies, LaTeXSwiftUI defines more to let you configure the view.

🔤 Parsing Mode

LaTexSwiftUI can parse and render equations (aside frsrc="https://raw.github.com/colinc86/LaTeXSwiftUI/main/e entire input string) defined with the following terminators.

Text input can either be completely rendered, or LaTeXSwiftUI can search for top-level equations. The default behavior is to only render equations with onlyEquations. Use the parsingMode modifier to change the default behavior.

// Parse the entire input
LaTeX("e^{i\\pi}+1=0")
  .parsingMode(.all)

#src="https://raw.github.com/colinc86/LaTeXSwiftUI/main/🌄 Image Rendering Mode

You can specify the rendering mode of the rendered equations so that they either take on the style of the surrounding text or display the style rendered by MathJax. The default behavior is to use the template rendering mode so that images match surrounding text.

// Render images to match the surrounding text
LaTeX("Hello, $\\color{red}\\LaTeX$!")
  .imageRenderingMode(.template)

// Display the original rendered image
LaTeX("Hello, ${\\color{red} \\LaTeX}$!")
  .imageRenderingMode(.originalsrc="https://raw.github.com/colinc86/LaTeXSwiftUI/main/

> <img style="max-width:100%;" src="./assets/images/rendering_mode.png" width="84.5" height="43">

#### 🚨 Error Mode

When an error occurs while parsing the input the view will display the original LaTeX. You can change this behavior by modifying the view's `errorMode`.

```swift
// Display the original text instead of the equation
LaTeX("$\\asdf$")
  .errorMode(.original)

// Display the error text instead of the equation
LaTeX("$\\asdf$")
  .errorMode(.error)

// Display the rendered image (if available)
LaTeX("$\\asdf$")
  .errorMode(.rendered)

🧱 Block Rendering Mode

The typical "LaTeX-ish" way to render the input is with blockViews. This mode renders text as usual, and block equations as... blocks; on their own line and centered. MathJax 3 does not support line breaking, so the view places block equations in horizontal scroll views in case the width of the equation is more than the width of the view.

In the case that you want to force block equations as inline, you can use the alwaysInline mode. You can also keep block styling with blockText, but the blocks will not be centered in their views. These modes can be helpful if you have a lengthy input string and need to only display it on a single or few lines.

/// The default block mode 
LaTeX("The quadratic formusrc="https://raw.github.com/colinc86/LaTeXSwiftUI/main/ $$x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}$$ and it has zeros at the roots of $f(x)=ax^2+bx+c$.")
  .blockMode(.blockViews)

Divider()

/// Force blocks to render as inline
LaTeX("The quadratic formula is $$x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}$$ and it has zeros at the roots of $f(x)=ax^2+bx+c$.")
  .blockMode(.alwaysInline)

Divider()

/// Force blocks to rendersrc="https://raw.github.com/colinc86/LaTeXSwiftUI/main/ext with newlines
LaTeX("The quadratic formula is $$x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}$$ and it has zeros at the roots of $f(x)=ax^2+bx+c$.")
  .blockMode(.blockText)

🔗 Unencode HTML

Input may contain HTML entities such as < which will not be parsed by LaTeX as anything meaningful. In this case, you may use the unencoded modifier.

LaTeX("$x^2<1$")
  .errorMode(.error)

// Replace "lt;" with "<"
LaTeX("$x^2&lt;1$")
  .unencoded()

♾️ TeX Options

For more control over the MathJax rendering, you can pass a TeXInputProcessorOptions object to the view.

LaTeX("Hello, $\\LaTeX$!")
  .texOptions(TeXInputProcessorOptions(loadPackages: [TeXInputProcessorOptions.Packages.base]))

🗄️ Caching

LaTeXSwiftUI caches its SVG responses from MathJax and the images rendered as a result of the view's environment. If you want to control the cache, then you can access the static cache property.

The caches are managed automatically, but if, for example, you wanted to clear the cache manually you may do so.

// Clear the SVG data cache.
LaTeX.dataCache?.removeAll()

// Clear the rendered image cache.
LaTeX.imageCache.removeAll()

LaTeXSwiftUI uses the caching components of the Nuke package.

🏃‍♀️ Preloading

SVGs and images are rendered and cached on demand, but there may be situations where you want to preload the data so that there is minimal lag when the view appears.

VStack {
  ForEach(expressions, id: \.self) { expression in
    LaTeX(expression)
      .preload()
  }
}