Where is custom.css in the generated html file from nbconvert?

user_665023 0
Viewed 1293

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

nbconvert jupyter-notebook css html
2 Answers

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).

user_114551050

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.

user_19215460
Related