How to render Jupyter Notebooks on Gitea - Blog

Announcements
1

Thu Apr 28, 2022 by HarvsG

This is a companion discussion topic for the original entry at https://blog.gitea.io/2022/04/how-to-render-jupyter-notebooks-on-gitea/
1 Like
2

Hi, this blog really helps me!
But there’s something different with my situation.

In app.ini, according to “None” appears when converting to HTML with “full” template #1652, full option already deprecated in jupyter/nbconvert for several versions. So RENDER_COMMAND shuold be like this:

RENDER_COMMAND = "jupyter nbconvert --stdout --to html --template classic"

And another thing, I added the jupyter.less to the site, the page shows well, but <html> and <head> tags still shows in the page. I have no idea about how can I handle this. Is there any way to correctly shows them or just remove them if they are useless?

image
image1431×808 46.1 KB

4

You should remove HTML, HEAD tags from you output. Or you can wait Allow render HTML with css/js external links by lunny · Pull Request #19017 · go-gitea/gitea · GitHub which introduce iframe to render the output.

1 Like
5

Thanks for helping.
According to your guide, I finally found out the solution to prevent this. in jupyter nbconvert, when using basic template, there will be no <head> or other tags in the output. Only have div tags in it. So after I changing it, the jupyter notebooks file rendering very well in my page. The config in app.ini should be like this:

RENDER_COMMAND = "jupyter nbconvert --stdout --to html --template basic"
6

Hello Lunny,

thank you for to detailed post.
Do you know how to customize Gitea further, such that the mathematical equations are also drawn by MathJax which are created automatically by Jupyter?

This was already discussed here (Katex/MathJax render) but the focus lies on Pandoc and Katex. Therefore that discussion is only a bit helpful for the Jupyter/MathJax case.

Anyhow if you know how to do it, do you mind updating your blog post. It might be helpful for a lot of people (including me).

Best Regards
Gilles

7

In case someone finds this post, as I did, looking for solutions to the problems I faced getting this to work, here’s what I had to do differently in version 1.16.5:

  1. I had to put my template file at $GITEA_CUSTOM/templates/custom/header.tmpl instead of $GITEA_CUSTOM/templates/header.tmpl

  2. In header.tmpl,

<link rel="stylesheet/less" type="text/css" href="{{AppSubUrl}}/css/jupyter.less" />

had to be changed to

<link rel="stylesheet/less" type="text/css" href="{{AppSubUrl}}/assets/css/jupyter.less" />
2 Likes
9

Just add the following code to your header.tmpl file

<!-- Load mathjax -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-AMS_CHTML-full,Safe"> </script>
    <!-- MathJax configuration -->
    <script type="text/x-mathjax-config">
    init_mathjax = function() {
        if (window.MathJax) {
        // MathJax loaded
            MathJax.Hub.Config({
                TeX: {
                    equationNumbers: {
                    autoNumber: "AMS",
                    useLabelIds: true
                    }
                },
                tex2jax: {
                    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                    processEscapes: true,
                    processEnvironments: true
                },
                displayAlign: 'center',
                CommonHTML: {
                    linebreaks: { 
                    automatic: true 
                    }
                }
            });
        
            MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
        }
    }
    init_mathjax();
    </script>
    <!-- End of mathjax configuration -->
1 Like
11

Is there any chance we could get an update on this post on how to render notebooks with syntax highlighting using the now available iframe rendering mentioned by @lunny ? The linked jupyter.less is 13k rows long and requires to load a lot of additional css on every gitea page (not just notebook pages) which may slow down gitea for all users.

12

Hi, @lunny 's PR had been merged, you can set RENDER_CONTENT_MODE=no-sanitizer in [markup.jupyter] to disable sanitizer,then all the contents from stdout of nbconvert cmd will be rendered.However, it seems that the URL in stdout will be wrapped by a <a> tag,that causes a fatal bug: most URL in stdout is incorrect, many URL of resources cannot be loaded normally.
BTW, the css from stdout will affect the layout of whole page.
modify nbconvert template may solve those problems.But I failed.
I use basic template to render without any style (–template full argument is deprecated ), that is enough for me now.