title: Syntax highlighting for code blocks within alert box in Jupyter for both notebook and reveal.js slides output?
body: <p>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.</p>
  <p><strong>Edit:</strong> I'm using JupyterLab 2.0 to render the notebooks (but behaves the same in classic Jupyter Notebook) and <code>$ jupyter nbconvert --to slides &lt;notebook&gt;.ipynb</code> to create the RevealJS <code>&lt;notebook&gt;.slides.html</code> output.</p>
  <p>For instance, this markdown cell code works well in Jupyter, but is malformatted in RevealJS slides:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;alert alert-block alert-info&quot; style=&quot;background-color: white; border: 2px solid; padding: 10px&quot;&gt;
      &lt;b&gt;&lt;i class=&quot;fa fa-info-circle&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&amp;nbsp; Info&lt;/b&gt;&lt;br&gt;
      &lt;p style=&quot;color: black&quot;&gt;
          We can also specify the order of the words within a sentence using numbers within the curly braces:
      &lt;/p&gt;
  &lt;div&gt;
  
  ```python
  &gt;&gt;&gt; &quot;Hello {1} {0}&quot;.format(&quot;Mr.&quot;, &quot;Bond&quot;)  # explicit argument order
  'Hello Bond Mr.'
  ```
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Jupyter markdown rendering: <a href="https://i.stack.imgur.com/GI56t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GI56t.png" alt="enter image description here" /></a></p>
  <p>reveal.js version: <a href="https://i.stack.imgur.com/TvbB8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TvbB8.png" alt="enter image description here" /></a></p>
  <h3>Attempt 2</h3>
  <p>Alternatively, the following displays the code correctly (minus the syntax highlighting) for both the markdown cell and the reveal.js slides output:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;alert alert-block alert-info&quot; style=&quot;background-color: white; border: 2px solid; padding: 10px&quot;&gt;
      &lt;b&gt;&lt;i class=&quot;fa fa-info-circle&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&amp;nbsp; Info&lt;/b&gt;&lt;br&gt;
      &lt;p style=&quot;color: black&quot;&gt;
          We can also specify the order of the words within a sentence using numbers within the curly braces:
      &lt;/p&gt;
  &lt;div&gt;
  
  &lt;pre&gt;&lt;code&gt;&gt;&gt;&gt;&quot;Hello {1} {0}&quot;.format(&quot;Mr.&quot;, &quot;Bond&quot;)  # explicit argument order
  'Hello Bond Mr.'
  &lt;/code&gt;&lt;/pre&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Rendering for both: <a href="https://i.stack.imgur.com/Q04xE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q04xE.png" alt="Jupyter, no syntax highlighting" /></a></p>
  <h3>Attempt 3</h3>
  <p>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...</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;alert alert-block alert-info&quot; style=&quot;background-color: white; border: 2px solid; padding: 10px&quot;&gt;
      &lt;b&gt;&lt;i class=&quot;fa fa-info-circle&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&amp;nbsp; Info&lt;/b&gt;&lt;br&gt;
      &lt;p style=&quot;color: black&quot;&gt;
          We can also specify the order of the words within a sentence using numbers within the curly braces:
      &lt;/p&gt;
  &lt;div&gt;
  
  &lt;script src=&quot;https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js&quot;&gt;&lt;/script&gt;
  
  &lt;!-- language-all: lang-python --&gt;
    
  &lt;pre class=&quot;prettyprint lang-python&quot;&gt;&lt;code class=&quot;language-python&quot;&gt;&gt;&gt;&gt;&quot;Hello {1} {0}&quot;.format(&quot;Mr.&quot;, &quot;Bond&quot;)  # explicit argument order
  'Hello Bond Mr.'
  &lt;/code&gt;&lt;/pre&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <h3>Attempt 4</h3>
  <p>Finally, I tried opening the outputted slides.html file produced by <code>nbconvert</code> 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):</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;cell border-box-sizing text_cell rendered&quot;&gt;&lt;div class=&quot;prompt input_prompt&quot;&gt;
  &lt;/div&gt;&lt;div class=&quot;inner_cell&quot;&gt;
  &lt;div class=&quot;text_cell_render border-box-sizing rendered_html&quot;&gt;
  &lt;div class=&quot;alert alert-block alert-info&quot; style=&quot;background-color: white; border: 2px solid; padding: 10px&quot;&gt;
      &lt;b&gt;&lt;i class=&quot;fa fa-info-circle&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&amp;nbsp; Info&lt;/b&gt;&lt;br&gt;
      &lt;p style=&quot;color: black&quot;&gt;
          We can also specify the order of the words within a sentence using numbers within the curly braces:
      &lt;/p&gt;
  &lt;div&gt;
  
  ```python
  &gt;&gt;&gt; &quot;Hello {1} {0}&quot;.format(&quot;Mr.&quot;, &quot;Bond&quot;)  # explicit argument order
  'Hello Bond Mr.'
  ```
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>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!</p>