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/
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
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?
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
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"
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
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:
-
I had to put my template file at
$GITEA_CUSTOM/templates/custom/header.tmplinstead of$GITEA_CUSTOM/templates/header.tmpl -
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
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
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.
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.
Hi everyone. I faced with problem in correct code highlighting.
- Gitea version 1.22.4
- jupyter nbconvert version 5.5.0
The provided .less file has .highlight.* class that does not appear in rendered .html. Gitea use <span class="*"> for code highlighting. So jupyter.less that works for me consists of 3 parts (each part is just <style>...</style> section from nbconvert html file generated with --template full option):
/* Highlighting part; .highlight replaced with span */
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.hll { background-color: #ffffcc }
span{ background: #f8f8f8; }
span.c { color: #3D7B7B; font-style: italic }
...
/*markup part*/
.markup.jupyter {
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
...
}
/* Rest code from generated html*/
body {
overflow: visible;
padding: 8px;
}
...
Gitea instance was ran as linux service under git user. Overall structure of gitea main folder:
custom
├── conf
│ └── app.ini
├── public
│ └── assets
│ ├── css
│ │ └── jupyter.less
│ └── img
│ └── ...
└── templates
└── custom
└── header.tmpl
data
log
main_runner
Thanks @singhaxn for corrected paths. It’s really useful and still relevant in 2025.