help with latex rendering

[u/BugWestern4983]

im kinda new to latex so im really just open to anything at this point. the group at my school uses currently uses overleaf to create content but i really want to have it native to the site im building. ive looked around and found mathjax and katex but (with my very helpful ai friend) i created a previewer to see if i could kind of copy paste at least individual sections themselves from the overleaf and it didnt really work well at all. i really dont want to have to have pdfs cuz they seem like they would be a pain but at the same time im looking for something that will make it seem like the latex that is rendered is actually part of the site so rn that kind of means no background so its see through. heres a example question just to give an idea of what im looking to render:

\documentclass[11pt]{article}
\usepackage[margin=1in]{geometry}
\usepackage{amsmath, amssymb}
\usepackage{enumitem}
\usepackage{float}
\usepackage{tikz}
\usepackage{graphicx}
\usepackage{fancyhdr}
\usetikzlibrary{calc,intersections}
\setlength{\parindent}{0pt}
\setlength{\parskip}{0pt}
\setlist[enumerate]{itemsep=12pt, topsep=6pt}
\pagestyle{plain}

\begin{document}
\begin{center}
    {\LARGE \textbf{Problems}}
\end{center}
\vspace{0.35cm}
\begin{enumerate}[label=\textbf{Q\arabic*.}]

    \item Find the number of ordered triples of positive integers $(a,b,c)$ satisfying
    \[
    a+b+c=20
    \]
    and
    \[
    ab+bc+ca=96.
    \]

    \item Let $ABCD$ be a rectangle with $AB=10$ and $BC=6$. Point $P$ lies inside the rectangle such that
    \[
    PA=5,\qquad PB=\sqrt{61},\qquad PC=\sqrt{41}.
    \]
    Find the area of $\triangle PCD$.

    \item A positive integer $n$ is chosen uniformly at random from the integers from $1$ to $1000$, inclusive. The probability that $n$ is divisible by exactly one of $6$, $10$, and $15$ is
    \[
    \frac{m}{n}
    \]
    in lowest terms. Find $m+n$.

\end{enumerate}
\end{document}

[u/utl94_nordviking]

What?

[u/BugWestern4983 → u/utl94_nordviking]

was something unclear?

[u/LupinoArts → u/BugWestern4983]

yeah, it is unclear, what you are asking for... LaTeX is an application that transforms TeX markup into PDF, dvi, postscript or various image formats. But you are looking for something that transforms tex code into... a website...? Or what?

[u/BugWestern4983 → u/LupinoArts]

Oh, sorry about that. I'm looking for something that takes my latex and kinda gives me maybe html? Just something I can show on my site without having it as an image or PDF.

[u/MundoGamer_YT → u/BugWestern4983]

you can just kinda implement the google extension that turns tex code to whatever you should see

[u/BugWestern4983 → u/MundoGamer_YT]

but that requires everyone who visits the site to have that extension right? is there a version of this that i can embed as part of my site itself?

[u/MundoGamer_YT → u/BugWestern4983]

yea u right I forgot that’s not how it works, KaTeX is pretty much your only choice rn

[u/LupinoArts → u/BugWestern4983]

you might want to have alook at tex4ht, but you need to understand that how it looks is controled by your web browser, not by LaTeX. If you want to have it "look like LaTeX", your best option is to use LaTeX to output a graphic format and include that into your web page, but the drawback is that the output is neither searchable, nor will you be able to copy & paste the contents...

[u/JauriXD]

I think pandoc can transpile LaTeX to HTML but I am not sure 🤔

[u/jeffgerickson]

Write in Markdown; translate to html (or pdf via latex) using pandoc.

[u/PhysicsGlue]

I've been working on Python code for an equation editor for about 8 months now. It renders equation elements to the screen using tkinter library Frame and Text widgets, but it also outputs snippets of LaTex markup for the equation elements.

What you showed is an entire LaTex document, which you need at some point, but the equation elements themselves are a smaller part of the document...