In a previous post, I outlined some handy hacks for converting Jupyter notebooks to WordPress.com oriented HTML. This addendum describes the use of Jupyter templates and CSS edits to fine-tune exported HTML.
Jupyter exports notebooks in a variety of formats. I regularly export notebooks as Markdown, HTML, and 
// This is the main function fn main() { // Statements here are executed when the compiled binary is called // Print text to the console println!("Hello World!"); } main()
Hello World!
()
For a few simple examples numbered indented blocks are fine but for longer posts, the redundant numbering and space-wasting indents grow tiresome. I used standard HTML output for Using jodliterate and around prompt In[7]: I was irritated with Jupyter’s defaults.
Here’s something you should know about me.
I don’t like being irritated!
In addition to indented numbered prompts the standard format suffers from other boo-boos when run through Benny’s Jupyter to WordPress.com transmogrifier. Markdown source code like source code McCodeyFace is set off in ugly blocks and any use of
![\varphi (u) = \int_{\Omega} \left[ \dfrac{\|\nabla u\|^2}{2} + \lambda\dfrac{u^2}{2} - \dfrac{(u^+)^p}{p} \right] d\mu](https://s0.wp.com/latex.php?latex=%5Cvarphi+%28u%29+%3D+%5Cint_%7B%5COmega%7D+%5Cleft%5B+%5Cdfrac%7B%5C%7C%5Cnabla+u%5C%7C%5E2%7D%7B2%7D+%2B+%5Clambda%5Cdfrac%7Bu%5E2%7D%7B2%7D+-+%5Cdfrac%7B%28u%5E%2B%29%5Ep%7D%7Bp%7D+%5Cright%5D+d%5Cmu+&bg=ffffff&fg=000000&s=0&c=20201002)
You can hack the background color of WordPress.com cfcdcd so \sqrt[n]{1+x+x^2+x^3+\dots+x^n}&bg=cfcdcd yields:
![\sqrt[n]{1+x+x^2+x^3+\dots+x^n}](https://s0.wp.com/latex.php?latex=%5Csqrt%5Bn%5D%7B1%2Bx%2Bx%5E2%2Bx%5E3%2B%5Cdots%2Bx%5En%7D&bg=cfcdcd&fg=000000&s=0&c=20201002)
As far as I know, there is no global WordPress.com
Remember that bit about how I don’t like being irritated?
Hard coding is euphemistically called a “code smell.” In this case, it’s a foul stench. This isn’t Jupyter’s fault. Jupyter sensibly uses MathJaX to render mathematics with proper scaled outline fonts, but MathJax is an external JavaScript library and WordPress.com does not allow cheap peons like moi to drag in alien JavaScript libraries.
Side note to WordPress.com. Make an exception to your no JavaScript rule for MathJax. MathJax is a well established standard library and you’re being pigheaded by not allowing it.
Some of these problems can be fixed with CSS tweaks, Jupyter templates, and nb2wp edits.
Tweaking Jupyter export formats
You can adjust Jupyter export formats with templates. Templates modify how
nbconvert transforms notebook JSON .ipynb files into HTML, Markdown, and other formats. Here’s a good basic introduction to Jupyter templates.
Jupyter templates are versatile and powerful but with “great formatting power comes extreme annoyance.” I don’t want to learn yet another programming language to tweak my fricking blog! Fortunately, it’s not necessary to get deep in the jinja weeds to remove a few block labels. The following template tpl file meets my meager needs.
A brain dead Jupyter template: blankfull.tpl
{% extends 'full.tpl'%} ## change the appearance of execution count {% block in_prompt %} {% endblock in_prompt %} {% block prompt %} {% endblock prompt %} {% block output_area_prompt %} {% endblock output_area_prompt %} {% block output_area %} {% endblock output_area %}
Save the preceding as UTF-8 text with extension tpl in Jupyter’s nbconvert share directory.
The location of this directory will vary for different systems. On this Windows 10 machine it can be found here:
C:\Anaconda\share\jupyter\nbconvert\templates\htmlRefer to nbconvert documentation to determine where to save tpl files on your system.
Stashing a custom template in the proper location removes block prompts and indentation but it doesn’t
fix CSS issues. The CSS style file distributed with nb2wp
needs a few lines changed to prevent MarkdownText from getting a white background. The values after the line numbers
on the left are the settings you need to give CodeyMcCodeFace text FRAGMENTS transparent backgrounds.
1077: background-color: transparent; background-color: #fff; 1529: background-color: transparent; background-color: #f9f2f4; 10126: background-color: transparent; background-color: #fff;
Finally, to control annoying 
bg_color_hex='' to the the Python function nb2wp.
import os import sys # append nb2* script directory to system path sys.path.append(r'C:\temp\nb2wp') import nb2wput as nbu
# set notebook files - the source for this blog post nb_file_0 = r'C:\temp\nb2wp\MoreBetterBloggingWithJupyter0.ipynb' nb_file_1 = r'C:\temp\nb2wp\MoreBetterBloggingWithJupyter1.ipynb'
# convert notebook with (nb2wp) using # defaults for unspecified arguments nbu.nb2wp(nb_file_0, out_dir=r'C:\temp\nb2wp\tmp', css_files=[r'C:\temp\nb2wp\style.css'], save_css=True, remove_attrs=True, template='full', latex="wp", img_dir=r'C:\temp\nb2wp\tmp\img', footer=False)
Using template: full Using CSS files ['C:\\temp\\nb2wp\\style.css'] Saving CSS to C:\temp\nb2wp\tmp\style.css C:\temp\nb2wp\tmp\MoreBetterBloggingWithJupyter0.html: 23132 bytes written in 5.863s
# convert notebook using tweaked CSS and custom template nbu.nb2wp(nb_file_1, out_dir=r'C:\temp\nb2wp\tmp', css_files=[r'C:\temp\nb2wp\my_nb2wp_style.css'], save_css=True, remove_attrs=True, template='blankfull', latex="wp", bg_color_hex='cfcdcd', img_dir=r'C:\temp\nb2wp\tmp\img', footer=False)
Using template: blankfull Using CSS files ['C:\\temp\\nb2wp\\my_nb2wp_style.css'] Saving CSS to C:\temp\nb2wp\tmp\style.css C:\temp\nb2wp\tmp\MoreBetterBloggingWithJupyter1.html: 53009 bytes written in 10.377s
Analyze the Data not the Drivel 