Best way to display copyable code in a WordPress page?

I want to show people how to insert an iFrame to my site on their website by showing them the code to create the iFrame. But when I enter the code on the WordPress page, it opens the iFrame itself.

I tried wrapping it like this:

<pre><code><iframe src ="https://minigiggles.com/#mg" width="468" height="333" scrolling="no" frameborder="0">
  <p>Your browser does not support iframes.</p>
</iframe></code></pre>

But it still opens the iFrame.

I really just want this to show:

<iframe src ="https://minigiggles.com/#mg" width="468" height="333" scrolling="no" frameborder="0">
  <p>Your browser does not support iframes.</p>
</iframe>

So they can copy and paste.

Is there a ‘best’ way to do this?

Thanks