I'm trying to render Jupyter markdown cells with code blocks inside HTML alert boxes, but can't get the syntax highlighter to work for both reveal.js slides and notebook cell output.
Edit: I'm using JupyterLab 2.0 to render the notebooks (but behaves the same in classic Jupyter Notebook) and $ jupyter nbconvert --to slides <notebook>.ipynb to create the RevealJS <notebook>.slides.html output.
For instance, this markdown cell code works well in Jupyter, but is malformatted in RevealJS slides:
<div class="alert alert-block alert-info" style="background-color: white; border: 2px solid; padding: 10px">
<b><i class="fa fa-info-circle" aria-hidden="true"></i> Info</b><br>
<p style="color: black">
We can also specify the order of the words within a sentence using numbers within the curly braces:
</p>
<div>
```python
>>> "Hello {1} {0}".format("Mr.", "Bond") # explicit argument order
'Hello Bond Mr.'
```
</div>
</div>
Jupyter markdown rendering: 
reveal.js version: 
Attempt 2
Alternatively, the following displays the code correctly (minus the syntax highlighting) for both the markdown cell and the reveal.js slides output:
<div class="alert alert-block alert-info" style="background-color: white; border: 2px solid; padding: 10px">
<b><i class="fa fa-info-circle" aria-hidden="true"></i> Info</b><br>
<p style="color: black">
We can also specify the order of the words within a sentence using numbers within the curly braces:
</p>
<div>
<pre><code>>>>"Hello {1} {0}".format("Mr.", "Bond") # explicit argument order
'Hello Bond Mr.'
</code></pre>
</div>
</div>
Rendering for both: 
Attempt 3
I also tried using using syntax highlighting solutions, such as code-prettify, which while producing highlighted output in reveal.js (nevermind it not matching the rest of the code style) did not help with syntax highlighting within the Jupyter notebook (in JupyterLab at least). I've included an example of this failed attempt to document my thoughts...
<div class="alert alert-block alert-info" style="background-color: white; border: 2px solid; padding: 10px">
<b><i class="fa fa-info-circle" aria-hidden="true"></i> Info</b><br>
<p style="color: black">
We can also specify the order of the words within a sentence using numbers within the curly braces:
</p>
<div>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<!-- language-all: lang-python -->
<pre class="prettyprint lang-python"><code class="language-python">>>>"Hello {1} {0}".format("Mr.", "Bond") # explicit argument order
'Hello Bond Mr.'
</code></pre>
</div>
</div>
Attempt 4
Finally, I tried opening the outputted slides.html file produced by nbconvert and trying to make sense of how the syntax highlighting works... It didn't go well! In theory, this may be a bug with the conversion tool as the outputted HTML looks like this (with the code backticks escaped so that SO renders it okay):
<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
</div><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<div class="alert alert-block alert-info" style="background-color: white; border: 2px solid; padding: 10px">
<b><i class="fa fa-info-circle" aria-hidden="true"></i> Info</b><br>
<p style="color: black">
We can also specify the order of the words within a sentence using numbers within the curly braces:
</p>
<div>
```python
>>> "Hello {1} {0}".format("Mr.", "Bond") # explicit argument order
'Hello Bond Mr.'
```
</div>
</div>
</div>
</div>
</div>
If anyone knows of a way to solve this problem, then I would love to hear from you! I've lost many hours, my wits and my patience over this issue - please help!
