### Install, Build, and Test LaTeX.js
Source: https://github.com/michael-brade/latex.js/blob/master/docs/extending.md
Commands to install dependencies, build the project (or develop build), and run unit tests.
```sh
npm install
npm run build # or devbuild
npm test
```
--------------------------------
### TeX Macro Expansion Example
Source: https://github.com/michael-brade/latex.js/blob/master/docs/limitations.md
Illustrates the difference between macro expansion and direct execution in TeX. This example shows how a macro definition and its subsequent call can lead to different output compared to directly typesetting the expanded content.
```tex
\def\a{\penalty200}
\a 0
```
```tex
\penalty200 0
```
```tex
\penalty2000
```
```tex
\a0
```
--------------------------------
### Install LaTeX.js Globally for CLI Usage
Source: https://github.com/michael-brade/latex.js/blob/master/README.md
Install the package globally to use its command-line interface. This command is for users who want to run latex.js directly from their terminal.
```bash
npm install -g latex.js
```
--------------------------------
### Macro definition and expansion example in TeX
Source: https://github.com/michael-brade/latex.js/blob/master/docs/limitations.md
This example demonstrates how macro definitions and expansions in TeX can lead to dynamic scoping and complicate static analysis. The behavior of '\app a b' versus '\app \id c' depends on runtime definitions.
```tex
\def\app #1 #2 {#1 #2}
\def\id #1 {#1}
\app a b
\app \id c
```
--------------------------------
### Embed latex.js as a Web Component
Source: https://github.com/michael-brade/latex.js/blob/master/docs/usage.md
Integrate latex.js into an HTML page using the custom 'latex-js' web component. This example shows basic setup and usage with different attributes.
```html
LaTeX.js Web Component Test
Compiling LaTeX
\documentclass{article}
\begin{document}
Hello World.
\end{document}
Another.
```
--------------------------------
### Define and Register LaTeX.js Web Component
Source: https://github.com/michael-brade/latex.js/blob/master/test/api/webcomponent.module.html
Import the LaTeXJSComponent and define it as a custom element. This is the basic setup required to use the component in your HTML.
```javascript
import { LaTeXJSComponent } from "./latex.mjs"
customElements.define("latex-js", LaTeXJSComponent)
```
--------------------------------
### Get Styles and Scripts
Source: https://github.com/michael-brade/latex.js/blob/master/docs/api.md
Returns a DocumentFragment containing link and script elements for the document head. Absolute or relative URLs are used based on the baseURL parameter.
```javascript
htmlGenerator.stylesAndScripts(baseURL)
```
--------------------------------
### Basic LaTeX Document Compilation
Source: https://github.com/michael-brade/latex.js/blob/master/test/api/webcomponent.module.html
Example of a simple LaTeX document structure that can be compiled by the LaTeX.js Web Component. This demonstrates the minimal content required for rendering.
```latex
\documentclass[16pt]{article}
\begin{document}
Hello World.
\texttt{homecoming}
configuring components environments playground
\end{document}
```
--------------------------------
### Install LaTeX.js as a Project Dependency
Source: https://github.com/michael-brade/latex.js/blob/master/README.md
Add latex.js as a dependency to your project for library usage. This command is for developers integrating latex.js into their JavaScript applications.
```bash
npm install --save-prod latex.js
```
--------------------------------
### Use latex.js Parser and Generator in the Browser via CDN
Source: https://github.com/michael-brade/latex.js/blob/master/docs/usage.md
Example of using latex.js in a browser by directly linking to the CDN. This method is convenient for quick testing but requires careful management of styles and scripts to avoid conflicts.
```html
LaTeX.js Browser Test
```
--------------------------------
### Define LaTeX.js Web Component
Source: https://github.com/michael-brade/latex.js/blob/master/test/api/webcomponent.html
Defines the custom element 'latex-js' using the LaTeXJSComponent class. This is the primary setup for using the web component.
```javascript
customElements.define("latex-js", latexjs.LaTeXJSComponent)
```
--------------------------------
### Get Document Title
Source: https://github.com/michael-brade/latex.js/blob/master/docs/api.md
Retrieves the title of the document.
```javascript
htmlGenerator.documentTitle()
```
--------------------------------
### Define Macro Arguments
Source: https://github.com/michael-brade/latex.js/blob/master/docs/extending.md
Configure a macro's arguments and type. This example defines the 'title' macro as a horizontal-vertical mode macro that accepts one mandatory group argument.
```javascript
args['title'] = ['HV', 'g'];
```
--------------------------------
### Get DOM Fragment
Source: https://github.com/michael-brade/latex.js/blob/master/docs/api.md
Returns the DOM DocumentFragment without scripts and stylesheets. This is primarily for testing and low-level embedding.
```javascript
htmlGenerator.domFragment()
```
--------------------------------
### Define Custom Macros in JavaScript
Source: https://github.com/michael-brade/latex.js/blob/master/docs/extending.md
Example of defining custom LaTeX macros in JavaScript by extending the HtmlGenerator. This snippet shows how to define a '\bf' macro for setting font weight.
```javascript
var generator = new latexjs.HtmlGenerator({
CustomMacros: (function() {
var args = CustomMacros.args = {},
prototype = CustomMacros.prototype;
function CustomMacros(generator) {
this.g = generator;
}
args['bf'] = ['HV']
prototype['bf'] = function() {
this.g.setFontWeight('bf')
};
return CustomMacros;
}())
});
```
--------------------------------
### Get Full HTMLDocument
Source: https://github.com/michael-brade/latex.js/blob/master/docs/api.md
Retrieves the full HTMLDocument representation, including head and body. This is suitable for standalone web pages or iframes. The baseURL parameter sets the base for scripts and stylesheets.
```javascript
htmlGenerator.htmlDocument(baseURL)
```
--------------------------------
### Build Documentation and Playground
Source: https://github.com/michael-brade/latex.js/blob/master/docs/extending.md
Command to build the website, which includes the playground for LaTeX.js.
```sh
npm run docs
```
--------------------------------
### CLI Options for latex.js
Source: https://github.com/michael-brade/latex.js/blob/master/docs/usage.md
This displays the available command-line options for the latex.js CLI. Use these flags to customize output, asset handling, and more.
```bash
Usage: latex.js [options] [files...]
JavaScript LaTeX to HTML5 translator
Options:
-V, --version output the version number
-o, --output specify output file, otherwise STDOUT will be used
-a, --assets [dir] copy CSS and fonts to the directory of the output file, unless dir is given (default: no assets are copied)
-u, --url set the base URL to use for the assets (default: use relative URLs)
-b, --body don't include HTML boilerplate and CSS, only output the contents of body
-e, --entities encode HTML entities in the output instead of using UTF-8 characters
-p, --pretty beautify the html (this may add/remove spaces unintentionally)
-c, --class set a default documentclass for documents without a preamble (default: article)
-m, --macros load a JavaScript file with additional custom macros
-s, --stylesheet specify an additional style sheet to use (can be repeated)
-n, --no-hyphenation don't insert soft hyphens (disables automatic hyphenation in the browser)
-l, --language set hyphenation language (default: en)
-h, --help output usage information
If no input files are given, STDIN is read.
```
--------------------------------
### Instantiate HtmlGenerator
Source: https://github.com/michael-brade/latex.js/blob/master/docs/api.md
Creates a new HTML generator. Options can include documentClass, CustomMacros, hyphenate, languagePatterns, and styles.
```javascript
new HtmlGenerator(options)
```
--------------------------------
### Use latex.js Parser and Generator in Node.js (ES Module)
Source: https://github.com/michael-brade/latex.js/blob/master/docs/usage.md
Demonstrates how to import and use the latex.js parser and HTML generator within a Node.js environment using ES module syntax. This provides low-level control over the translation process.
```javascript
import { Parser } from "latex.js"
import { HtmlGenerator } from "latex.js/dist/html-generator.mjs"
const parser = new Parser()
const generator = new HtmlGenerator({
// see API section below for options
})
const ast = parser.parse("\\documentclass{article}\\n\\begin{document}
Hello World.
\\end{document}")
const html = generator.build(ast)
console.log(html)
```
--------------------------------
### Compile LaTeX to HTML in Browser
Source: https://github.com/michael-brade/latex.js/blob/master/test/api/browser.html
Parses a LaTeX string and appends the generated HTML and necessary styles/scripts to the document. Ensure the latex.js library is included in your project.
```javascript
var text = "Hi, this is a line of text."
var generator = new latexjs.HtmlGenerator({ hyphenate: false })
generator = latexjs.parse(text, { generator: generator })
// document.head.appendChild(generator.stylesAndScripts("https://cdn.jsdelivr.net/npm/latex.js@0.12.4/dist/"))
document.head.appendChild(generator.stylesAndScripts(""))
document.body.appendChild(generator.domFragment())
```
--------------------------------
### htmlGenerator.stylesAndScripts
Source: https://github.com/michael-brade/latex.js/blob/master/docs/api.md
Returns a DocumentFragment containing and