diff --git a/lib/govuk_tech_docs/tech_docs_html_renderer.rb b/lib/govuk_tech_docs/tech_docs_html_renderer.rb
index 86416a14..cda21691 100644
--- a/lib/govuk_tech_docs/tech_docs_html_renderer.rb
+++ b/lib/govuk_tech_docs/tech_docs_html_renderer.rb
@@ -83,13 +83,25 @@ def block_code(text, lang)
         # to include Middleman::Syntax::RedcarpetCodeRenderer. This defines its own
         # version of `block_code(text, lang)` which we can call with `super`.
 
-        highlighted_html = super
-        highlighted_html.sub("<pre ", '<pre tabindex="0" ')
+        fragment = Nokogiri::HTML::DocumentFragment.parse(super)
+        fragment.traverse do |element|
+          if element.name == "pre" && element["tabindex"].nil?
+            element["tabindex"] = "0"
+          end
+        end
+        fragment.to_html
       else
         # If syntax highlighting with redcarpet isn't enabled, super will not
         # be `defined?`, so we can jump straight to rendering HTML ourselves.
 
-        "<pre tabindex=\"0\"><code class=\"#{lang}\">#{text}</code></pre>"
+        fragment = Nokogiri::HTML::DocumentFragment.parse("")
+        pre = Nokogiri::XML::Node.new "pre", fragment
+        pre["tabindex"] = "0"
+        code = Nokogiri::XML::Node.new "code", fragment
+        code["class"] = lang
+        code.content = text
+        pre.add_child code
+        pre.to_html
       end
     end
   end
diff --git a/spec/govuk_tech_docs/tech_docs_html_renderer_spec.rb b/spec/govuk_tech_docs/tech_docs_html_renderer_spec.rb
index 05efa2f2..85b3dc5d 100644
--- a/spec/govuk_tech_docs/tech_docs_html_renderer_spec.rb
+++ b/spec/govuk_tech_docs/tech_docs_html_renderer_spec.rb
@@ -77,7 +77,7 @@ def hello_world
 
       describe "#render a code block" do
         it "sets tab index to 0" do
-          expect(output).to include('<pre tabindex="0" class=" ruby">')
+          expect(output).to include('<pre class=" ruby" tabindex="0">')
         end
 
         it "renders the code with syntax highlighting" do