[BUG]: Jupyter help magic unconverted unicode character

[s-weigand]

When using jupyter help magic (?), the output gets messed up, since jyputer internally wraps unicode characters around parts of the output to format it.
I think this is why it is also excluded when setting nbsphinx_execute = "always".
The problem should be solvable with a re.sub().

Expected/Notebook render:

Actual render HTML:

Actual render PDF:

Json representation of the cell:

{
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "tags": [
     "nbval-ignore-output"
    ]
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "\u001b[1;31mDocstring:\u001b[0m\n",
       "%%bash script magic\n",
       "\n",
       "Run cells with bash in a subprocess.\n",
       "\n",
       "This is a shortcut for `%%script bash`\n",
       "\u001b[1;31mFile:\u001b[0m      c:\\anaconda3\\lib\\site-packages\\ipython\\core\\magics\\script.py\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%bash?"
   ]
  },

• OS: Windows 10
• Version: nbsphinx==0.4.2

[mgeier]

Thanks for the report!

I've known this problem for quite some time already and I've even started working on it on the
https://github.com/spatialaudio/nbsphinx/compare/ansi-in-text branch (but I think this was the wrong approach).

I hope I can finish this at some point ...

I think this is why it is also excluded when setting nbsphinx_execute = "always".

Those outputs are generated by JupyterLab.
They are apparently not generated by the Classic Notebook nor by nbconvert --execute (which is used in nbsphinx).

It's good to see that more people are using JupyterLab and that this problem is finally reported!

---

Unrelated to this issue: I've noticed spurious scroll bars (or rather scroll buttons) in your HTML screenshot.
I normally don't see those, do you also see them on https://nbsphinx.readthedocs.io/en/0.4.3/code-cells.html?
Which browser are you using?
Do you have an idea how to get rid of them?

[s-weigand]

The scrollbars are only shown Chrome (not in FireFox) and are displayed due to an overflow caused by sphinx-copybutton for single line of code cells.
Still need to investigate, which css 'clash' causes it.

[s-weigand]

After some playing around, the following scss fixed the issue for me:

div.nbinput div.input_area,
div.nboutput div.output_area {
  padding: 0 !important;
}
div.nbinput,
div.nbinput div.prompt,
div.nbinput div.input_area,
div.nbinput div[class*="highlight"],
div.nbinput div[class*="highlight"] pre,
div.nboutput,
div.nbinput div.prompt,
div.nbinput div.output_area,
div.nboutput div[class*="highlight"],
div.nboutput div[class*="highlight"] pre {
  padding: 0.2em !important;

  a.copybtn {
    width: 0.8em;
    height: 0.8em;
  }
}

a.copybtn {
  padding: 0;
}

.prompt.highlight-none.notranslate {
  a.copybtn {
    display: none;
  }
}

compiled css version:

div.nbinput div.input_area,
div.nboutput div.output_area {
  padding: 0 !important;
}

div.nbinput,
div.nbinput div.prompt,
div.nbinput div.input_area,
div.nbinput div[class*="highlight"],
div.nbinput div[class*="highlight"] pre,
div.nboutput,
div.nbinput div.prompt,
div.nbinput div.output_area,
div.nboutput div[class*="highlight"],
div.nboutput div[class*="highlight"] pre {
  padding: 0.2em !important;
}

div.nbinput a.copybtn,
div.nbinput div.prompt a.copybtn,
div.nbinput div.input_area a.copybtn,
div.nbinput div[class*="highlight"] a.copybtn,
div.nbinput div[class*="highlight"] pre a.copybtn,
div.nboutput a.copybtn,
div.nbinput div.prompt a.copybtn,
div.nbinput div.output_area a.copybtn,
div.nboutput div[class*="highlight"] a.copybtn,
div.nboutput div[class*="highlight"] pre a.copybtn {
  width: 0.8em;
  height: 0.8em;
}

a.copybtn {
  padding: 0;
}

.prompt.highlight-none.notranslate a.copybtn {
  display: none;
}

Haven't found any buggy outputs for that yet.

Note: The !important is to overwrite the css from nbsphinx.

[mgeier]

@s-weigand Thanks for the work-around. I've created #333, hoping that we can solve this without having to add a ton of CSS stuff to each project.

[mgeier]

@s-weigand I've taken a stab at the original issue: #348.

There is still a problem, though. If you have an idea how to solve this, please comment over there.

[mgeier]

@s-weigand OK, I've tried another approach: #351. Can you please check if that works for you?