View on Github Replicates the functionality of CSS3 background-size for “contain” and “cover” keywords not supported by browsers below IE9.

How to

Add an image inside a div. Set the height and width of the div and set ‘cover’ or ‘contain’ to replicate the CSS3 background-size property in browsers that don’t support it.

<div style="width: 400px; height: 300px;">
    <img class="background-size-cover" src="apple.jpg" />
</div>

<script>
$(document).ready(function() {
    $('.background-size-cover').bgdSize('cover');
});
</script>

Methods

These are valid:

$('.background-size-cover').bgdSize('cover');
$('.background-size-cover').bgdSize('contain');
$('.background-size-cover').bgdSize({mode : 'contain'});

 

This adds placeholder for browsers that don’t support it (IE).

 

Just a note that Crayon 1.9.8 adds support for Haskell, and also TeX.

module Interpret(interpret) where

import Prog

import System.IO.Unsafe
import Control.Monad
import Char

-- In a call to this function such as "interpret prog vars entry debug":
-- prog is the ABCD program to be interpreted;
-- vars represents the initial values of the four variables;
-- entry is the name of the entry point function, "main" by default; and
-- debug specifies whether the user wants debugging output.

interpret :: Prog -> Vars -> String -> MaybeDebug -> IO ()
interpret prog vars entry debug = do
    let context = Context prog vars entry debug 0
    let newContext = runFunc entry context
    let output =
        case newContext of
            IError s -> "abcdi: " ++ s
            IOK c -> (strVal (getVar A (cVars c))) ++ "\n"
    putStrLn output

 

I’ve just added a PHP function called `CrayonWP::highlight()` that you provide with string containing Crayons like they appear in the post editor that produces Crayons as you see them on screen. This will let you arbitrarily create Crayons anywhere in your code given some code and then add them to the post content or wherever you like. Just add this to your theme’s `functions.php` or  somewhere within your theme.

add_filter('the_content', 'add_crayons_to_content');

function add_crayons_to_content($content) {
	global $post;
	$id = $post->ID;
	// Generate some code based on post ID etc
	$some_code = "<strong>hello world</strong>";
	$crayon = '<pre class="lang:html toolbar:always mark:1">' . $some_code . '</pre>';
	// Add Crayon to content
	return $content . CrayonWP::highlight($crayon);
}

This is a simple example that appends some code in a Crayon to the end of every post - you probably don’t want it to look the same, so you can provide something dynamic using the post ID instead. This only works in Wordpress - there’s a different method that allows more configuration for using Crayon in other PHP environments.  

Crayon can be used in any PHP environment so it’s possible to extend to another CMS other than Wordpress. Here’s a sample of how you’d do that. This script works from the Crayon plugin directory, so you’d need to update any paths. Also make sure you reference correct urls and paths for the defined settings.

<?php 

require_once ('global.php');
require_once (CRAYON_HIGHLIGHTER_PHP);

// These will depend on your framework
CrayonGlobalSettings::site_http('http://localhost/crayon/');
CrayonGlobalSettings::site_path(dirname(__FILE__)); // For WP, this is ABSPATH
CrayonGlobalSettings::plugin_path('http://localhost/crayon/wp-content/plugins/crayon-syntax-highlighter/');

// Should be in the header
crayon_resources();

$crayon = new CrayonHighlighter();
$crayon->code('some code');
$crayon->language('php');
$crayon->title('the title');
$crayon->marked('1-2');
$crayon->is_inline(FALSE);

// Settings
$settings = array(
	// Just regular settings
	CrayonSettings::NUMS => FALSE,
	CrayonSettings::TOOLBAR => TRUE,
	// Enqueue supported only for WP
	CrayonSettings::ENQUEUE_THEMES => FALSE,
	CrayonSettings::ENQUEUE_FONTS => FALSE);
$settings = CrayonSettings::smart_settings($settings);
$crayon->settings($settings);

// Print the Crayon
$crayon_formatted = $crayon->output(TRUE, FALSE);
echo $crayon_formatted;

// Utility Functions

function crayon_print_style($id, $url, $version) {
	echo '',"\n";
}

function crayon_print_script($id, $url, $version) {
	echo '',"\n";
}

function crayon_resources() {
	global $CRAYON_VERSION;
	$plugin_url = 'http://localhost/crayon/wp-content/plugins/crayon-syntax-highlighter/';
	// jQuery only needed once! Don't have two jQuerys, so remove if you've already got one in your header :)
	crayon_print_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', $CRAYON_VERSION);
	crayon_print_style('crayon-style', $plugin_url.CRAYON_STYLE, $CRAYON_VERSION);
	crayon_print_script('crayon_util_js', $plugin_url.CRAYON_JS_UTIL, $CRAYON_VERSION);
	crayon_print_script('crayon-js', $plugin_url.CRAYON_JS, $CRAYON_VERSION);
	crayon_print_script('crayon-jquery-popup', $plugin_url.CRAYON_JQUERY_POPUP, $CRAYON_VERSION);
}

?>

I’m happy to announce that in 1.9.0, Crayon will feature a built in Tag Editor in both the Visual and HTML editors of Wordpress! Normally, you’d have to type the shortcode in HTML editor and make sure you use the right language ID and so forth. Overriding default settings, like changing the theme, font and toolbar settings was more work than necessary. Now these settings are all built into the new user interface.

How It Works

1. Use on the Visual Editor toolbar, or on the HTML Editor toolbar to open the Tag Editor.
2. Use the Tag Editor to add code and change settings. Click “Add” to insert the code into the post.
3. You can edit the generated <pre> tag in both editors. If you’re using the Visual Editor, you can select the code block with your mouse (it will become blue) and click the Tag Editor button again to open the same window and modify both the code and the settings. Then click “Save” when you’re done.

Inline Tags

You can also create and edit Inline Tags by ticking the “Inline Tag” option. To edit the Inline Tag, once again select the generated <span> with your mouse cursor (it will become green) and click the Tag Editor button.

Overriding Settings

This makes editing code in Wordpress super easy, and even more welcoming is the fact you can now override all of Crayons global settings for a single Crayon using the same interface you’re used to in the Settings screen. Any changes you make show up yellow and are automagically added to the code block, and you can then select the code block with your mouse and edit them later :)

Here’s my take on limiting words in a paragraph. ^s*((?:S+s*){0,20})(.*) That’ll capture the first 20 words and also the rest of the string. Then, you can replace the entire capture with the first capture group (the first 20 words). In PHP:

function ak_limit_words($str, $word_limit) {
	return preg_replace('#^s*((?:S+s*){0,'.$word_limit.'})(.*)#msi', '$1', $str);
}

// Output: 'this is the '
ak_limit_words('this is the sentence...', 3);

I made an unusually long answer on StackOverflow, thought I’d share here also. I don’t now about you but Crayon looks prettier to me :) Almost 1000 views and not a single comment. Well, I also needed this and decided to make it. I’ve shared the JavaScript and Wordpress code below for people in the distant future to use. It looks like a lot, but that’s because I’ve defined some jQuery functions you can use later with .extend. All it’s doing is looking for a select element (a dropdown) with CSS class .content-filter. Once found, it uses the dropdown’s id to set a GET variable to the value currently selected, then it redirects to this the same URL and adds these GET variables. For example, if the id of the dropdown was product_filter, and this had a value set to date, then it would set the GET variable product_filter=date. It’s great because it doesn’t care about your Wordpess details - all it cares about is the select element.

// A bunch of helper methods for reading GET variables etc from the URL
jQuery.extend({
	urlGetVars : function() {
	    var GET = {};
	    var tempGET = location.search;
	    tempGET = tempGET.replace('?', '').split('&');
	    for(var i in tempGET) {
	    	var someVar = tempGET[i].split('=');
	    	if (someVar.length == 2) {
	        	GET[someVar[0]] = someVar[1];
	        }
	    }
	    return GET;
	},
	urlGetVar : function(name) {
	    return $.urlGetVars()[name];
	},
	serializeUrlVars : function(obj) {
		var str = [];
		for(var p in obj)
		 str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
		return str.join("&");
	},
	currentUrl : function() {
	    return window.location.href.slice(0,window.location.href.indexOf('?'));
	}
});

// Adds functionality to filter content using a dropdown
var ContentFilter = function ($) {
	$(document).ready(function() {
		// Return to a scroll position if exists
		var scroll = $.urlGetVar('scroll');
		if (typeof scroll != 'undefined') {
			$(window).scrollTop(scroll);
		}
		// Prepare the filter dropdowns
		$('.content-filter').each(function(){
			var me = $(this);
			// e.g. content-filter-product
			var id = me.attr('id');
			// Refresh with selected filter on change
			var refresh = function() {
				var GET = $.urlGetVars();
				GET[id] = me.val();
				// Save scroll position, return to this position on load
				GET['scroll'] = $(window).scrollTop();
				var newVar = $.currentUrl() + '?' + $.serializeUrlVars(GET);
				window.location = newVar;
			};
			me.change(refresh);
		});
	});
}(jQuery);

Now the Wordpress code. All we really need is to generate the select with some kind of id and set the class to .content-filter. This code asks for a post type like ‘post’ or ‘product’ and makes the select element. It then returns the GET variable for convenience, and if none is set then it defaults to ‘newest’. Notice that the $fields array sets all the different orderby values you’d like to support. You can always access it anywhere in the template with $_GET['product_filter'] or $_GET['post_filter'] depending on what your type is. This means that only one can exist on any given page, but you want that - otherwise jQuery won’t know which to use. You can extend this code to set a custom id or anything you like later.

function ak_content_filter($post_type_id = 'post', &$filter_get_value, $echo = TRUE) {
	$dropdown = '
';
	// The dropdown filter id for this post type
	$filter_id = $post_type_id.'_filter';
	// The actual dropdown
	$dropdown .= 'Filter';
	// The available ways of filtering, to sort you'd need to set that in the WP_Query later
	$fields = array('date' => 'Newest', 'comment_count' => 'Most Popular', 'rand' => 'Random');
	$filter_get_value = isset($_GET[$filter_id]) ? $_GET[$filter_id] : 'newest'; // default is 'newest'
	foreach ($fields as $field_value=>$field_name) {
		$dropdown .= ''. $field_name .'';
	}
	$dropdown .= '
';
	// Print or return
	if ($echo) {
		echo $dropdown;
	} else {
		return $dropdown;
	}
}

Now the fun part - putting it together in the content page. All our work pays off with some sweet and short code:

// This will fill $product_filter with $_GET['product_filter'] or 'newest' if it doesn't exist
ak_content_filter('product', $product_filter);
$args = array('post_type' => 'product', 'orderby' => $product_filter);
// This is just an example, you can use get_pages or whatever supports orderby
$loop = new WP_Query( $args );

// OR, to avoid printing:
$dropdown = ak_content_filter('product', $product_filter, FALSE);
// ... some code ...
echo $dropdown;

I used the custom post type ‘product’, but if you’re using ‘post’ just replace that. Someone should probably make this into a plugin if they haven’t already :P

These are helpful after you strip a paragraph for a word limit and want to cut off the last incomplete sentence.

// Remove the last unfinished sentence in a paragraph if it contains $min_word_count or less words
function remove_unfinished_sentence($paragraph, $min_word_count = 3, $replace = '.') {
	$min_word_count = $min_word_count > 1 ? $min_word_count : 1;
	return preg_replace('#(.s*([^s.]+s+){0,'.($min_word_count-1).'}([^s.]+s*))$#ms', $replace, $paragraph);
}

Of course, if you want to completely remove the last sentence, this will suffice:

// Remove the last sentence in a paragraph
function remove_last_sentence($paragraph, $replace = '.') {
	return preg_replace('#.s*[^.]+$#ms', $replace, $paragraph);
}
// Output: This is some stuff.
remove_last_sentence('This is some stuff. Blah Blah ');

I miss being able to just pass in named variables in Python. Well, while PHP isn’t as elegant at that, I’ve decided to use this:

function vargs(&$var, $default) {
	$var = isset($var) ? $var: $default;
}

function some_func($args) {
    extract($args);
    vargs($first, '');
    var_dump($first);
}

some_func(array('first' => '1st', 'second' => '2nd'));

The first string will turn into $first which will then be set to 1st. If first is missing, then vargs() will set it to the default you’ve provided. The main downside in PHP is the array() notation and having to use strings, whereas Python will let you name the variable like so:

some_func(first = '1st', second = '2nd')

Another way in PHP is to set your functions to their default values, then to run extract, which will replace these default values if the variable exists or leave them default otherwise.

function some_func($args) {
    $these = '1';
    $are = '2';
    $variables = '3';
    extract($args);
    // Either '1' or the given argument
    var_dump($these);
}

// Prints 'one', not '1'
some_func(array('these' => 'one'));