artmenlope / latex-to-github-app

A small app that allows to have LaTeX math in GitHub Markdown README files, for example. Converts LaTeX code to HTML math code readable by GitHub.

News from GitHub's changelog (May 19, 2022):

You can now use LaTeX style syntax to render math expressions within Markdown inline (using $ delimiters) or in blocks (using $$ delimiters).

You can read the official changelog post here and read the tutorial here.

latex-to-github-app

This is a small app for converting LaTeX code to a format readable by GitHub's Markdown using source URLs. It is written in Python 3.

It was inspired by the solutions provided by Alexander Rodin (username: a-rodin) at:

https://gist.github.com/a-rodin/fef3f543412d6e1ec5b6cf55bf197d7b

Please, remember to read the Notes.

Table of contents

• Required packages
• The GUI
• GUI explanation
• Example
• Minimalistic Jupyter notebook
• Notes
• To do

---

Required packages

The required Python packages are:

• tkinter
• urllib
• PIL (to import Image and ImageTk)
• io (to import BytesIO)
• cairosvg

---

The GUI

The GUI looks like this:

Windows 10	Ubuntu 20.04 LTS

---

GUI explanation

■ You can write your LaTeX formula in the frame under the label "Write yout LaTeX code:". Pressing the "Convert LaTeX code" left button under the LaTeX input frame a HTML code is generated. This code can be pasted into a GitHub README.md file so the desired formula can be generated. It is asumed that the input is already in math mode. You can also start writing in the LaTeX frame as soon as the app is opened.

■ The frame under the "The HTML result is:" label is where the resulting HTML code will be shown. The code will have the following form:

<img src="https://render.githubusercontent.com/render/math?math=--Formatted formula here--">

■ The frame under the "The GitHub URL result is:" label will show the URL for GitHub to render the math formula. You can paste this URL in the adress bar of your web browser to view the resulting formula. This URL is already inside the HTML code and has the following aspect:

https://render.githubusercontent.com/render/math?math=--Formatted formula here--

■ In this app you can also view the result from the URL if internet connection is available. Keeping the "View image" checkbutton below the input frame checked, the formula can ve viewed on the "Image:" canvas on the lower right.

■ After having obtained results like in the animation above, if you want to write a different LaTeX code you can just delete the old LaTeX code and write again. Don't worry about the output, it will be overwritten.

---

Example

In the following image you can see an example of input and output:

Then, you can copy and paste the resulting HTML code, for example, in your README.md file like the following if you want to obtain a centered equation:

<p align="center">
<img src="https://render.githubusercontent.com/render/math?math=%5Cmathbf%7BR_z%7D(%5Ctheta)%0A%3D%0A%5Cbegin%7Bpmatrix%7D%0A%5Ccos%5Ctheta%20%26%20-%5Csin%5Ctheta%20%26%200%20%5C%5C%5B2ex%5D%0A%5Csin%5Ctheta%20%26%20%20%5Ccos%5Ctheta%20%26%200%20%5C%5C%5B2ex%5D%0A0%20%20%20%20%20%20%20%20%20%20%26%20%200%20%20%20%20%20%20%20%20%20%20%26%201%0A%5Cend%7Bpmatrix%7D%0A">
</p>

The result of the previous HTML code will be:

---

Minimalistic Jupyter notebook

In this repository there is also included a minimalistic Jupyter notebook with the essential functionality of the code: translating from LaTeX to HTML readable by the GitHub math renderer. This notebook only requires the urllib package. The code is the following:

import urllib

# Write your LaTeX code here.
string = \
r"""
\begin{cases}
a & = b \\[3ex]
a & = b
\end{cases}
"""[1:-1] # Delete initial and final \n line jumps.

encoded_string = urllib.parse.quote(str(string).encode("utf-8"), safe="~()*!.\"")
github_url = "https://render.githubusercontent.com/render/math?math=" + encoded_string
html_result = '<img src="' + github_url + '">'

print("GitHub URL:\n\n", github_url, "\n\nHTML result:\n\n", html_result)

You can try Jupyter in your browser without installing anything at https://jupyter.org/try. There, you can create a new notebook and run the code snippet above.

---

Notes

This small app was developed in Windows 10 using the Spyder IDE. It has also been tested on Ubuntu 20.04 LTS.

At the current state of development you will need to install the needed packages and run the latex-to-github-app.py script if you want to use the app.

To do:

• Make a reset button.
• Make a mouse right click menu for copying and pasting.
• Test in Ubuntu.
• Make an executable file app.

latex-to-github-app's Issues

GUI doesn't display error message

While trying to confirm #1 was fixed, I got the following error on the terminal.

Exception in Tkinter callback
Traceback (most recent call last):
  File "E:\repos\latex-to-github-app\latex-to-github-app.py", line 188, in show_image
    self.page = urllib.request.urlopen(self.github_url).read()
  File "C:\Users\anton\anaconda3\envs\latex2github\lib\urllib\request.py", line 214, in urlopen
    return opener.open(url, data, timeout)
  File "C:\Users\anton\anaconda3\envs\latex2github\lib\urllib\request.py", line 523, in open
    response = meth(req, response)
  File "C:\Users\anton\anaconda3\envs\latex2github\lib\urllib\request.py", line 632, in http_response
    response = self.parent.error(
  File "C:\Users\anton\anaconda3\envs\latex2github\lib\urllib\request.py", line 561, in error
    return self._call_chain(*args)
  File "C:\Users\anton\anaconda3\envs\latex2github\lib\urllib\request.py", line 494, in _call_chain
    result = func(*args)
  File "C:\Users\anton\anaconda3\envs\latex2github\lib\urllib\request.py", line 641, in http_error_default
    raise HTTPError(req.full_url, code, msg, hdrs, fp)
urllib.error.HTTPError: HTTP Error 500: Internal Server Error

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "C:\Users\anton\anaconda3\envs\latex2github\lib\tkinter\__init__.py", line 1884, in __call__
    return self.func(*args)
  File "E:\repos\latex-to-github-app\latex-to-github-app.py", line 178, in encodeLaTeX
    self.show_image()
  File "E:\repos\latex-to-github-app\latex-to-github-app.py", line 205, in show_image
    tk.messagebox.showerror(title="HTTPError", message="An error occurred while trying to show the image.\n\nPlease, check for typos in your LaTeX code.")
AttributeError: module 'tkinter' has no attribute 'messagebox'

I think messagebox does not always get automatically imported with import tkinter, as shown here.

Adding KaTex to @stromlight , my GitHub account,I was requesting permission for my issue run,

First GitHub is my mother code playing hub and I had project heare to build an wep app , with GitHub I used Google Developer, Azure, office 365 as major contributing app ,and for this app i found to code for mathmatical formula LaTex is good platform,so if you like to contribute on my project ,plase merge this.....

feat: Show image status in the GUI

The GUI could have an indicator/text to tell the user it failed to show an image.

It could also suggest the user check for typos in the Latex code.

For example, if the user wants to convert this code with a typo:

\begin{bmatrix}
x \\
y \\
z
\end{bmatrx}

The GUI will not show the image without an explanation.

However, the terminal shows the tool failed to show the image.

Exception in Tkinter callback
Traceback (most recent call last):
  File "C:\Users\anton\anaconda3\envs\latex2github\lib\tkinter\__init__.py", line 1884, in __call__
    return self.func(*args)
  File "E:\repos\latex-to-github-app\latex-to-github-app.py", line 177, in encodeLaTeX
    self.show_image()
  File "E:\repos\latex-to-github-app\latex-to-github-app.py", line 186, in show_image
    self.page = urllib.request.urlopen(self.github_url).read()
  File "C:\Users\anton\anaconda3\envs\latex2github\lib\urllib\request.py", line 214, in urlopen
    return opener.open(url, data, timeout)
  File "C:\Users\anton\anaconda3\envs\latex2github\lib\urllib\request.py", line 523, in open
    response = meth(req, response)
  File "C:\Users\anton\anaconda3\envs\latex2github\lib\urllib\request.py", line 632, in http_response
    response = self.parent.error(
  File "C:\Users\anton\anaconda3\envs\latex2github\lib\urllib\request.py", line 561, in error
    return self._call_chain(*args)
  File "C:\Users\anton\anaconda3\envs\latex2github\lib\urllib\request.py", line 494, in _call_chain
    result = func(*args)
  File "C:\Users\anton\anaconda3\envs\latex2github\lib\urllib\request.py", line 641, in http_error_default
    raise HTTPError(req.full_url, code, msg, hdrs, fp)
urllib.error.HTTPError: HTTP Error 500: Internal Server Error