Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jcbhmr/ezlatexpage
📄 Write LaTeX in a .html file without build tools or an HTTP server
https://github.com/jcbhmr/ezlatexpage
html latex offline-capable plaintext renderer tex
Last synced: about 2 months ago
JSON representation
📄 Write LaTeX in a .html file without build tools or an HTTP server
- Host: GitHub
- URL: https://github.com/jcbhmr/ezlatexpage
- Owner: jcbhmr
- License: mit
- Created: 2023-02-28T20:00:25.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-03T18:36:22.000Z (10 months ago)
- Last Synced: 2024-10-27T11:19:29.325Z (3 months ago)
- Topics: html, latex, offline-capable, plaintext, renderer, tex
- Language: HTML
- Homepage: https://jcbhmr.me/ezlatexpage
- Size: 271 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Local HTML LaTeX environment
📄 Write LaTeX in a `.html` file without build tools or an HTTP server
[Storybook]()
| [Playground]()
## Installation
Just add the following to the top of your `.html` file! Oh, and **make sure you
disable any autoformatters** like Prettier! They'll auto-close tags and mess
with your indentation.
```html
```
💡 You may want to name your HTML file something like `My_Article.tex.html` and
then set your editor to use TeX syntax highlighting for `*.tex.html` files.
You can also inline the entire codebase into that `` tag using [Inliner]
on an existing HTML page.
```sh
inliner My_Article.tex.html | sponge My_Article.tex.html
```
## Usage
### Example
```tex
<script src="https://esb.deno.dev/format=iife/https://esm.sh/@htmlocal/latex">
\documentclass{article}
\title{Example \LaTeX\ document}
\begin{document}
\maketitle
\begin{abstract}
This is an example document with very little content.
\end{abstract}
\end{document}
```
## How it works
The single `` tag is the magic thing that makes the entire system work.
This project is designed to work with local `file:///C:/My_Article.tex.html`
files, so we need to use the non-CORS strategy of using a classic
non-`type="module"` script tag. This has the added benefit of letting us
pre-inject some CSS and/or `document.write()` some HTML tags to change how the
rest of the document is processed.
1. The HTML parser encounters a `<script>` tag.
2. The browser downloads the `<script>` tag _synchronously_ without continuing
parsing. Then, it executes it.
3. We check to make sure that this document fits the expected form (no other
elements). If there are extra elements, we do nothing and `console.error()`.
4. We do `document.write("<plaintext>")` to make everything after this
`<script>` **not** be parsed as HTML.
5. After the document has finished parsing we get the content of the
`<plaintext>` element and parse it as LaTeX. The `<plaintext>` prefix is
removed.
6. After getting a valid HTML document from the LaTeX, we hydrate the existing
HTML DOM tree with them. This includes things like `<title>`, CSS (bundled
with the JavaScript code), `<meta>` tags, etc.
7. We `console.info()` a helpful guide to use `save()` in the JavaScript console
to download a copy of the compiled HTML.
In particular, we hide the entire document with
`document.documentElement.style.setProperty("display", "none", "important")` and
do `document.write("<plaintext>")` to make sure that the rest of the document is
preserved entirely as-is with absolutely no HTML parsing that might eat some
critical whitespace. We also make sure to show a loading bar at the top like
GitHub does as we are processing things.
## Development
This project uses Storybook to test the UI elements of the project. We use
TypeScript to write the source code and Vite to bundle it into an ES module for
publishing to npm. We expect consumers to bundle the ESM build to UMD
themselves.
[inliner]: https://github.com/remy/inliner#readme