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:
- long lines are cut off when javascript is disabled
- unpredictable behavior (depending on css) using <pre> without <code>
- no syntax highlighting
- no line numbers
- pixel font sizes should be ems
- widths shouldn't be hard-coded javascript
- should be an optional max width property
- able to set tab size somewhere
- 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.
Custom Post Types in Taxonomy Archives
-
- Configuration page
About a dozen versions of this already exist by other authors on WordPress.org, but I decided to throw in the version I cooked up just for some experience working with WordPress plugin development and because I'd already written most of it before I bothered to search.
This one is as exciting as it sounds. It allows you to choose which content types you want to include in your /tag and /category pages. One thing that (I think) makes this version unique is that it also allows you to add 'media' in addition to all of your custom post types.
Admin Search by ID
-
- An example of the search
Just a quick plugin that allows admins to search for content by ID by prefixing it with a # sign.
Dashboard Site Notes
-
- Creating a note
-
- Notes appearing on the dashboard
-
- Notes appearing in a custom location
-
- Instruction Manual page
Nearly every WordPress site I've built has something that falls outside the standard WordPress instruction manual. I wrote this plugin as a way to easily add little notes in places where they're needed to keep clients from feeling lost when trying to do one of those custom operations.
Make Safe For Work
I wasn't satisfied with the Not-Safe-For-Work WordPress plugin I found, so I wrote one that has far more features than you'd ever imagine a silly plugin like this to have.
The default method, reload, doesn't send any of the offending content to the user's browser until they click on the reveal link, so if someone is behind a filter that prevents them from loading pages with certain words, they'll still be able to view your page.
Here are some demos of the different types available. The spoiler type handles images and advanced styling about as well as you'd expect (exceedingly poorly) but it uses visibility:hidden instead of just trying to turn everything black, so at least it always works.
original text:
really seriously unbelievably long swear word that exceeds all expectations
Standard method (first tag):
[Not Safe for Work. Click to View.]
Standard method (after first tag):
[NSFW]
Spoiler method:
really seriously unbelievably long swear word that exceeds all expectations
Deleted (never show anything, no idea why you'd want this):
[redacted]
Comment (view source):