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

[joelostblom]

Originally reported in jupyter/nbconvert#1385

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

[joelostblom]

For context, @SylvainCorlay wrote this reply in the original thread:

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.

[SylvainCorlay]

Sorry for not replying earlier @joelostblom. I think that you answered you own question.

[joelostblom]

No worries, is it worth keeping this open if there is an easy future option to have the highlighting match up? Or is it more of a situation where a change will likely not be worthwhile?