Don't show `.bd-*` classes to the user (#21443)

* Don't show `bd-*` classes to the user

* Add comments and another regex

1 files changed, 11 insertions, 1 deletions

diff --git a/docs/_plugins/highlight_alt.rb b/docs/_plugins/highlight_alt.rb
index bdcada251..8a86a2202 100644
--- a/docs/_plugins/highlight_alt.rb
+++ b/docs/_plugins/highlight_alt.rb
@@ -57,16 +57,26 @@ eos
       def example(output)
         "<div class=\"bd-example\" data-example-id=\"#{@options[:id]}\">\n#{output}\n</div>"
       end
-    
+
       def remove_holderjs(code)
         code = code.gsub(/data-src="holder.js.+?"/, 'src="..."')
       end
 
+      def remove_example_classes(code)
+        # Find `bd-` classes and remove them from the highlighted code. Because of how this regex works, it will also
+        # remove classes that are after the `bd-` class. While this is a bug, I left it because it can be helpful too.
+        # To fix the bug, replace `(?=")` with `(?=("|\ ))`.
+        code = code.gsub(/(?!class=".)\ *?bd-.+?(?=")/, "")
+        # Find empty class attributes after the previous regex and remove those too.
+        code = code.gsub(/\ class=""/, "")
+      end
+
       def render_rouge(code)
         require 'rouge'
         formatter = Rouge::Formatters::HTML.new(line_numbers: @options[:linenos], wrap: false)
         lexer = Rouge::Lexer.find_fancy(@lang, code) || Rouge::Lexers::PlainText
         code = remove_holderjs(code)
+        code = remove_example_classes(code)
         code = formatter.format(lexer.lex(code))
         "<div class=\"highlight\"><pre>#{code}</pre></div>"
       end