Colorful Code: Adding Syntax Highlighting to My Site
In all of the posts I published on my site so far, I’ve never shared a single line of code. But since this is going to change with the next article on pattern libraries, I spent a little time over the weekend implementing syntax highlighting for my posts. I settled on Lea Verou’s Prism, a lightweight, extensible syntax highlighter for the Web. It is used by sites like Smashing Magazine, A List Apart, or CSS-Tricks and it is dead simple to use. Just include prism.js and wrap your code in <pre><code> tags and Prism does the rest for you. The styling is done through CSS, so it is up to you if you want use one of the many ready-made themes or prefer to write your own styles. I decided on the latter as it promised to be fun and I wanted to see how theming is done for syntax highlighting.
The resulting theme is loosely based on GitHub’s styles so that it feels familiar, but it aims to be a little bit more intensively colored without being too colorful because the main goal of syntax highlighting is to improve the readability of code. So below you will find some examples of Prism in action. Feel free to write me if you have any remarks or questions.
<!-- HTML / Handlebars -->
<form class="webmention-form" method="post" action="/{{ craft.webmention.settings.endpointSlug }}">
<label for="webmention-source">Have you published a response to this? Send me a <a href="http://indiewebcamp.com/webmention">webmention</a> by letting me know the <abbr title="Uniform Resource Locator">URL</abbr>.</label>
<input type="url" name="source" id="webmention-source" placeholder="URL / permalink of your article">
<input type="hidden" name="target" value="{{url}}">
<button type="submit">Ping!</button>
</form>/* CSS / Sass */
// Variable
$primary-color: hotpink;
// Mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.my-element {
color: $primary-color;
width: 100%;
overflow: hidden;
}
.my-other-element + .my-element:first-child {
@include border-radius(5px);
}
/* JavaScript */
/* MIT license http://www.opensource.org/licenses/mit-license.php/
* @author Lea Verou http://lea.verou.me
*/
var Prism = (function(){
// Private helper vars
var lang = /\blang(?:uage)?-(\w+)\b/i;
var uniqueId = 0;
var _ = _self.Prism = {
manual: _self.Prism && _self.Prism.manual,
util: {
encode: function (tokens) {
if (tokens instanceof Token) {
return new Token(tokens.type, _.util.encode(tokens.content), tokens.alias);
} else if (_.util.type(tokens) === 'Array') {
return tokens.map(_.util.encode);
} else {
return tokens.replace(/&/g, '&').replace(/<\/g, '<').replace(/\u00a0/g, ' ');
}
},
type: function (o) {
return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1];
},
objId: function (obj) {
if (!obj['__id']) {
Object.defineProperty(obj, '__id', { value: ++uniqueId });
}
return obj['__id'];
},
// Deep clone a language definition (e.g. to extend it)
clone: function (o) {
var type = _.util.type(o);
switch (type) {
case 'Object':
var clone = {};
for (var key in o) {
if (o.hasOwnProperty(key)) {
clone[key] = _.util.clone(o[key]);
}
}
return clone;
case 'Array':
// Check for existence for IE8
return o.map && o.map(function(v) { return _.util.clone(v); });
}
return o;
}
}
}
/* PHP */
class WebmentionPlugin extends BasePlugin
{
function init()
{
// Require dependencies (composer)
require CRAFT_PLUGINS_PATH.'/webmention/vendor/autoload.php';
craft()->on('entries.saveEntry', function(Event $event) {
craft()->webmention->onSaveEntry($event);
});
# sections.onDeleteSection
craft()->on('sections.onDeleteSection', function(Event $event) {
craft()->webmention->syncEntryTypes();
});
# sections.onSaveSection
craft()->on('sections.onSaveSection', function(Event $event) {
craft()->webmention->syncEntryTypes();
});
# sections.onSaveEntryType
craft()->on('sections.onSaveEntryType', function(Event $event) {
craft()->webmention->syncEntryTypes();
});
}
public function getName()
{
return Craft::t('Webmention');
}
public function getVersion()
{
return '0.3.1';
}
}
