Slicing

First you need one image for each of the outer areas in the 9-slice grid. That’s top left, top center, top right, left center, right center, bottom left, bottom center and bottom right. We don’t need an image for the center, since it’s filled with one solid color in this example and we can use CSS for that. Note that all top and all bottom slices must share the same height. The top center and bottom center slices should be 1 pixel wide, since we’re not going to scale them, but repeat them (which is the difference of this technique compared to the original 9-slice scaling). Left and right center slices only need to be 1 pixel high for the reasons just mentioned.
After all, the slicing looks like this (forgive me the typo):

HTML code

Here’s the HTML you’ll need. Read the comments in the code for explanation.

<div class="content">
	<!-- this is the overall container -->
	<div class="content-top">
		<!-- this contains the top left, top right and top center slices -->
		<div class="content-top-left"></div>
		<div class="content-top-right"></div>
		<!-- notice the top center or top repeat slice needs to be at the end -->
		<div class="content-top-repeat"></div>
	</div>
	<div class="content-repeat">
		<!-- this is just a container for the vertically scaling part - you could leave it out, but it seems cleaner to me -->
		<div class="content-repeat-left">
			<div class="content-repeat-right">
				<!-- in this case the left center and right center must be nested and must contain the actual content div, so they automatically scale with it -->
				<div class="content-repeat-center">
					<!-- /** this is where you'd place the content **/ -->
					<div class="content-repeat-clearfix"><!-- this will prevent problems with floated stuff within the content --></div>
				</div>
			</div>
		</div>
	</div>
	<div class="content-bottom">
		<!-- this contains the bottom left, bottom right and bottom center slices -->
		<div class="content-bottom-left"></div>
		<div class="content-bottom-right"></div>
		<!-- as above the bottom center div must be after the bottom left and right divs -->
		<div class="content-bottom-repeat"></div>
	</div>
</div>
 

CSS

And here’s where the magic comes in - this will actually combine the images and the HTML code and make it scale perfectly. Again, read the comments for explanation:

.content .content-top {
	/* No rules needed here, but for the sake of completeness */
}
.content .content-top .content-top-left {
	/* float this one left and .content-top-right right so they flow over .content-top-repeat, which is the top center slice */
	float: left;
	/* width and height are defined by the image */
	width: 83px;
	height: 49px;
	background: url('images/content_top_left.png') no-repeat;
}
.content .content-top .content-top-right {
	float: right;
	/* height needs to be the same across all top slices! */
	height: 49px;
	width: 99px;
	background: url('images/content_top_right.png') no-repeat;
}
.content .content-top .content-top-repeat {
	height: 49px;
	/* the margins are the width of the top left and top right slices - this is not always neccessary, but in my case I was using alpha-transparent PNG8, which broke the layout in IE6 then */
	margin-left: 83px;
	margin-right: 99px;
	/* note that we repeat-x the image here */
	background: url('images/content_top_repeat.png') repeat-x;
}
.content .content-repeat {
	/* No rules needed here, but for the sake of completeness */
}
.content .content-repeat .content-repeat-left {
	/* repeat-y the image - this div will automatically resize with the content */
	background: url('images/content_repeat_left.png') left repeat-y;
}
.content .content-repeat .content-repeat-left .content-repeat-right {
	/* same as center left slice */
	background: url('images/content_repeat_right.png') right repeat-y;
}
.content .content-repeat .content-repeat-left .content-repeat-right .content-repeat-center {
	/* Put your text formatting here */
	/* again, margins are the widths of the left and right center slice */
	margin-left: 3px;
	margin-right: 14px;
	/* and this is the solid background color */
	background: #fffbf2;
}
.content .content-repeat .content-repeat-clearfix {
	/* you better have this if you have floated stuff in your content */
	clear: right;
}
.content .content-bottom {
	/* No rules needed here, but for the sake of completeness */
}
.content .content-bottom .content-bottom-left {
	/* same technique as above when stying the top part */
	float: left;
	/* again, image size defines the size of this div */
	width: 12px;
	height: 46px;
	background: url('images/content_bottom_left.png') no-repeat;
}
.content .content-bottom .content-bottom-right {
	/* see above */
	float: right;
	width: 61px;
	/* note the height _must_ be euqal across all bottom slices */
	height: 46px;
	background: url('images/content_bottom_right.png') no-repeat;
}
.content .content-bottom .content-bottom-repeat {
	/* margins again defined by the width of the bottom left and right slices */
	margin-left: 12px;
	margin-right: 46px;
	/* and height is the same across all bottom slices */
	height: 46px;
	/* don't forget the repeat-x thingy */
	background: url('images/content_bottom_repeat.png') repeat-x;
}

Summary

Now that was a massive amount of code, wasn’t it? A little demo would be nice, right? Check this one: http://www.mgv-oberhaid.de/ - try changing your browser’s font size and watch the content div to see the effect.

Update: Obviously all the IDs in HTML should have been classes - the CSS excerpt did style classes, which is a better idea if you want to use multiple 9-slice boxes on a page. The demo URL was outdated, too.

If you have a Firefox Browser at your hands, make sure to try the @Mail-Demo at http://demo.atmail.com/index.php

So I figured out it would end as it always does (notice how I exaggerate here to keep the pathos of the text) - I had to do it my way. And here it is: GeSHify for Expression Engine.
GeSHify supports the following features:

• Customizable intelligent caching (this one is very important, since GeSHi is not the fastest code highlighter out there)


• Supports GeSHi 1.0 and GeSHi 1.1 (currently alpha) - and you can even switch between both using some clicks in the control panel


• Customizable tag (in case you want to keep the original functionality of [ code ] instead of overwriting it, which is the default setting)


• HTML-argument-style settings: you can pass something like lang=actionscript to the code tag


• Default settings manageable using the control panel, so you don't have to pass all arguments each time you're pasting code

<?php
function activate_extension()
{
 global $DB;
 $DB->query($DB->insert_string('exp_extensions',
  array(
   'extension_id' => '',
   'class' => 'Geshify',
   'method' => 'pre_typography',
   'hook' => 'typography_parse_type_start',
   'settings' => serialize($this->settings_default),
   'priority' => 8,
   'version' => $DB->escape_str($this->version),
   'enabled' => 'y'
  )
 ));
 $DB->query($DB->insert_string('exp_extensions',
  array(
   'extension_id' => '',
   'class' => 'Geshify',
   'method' => 'post_typography',
   'hook' => 'typography_parse_type_end',
   'settings' => serialize($this->settings_default),
   'priority' => 8,
   'version' => $DB->escape_str($this->version),
   'enabled' => 'y'
  )
 ));
}
?>

Documentation

Please give me some feedback, whether you want me to include the original GeSHi package in the download and release a new version of GeSHify whenever GeSHi is updated or if you want to download GeSHi yourself, generating less updates to GeSHify where no GeSHify code actually changed.

This documentation expects your GeSHify tag name setting to be “code” and your delimiters to be “[” and “]”, which is the default. If you feel a need to do so, you can change these settings in your control panel by going to Admin » Utilities » Extensions Manager » GeSHify, where you will be provided a fancy settings manager.

code-tag syntax

To parse code with GeSHify, you need to wrap it in [code] and [/code]. You can optionally pass the following arguments

• lang
  lang=[identifier of the GeSHi language file you want to use for parsing this code block]
  Default value can be changed in the control panel. Check the GeSHi website for possible values - note that these values might differ from GeSHi 1.0 to GeSHi 1.1 even for the same code-language
  Example: [code lang=php]<?php // some php code ?>[/code]
• line
  line=[none|fancy99|normal]
  type of line numbering to use. Possible values are “none” for no line numbers, “normal” for standard line numbers and “fancy” followed by a number where each number^th line will be highlighted in a different color. The default value can be changed in the control panel.
  Example: [code line=none][/code] for no line numbers, [code line=fancy5][/code] for each 5^th line number in a different color and [code line=normal][/code] for standard line numbers.
• start
  start=[number]
  first line number to be used
  Example: [code start=5][/code] will start line numbering at 5; very useful, if you're trying to split a file in multiple parts, but still have consistent line numbers.
• strict
  strict=[true|false|1|0]
  whether to use strict mode, where you'll have to include the start and end tag in interpreted languages like e.g. PHP. Defaults to false on GeSHi 1.0 and true on GeSHi 1.1.
  Example: [code strict=true][/code] or [code strict=1][/code] for strict handling, [code strict=false][/code] or [code start=0][/code] for non-strict handling.
• keyword_links
  keyword_links=[true|false|1|0]
  whether to link special keywords with online documentation for the language used (e.g. PHP keywords will be linked to php.net when this is enabled). Default value can be changed in the control panel.
  Example: [code keyword_links=true][/code] or [code keyword_links=1][/code] for linked keywords, [code keyword_links=0] or [code keyword_links=false] to disable keyword links.
• overall_id
  overall_id=[id string to use in the id attribute of the code container]
  ID attribute to assign to the HTML element containing the source code after hightlighting. You can use this to apply custom CSS or JavaScript.
  Example: [code overall_id=heapsort_in_php][/code]
• overall_class
  overall_class=[class name to add to the class attribute of the code container]
  class name to add to the class list of the HTML element containing the source code after highlighting. You can use this to apply custom CSS or JavaScript.
  Example: [code overall_class=sorting_algorithms_in_php][/code]

Caching

GeSHify will cache your highlighted source code until it is being modified or until there hasn't been any hit on the page containing it for 24h (you can change that value using the control panel). GeSHify will clear old cache files based on a 10% chance with each hit (random number generators ftw!). If you'd like to clear your cache manually delete the contents of your system/cache/geshify_cache directory (if you changed the cache directory setting in the GeSHify extension settings this directory will be located somewhere else)

License

GeSHify is released under the GPL.

Bugs and known limitations

Please report any bugs you encounter or and features you'd like to see by commenting on this post or by mailing to neverpanic@gmail.com

GeSHi 1.1 is alpha software - many code libraries are missing and neither line numbering nor disabling strict mode work with GeSHi 1.1 yet.

Download & Changelog

All of the scripts are based on PHP and MySQL - there might be other solutions out there, but since my clients all had the traditional LAMP setup I didn’t bother searching for alternatives.
For encoding, all of the scripts named use the same combination of MEncoder, ffmpeg to support the Flash video format, the ffmpeg PHP extension and FLVTool2.
Installing these software packages isn’t that hard unless you’re on something different than a .deb-based Linux system: The Debian multimedia repository provided me with the MEncoder and FFmpeg packages, I installed Ruby to run FLVTool2 (which is a Ruby script) and installed ffmpeg-php from Atomo64’s Debian Repository (thanks to Raphaël for this one).
If you’re on another system, you might end up with a lot of compiling, though.
Once you got all these things in place and made sure your php.ini settings allow the exec(), shell_exec() and system() functions you can start doing the real installataion.

Installing

This article will just contain the review of ClipShare, PHPmotion will follow later, so stay tuned.
To install ClipShare, you’ll have to import a SQL file into your database using phpMyAdmin, open some files and adjust some variables. Not easy, however not that difficult, either. Luckily they have an installation service for their customers, so you can get the software installed for you. These guys at the installation service will, however, compile the software on your server (why don’t they just use an .rpm or .deb package - what about updating that software?) and they don’t seem to be that smart either. They couldn’t fix some weird issue my client had and after some debugging I found safe_mode for PHP-CLI to be turned on. This is something I expect them to check for - they get paid for that!

Customizing

ClipShare comes with a template engine, so you can achieve any design you can imagine. However if you just want to adjust the design that came with ClipShare (speaking of version 2.0, there’s a table-free CSS design coming with version 2.5) this is where you undergo a web developer’s nightmare. table-deserts as far as your screen is big, mixed with some invalid attribute notation (e.g. width=450), “borders” are colored td-elements. Long story short, their HTML code is evil.
Now you might say, that’s version 2.0, you said earlier they released 2.5 with a CSS-based template. Well, check it out at http://www.clipsharedemo.com/ - it comes with a little 864 validation errors and 13 external JavaScripts plus some neat inline JavaScript. It’s clearly a step in the right direction, but it’s not better than the table-based design they had before.

ClipShare’s PHP code is completely editable, which is certainly a pro - however, you might end up adding some code yourself: My client wanted the user avatar to be displayed in the sidebar of a single-video page (like YouTube does it). ClipShare doesn’t come with this data per default or at least I couldn’t find it since there’s no documentation to check, so I had to get it from the database myself.

Summary

Overall, ClipShare does it’s job, however there’s quite a lot of room for improvements at the installation service, the templates and the documentation.