Ignore multiple <code> when syntax highlighting

A <pre> should have only ony <code> node when
being syntax highlighted.

Changelog: fixed

lib/banzai/filter/syntax_highlight_filter.rb

@@ -14,7 +14,7 @@ module Banzai
       LANG_PARAMS_DELIMITER = ':'
       LANG_PARAMS_ATTR = 'data-lang-params'
 
-      CSS   = 'pre:not([data-math-style]):not([data-mermaid-style]):not([data-kroki-style]) > code'
+      CSS   = 'pre:not([data-math-style]):not([data-mermaid-style]):not([data-kroki-style]) > code:only-child'
       XPATH = Gitlab::Utils::Nokogiri.css_to_xpath(CSS).freeze
 
       def call
@@ -106,8 +106,8 @@ module Banzai
         (Rouge::Lexer.find(language) || Rouge::Lexers::PlainText).new
       end
 
+      # Replace the parent `pre` element with the entire highlighted block
       def replace_parent_pre_element(node, highlighted)
-        # Replace the parent `pre` element with the entire highlighted block
         node.parent.replace(highlighted)
       end
 

spec/lib/banzai/filter/syntax_highlight_filter_spec.rb

@@ -37,6 +37,14 @@ RSpec.describe Banzai::Filter::SyntaxHighlightFilter do
     end
   end
 
+  context "when <pre> contains multiple <code> tags" do
+    it "ignores the block" do
+      result = filter('<pre><code>one</code> and <code>two</code></pre>')
+
+      expect(result.to_html).to eq('<pre><code>one</code> and <code>two</code></pre>')
+    end
+  end
+
   context "when a valid language is specified" do
     it "highlights as that language" do
       result = filter('<pre lang="ruby"><code>def fun end</code></pre>')