/latex-preview-container

A web IDE akin to Overleaf, featuring automatic LaTeX compilation and PDF preview.

Primary LanguageShellMIT LicenseMIT

ABOUT

This repository provides a Codespace environment for instantly and automatically building and previewing LaTeX files.

The initial goal was to develop a Visual Studio Code extension for building LaTeX files and previewing PDFs "on-the-fly" within the web IDE. However, this is impractical due to the following limitations:

  1. LaTeX processing relies on various packages and dependencies typically run in a local environment.
  2. Web IDEs have limited access to the file system and system-level utilities.

The optimal approach is to create an extension using a codespace with all necessary dependencies. However, using a Docker image with Codespaces remains the simplest and most reliable solution for me at the current moment.

HOW TO USE

CODESPACES:

  1. Fork or use this repository and click on Code.
  2. Click Create codespace on main.
  3. Wait 2-3 minutes for the codespace to finish building.
  4. Open latex/sample.tex.
  5. Click the green triangle or press Ctrl + Alt + B to build the LaTeX project.
  6. View sample.pdf in the latex/PDF directory.
  7. Customize the layout, e.g., 50% sample.tex and 50% sample.pdf.
  8. Changes to the .tex file will automatically rebuild and update the PDF preview.

Note

The initial PDF preview may take about 30 seconds to set up correctly. It will also open a new window for port forwarding. Once successful, this window can be closed.

GITPOD:

Can also use Gitpod to create an environment based on this repository, click here or use the link below:

https://gitpod.io/#https://github.com/jotavare/latex-preview-container/

Note

Unlike Codespaces, Gitpod offers instant PDF previews from the start. No waiting for the first time.

DOCKER IMAGE

The Docker image pulls the latest full version of TeX Live without documentation and source files, installs git and perl, and cleans unnecessary files, totalling 2.33GB. Depending on the project needs, other tags like minimal, small, or medium may also be used, to reduce codespaces build time.

FOLDER AND FILE STRUCTURE

latex-preview-container/
│
├── .devcontainer/
│   ├── devcontainer.json   # Configuration file for Codespaces devcontainer
│
├── docker/
│   ├── Dockerfile          # Dockerfile for setting up the development environment
│   ├── docker-compose.yml  # Docker Compose file for managing Docker containers
│
├── latex/
│   ├── sample.tex          # Sample LaTeX file for testing purposes
│
├── LICENSE                 # Licensing information for the project
└── README.md               # Project documentation

REFERENCES

Below are links I used to create this repository and other information that may be useful in the future.

Link Source
TeX Live Website
TeX Live Docker Image Website
Installing TeX Live Website
The Comprehensive TeX Archive Network Website
James-Yu/LaTeX-Workshop GitHub
PDFTeX Website
WebLaTex GitHub
TinyTeX Unix
MiKTeX Windows
MacTeX Macintosh

TYPST

Typst is a new markup-based typesetting system that is designed to be as powerful as LaTeX while being much easier to learn and use.

Link Source
Typst GitHub
Typst Setup GitHub
Typst Actions GitHub
Typst Live GitHub

FUTURE PLANS

  • Create a smaller and optimized Docker image with minimal tools for LaTeX, to build and preview PDF files.
  • Include new extensions in the devcontainer.json to enhance the workflow, such as grammar check, code formatting, Copilot, dark mode, etc.
  • Explore the LaTeX Workshop extension wiki to provide more features and utilities to the devcontainer.

CONTRIBUTING

If you find any issues or have suggestions for improvements, feel free to fork the repository and open an issue or submit a pull request.

LICENSE

This project is available under the MIT License. For further details, please refer to the LICENSE file.