@cindyli the correct semantics for the markup are to have a <pre> (for pre formatted markup) with a <code> (indicating that it is a block of code). So the <pre> is used as the components container, and we add the content to the <code>. I could have done this all on <code> but would still need to style the <pre> which seemed weird to do outside of the components scope.