6

I am using nbconvert to convert my jupyter notebook to html by

jupyter nbconvert my.ipynb --to html

Then it says:

[NbConvertApp] Converting notebook my.ipynb to html [NbConvertApp] Writing 407497 bytes to my.html

Then in the generated my.html, I can see it requires custom.css:

<!-- Custom stylesheet, it must be in the same directory as the html file -->
<link rel="stylesheet" href="custom.css">

<!-- Loading mathjax macro -->
<!-- Load mathjax -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-AMS_HTML"></script>
    <!-- MathJax configuration -->
    <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
            displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
            processEscapes: true,
            processEnvironments: true
        },
        // Center justify equations in code and markdown cells. Elsewhere
        // we use CSS to left justify single line equations in code cells.
        displayAlign: 'center',
        "HTML-CSS": {
            styles: {'.MathJax_Display': {"margin": 0}},
            linebreaks: { automatic: true }
        }
    });
    </script>

Info: nbconvert version is 5.6.1

Thanks

Akshat Zala
  • 710
  • 1
  • 8
  • 23
derek
  • 9,358
  • 11
  • 53
  • 94

2 Answers2

3

If your sole problem is this line: <link rel="stylesheet" href="custom.css">, you can modify the template file and write a custom HTML exporter:

Navigate to the source directory of nbconvert. Go to ./templates/html/. There will be a file called full.tpl. This serves as the template for your HTML file. Open the file with a text editor and delete the <link rel="stylesheet" href="custom.css"> line. Save the file with a .tpl extension (fullcustom.tpl). Make sure you save it in the same directory as full.tpl.

The next step is to either write a custom exporter class in Python(recommended). You have to inherit the HTMLExporter class defined in ./exporters/html.py. You can follow the procedure described here: https://nbconvert.readthedocs.io/en/latest/external_exporters.html

Now, if you do not want to spend the time doing this, a quick "kludge" would be to actually modify the HTMLExporter class. Create a copy of the html.py file if you want as it is being modified. Open ./exporters/html.py and find the following method in the HTMLExporter class:

@default('template_file')
    def _template_file_default(self):
        return 'full.tpl'

Change return full.tpl to the name you saved your modified version of full.tpl with (fullcustom.tpl).

Amal K
  • 4,359
  • 2
  • 22
  • 44
1

The <link rel="stylesheet" href="custom.css"> effectively causes customized CSS styling rules to be included if the file custom.css exists in the same directory.

In case you want some customized CSS styling rules for displaying the generated html. You can add a file custom.css with those rules, in the same directory as the html file.

This is not a mandatory requirement. It is fine to not include such a file if you don't want any customized styling rules. The default CSS rules in generated HTML file will still work.

pii_ke
  • 2,811
  • 2
  • 20
  • 30
  • The use case here is I convert notebook to html which will be served to a browser. The issue is If I return the html file to a browser, that browser will try to fetch the `css` file automatically. I am trying to avoid such redundant fetch because there is no css file existing on server side. – derek Jun 28 '20 at 05:12
  • I'd suggest that you remove that line from the generated html files yourself. If there are many html files you can automate this easily (on linux) with something like `sed -i '/link.*custom\.css/d' generated_html/*.html` – pii_ke Jun 28 '20 at 05:29
  • This is the solution I decided to use. My use case is not performance centric so I can take this hacky way to serve the htmls. But if your use case is more performance centric, use Amal K's solution. – derek Jul 06 '20 at 05:22