Adding a <code> button to the WYSIWYG editor?

I’ve been looking for a way to add a button to wrap text in for the WYSIWYG editor in WordPress 3.3.1.

I tried this:

function enable_more_buttons($buttons) {
 $buttons[] = 'code';
 return $buttons;
}
add_filter("mce_buttons_3", "enable_more_buttons");

But that did not work as expected. It did display a button, but it brings up a popup window to edit the HTML.

In addition to it would be nice to have and .

Solutions Collecting From Web of "Adding a <code> button to the WYSIWYG editor?"