Language tagged fenced code blocks are not highlighted the same as inside jupyterlab

[joelostblom]

I noticed that some language tags for fenced code blocks are differentially highlighted in jupyterlab compared to the html output from nbconvert. Would it be possible to use the same stylesheet between jupyterlab and nbconvert to make this consistent (not sure which one is more correct, if any)?

For all the example diff output below, jupyterlab is on the left and nbconvert HTML on the right

• diff is not highlighted at all
  

  • For comparison, here is the github highlighting:

  4ac2218 (HEAD -> master) Add sentence
  diff --git a/README.md b/README.md
  index 0647515..8ad6860 100644
  --- a/README.md
  +++ b/README.md
  @@ -1,3 +1,3 @@
   # Correct title

---

• sh differs in the highlighting of the command, flags, parentheses, + and -
  

  • For comparison, here is the github highlighting:

  4ac2218 (HEAD -> master) Add sentence
  diff --git a/README.md b/README.md
  index 0647515..8ad6860 100644
  --- a/README.md
  +++ b/README.md
  @@ -1,3 +1,3 @@
   # Correct title

---

jupyter core     : 4.6.3
jupyter-notebook : 6.1.4
qtconsole        : not installed
ipython          : 7.18.1
ipykernel        : 5.3.4
jupyter client   : 6.1.7
jupyter lab      : 2.2.6
nbconvert        : 6.0.2  # just installed via conda-forge
ipywidgets       : not installed
nbformat         : 5.0.5
traitlets        : 5.0.4

[MSeal]

@SylvainCorlay can comment more accurately than I can, but the css is pulled from lab so the intent is that they should be the same or highly similar.

[SylvainCorlay]

Thanks @MSeal for the ping, and @joelostblom for reporting.

Actually, nbconvert's lab template and jupyterlab really use the same CSS, but ... not the same HTML.

• in the case of JupyterLab, code cells are rendered in the frontend with the CodeMirror JS library, and (most typically) with a custom JupyterLab theme which uses the CSS variables from JupyterLab.
• in the case of nbconvert, the code cells are rendered using the Pygments Python library which produces static HTML with syntax highlighting, and a special theme which mimicks the default CodeMirror theme of JupyterLab: https://github.com/jupyterlab/jupyterlab_pygments.

Unfortunately, Pygments-generated HTML and CSS classes are not granular enough to reproduce all of the features of the codemirror highlighting, It is unlikely to produce exactly the same thing.

In any case, I think that there is room for improvement in https://github.com/jupyterlab/jupyterlab_pygments.

[SylvainCorlay]

Closing as answered!

@joelostblom please feel free to open an issue in jupyterlab_pygments if you want to track this further.