htmlcssjupyter-notebooknbconvert

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


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


Solution

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