Innerdvations

Week 6: More Perfect <pre> and <code> Tags

I recently read an old blog post called "How to Create Perfect Pre Tags" and thought it was pretty awesome, and then a day or two later I saw it (or something very similar) was in use on Flattr.com as well. However, I found "perfect" to be an inaccurate moniker.

Some of the problems:

1. long lines are cut off when javascript is disabled
2. unpredictable behavior (depending on css) using <pre> without <code>
3. no syntax highlighting
4. no line numbers
5. pixel font sizes should be ems
6. widths shouldn't be hard-coded javascript
7. should be an optional max width property
8. able to set tab size somewhere
9. no source code available (other than the tutorial itself)

So, I took a bit of the original code and then rewrote most of it to do all of the above. jQuery is required (though with javascript disabled, #1 and #2 have still been fixed). #3 requires Google Code Prettify, but that's totally optional.

Here are some examples with the different options:

// really long block with just <pre><code></pre></code>
	wp_register_style(self::$plugin_stylesheet_id, WP_PLUGIN_URL . '/' . dirname(plugin_basename(__FILE__)) . '/admin-styles.css' );
	wp_enqueue_style(self::$plugin_stylesheet_id);
	wp_register_script(self::$plugin_script_id, WP_PLUGIN_URL . '/' . dirname(plugin_basename(__FILE__)) . '/admin-scripts.js' );
	wp_enqueue_script(self::$plugin_script_id);

// uses max-width
	wp_register_style(self::$plugin_stylesheet_id, WP_PLUGIN_URL . '/' . dirname(plugin_basename(__FILE__)) . '/admin-styles.css' );
	wp_enqueue_style(self::$plugin_stylesheet_id);
	wp_register_script(self::$plugin_script_id, WP_PLUGIN_URL . '/' . dirname(plugin_basename(__FILE__)) . '/admin-scripts.js' );
	wp_enqueue_script(self::$plugin_script_id);

// with class noprettyprint
	wp_register_style(self::$plugin_stylesheet_id, WP_PLUGIN_URL . '/' . dirname(plugin_basename(__FILE__)) . '/admin-styles.css' );
	wp_enqueue_style(self::$plugin_stylesheet_id);
	wp_register_script(self::$plugin_script_id, WP_PLUGIN_URL . '/' . dirname(plugin_basename(__FILE__)) . '/admin-scripts.js' );
	wp_enqueue_script(self::$plugin_script_id);

// with class nolinenums
	wp_register_style(self::$plugin_stylesheet_id, WP_PLUGIN_URL . '/' . dirname(plugin_basename(__FILE__)) . '/admin-styles.css' );
	wp_enqueue_style(self::$plugin_stylesheet_id);
	wp_register_script(self::$plugin_script_id, WP_PLUGIN_URL . '/' . dirname(plugin_basename(__FILE__)) . '/admin-scripts.js' );
	wp_enqueue_script(self::$plugin_script_id);

// just <pre> and no <code>
 ____  ____   ____     ___  ____   ___    __ __   ____  ______  ____  ___   ____    _____        __   ___   ___ ___
l    j|    \ |    \   /  _]|    \ |   \  |  T  | /    T|      Tl    j/   \ |    \  / ___/       /  ] /   \ |   T   T
 |  T |  _  Y|  _  Y /  [_ |  D  )|    \ |  |  |Y  o  ||      | |  TY     Y|  _  Y(   \_       /  / Y     Y| _   _ |
 |  | |  |  ||  |  |Y    _]|    / |  D  Y|  |  ||     |l_j  l_j |  ||  O  ||  |  | \__  T     /  /  |  O  ||  \_/  |
 |  | |  |  ||  |  ||   [_ |    \ |     |l  :  !|  _  |  |  |   |  ||     ||  |  | /  \ | __ /   \_ |     ||   |   |
 j  l |  |  ||  |  ||     T|  .  Y|     | \   / |  |  |  |  |   j  ll     !|  |  | \    ||  T\     |l     !|   |   |
|____jl__j__jl__j__jl_____jl__j\_jl_____j  \_/  l__j__j  l__j  |____j\___/ l__j__j  \___jl__j \____j \___/ l___j___j

// just <pre> with class 'expandable' and no <code>
 ____  ____   ____     ___  ____   ___    __ __   ____  ______  ____  ___   ____    _____        __   ___   ___ ___
l    j|    \ |    \   /  _]|    \ |   \  |  T  | /    T|      Tl    j/   \ |    \  / ___/       /  ] /   \ |   T   T
 |  T |  _  Y|  _  Y /  [_ |  D  )|    \ |  |  |Y  o  ||      | |  TY     Y|  _  Y(   \_       /  / Y     Y| _   _ |
 |  | |  |  ||  |  |Y    _]|    / |  D  Y|  |  ||     |l_j  l_j |  ||  O  ||  |  | \__  T     /  /  |  O  ||  \_/  |
 |  | |  |  ||  |  ||   [_ |    \ |     |l  :  !|  _  |  |  |   |  ||     ||  |  | /  \ | __ /   \_ |     ||   |   |
 j  l |  |  ||  |  ||     T|  .  Y|     | \   / |  |  |  |  |   j  ll     !|  |  | \    ||  T\     |l     !|   |   |
|____jl__j__jl__j__jl_____jl__j\_jl_____j  \_/  l__j__j  l__j  |____j\___/ l__j__j  \___jl__j \____j \___/ l___j___j

Since what you're seeing on this site at the moment is an old hacked together version,
here's a demo page I've set up where you can see all the different options and download the source.