added docs for github-style codeblocks

This commit is contained in:
Brandon Mathis 2011-07-27 00:08:38 -04:00
parent 0a0cd14598
commit 52334ed604
5 changed files with 63 additions and 36 deletions

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7" manifest="default.appcache?v=1"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" manifest="default.appcache?v=1" lang="en"><!--<![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>{{site.title}}{% if page.title %}: {{page.title}}{% endif %}</title>

View File

@ -5,7 +5,7 @@
<nav role=navigation>{% include navigation.html %}</nav>
<div id="main">
<div id="content">
{{ content | expand_urls: root_url | smart_quotes }}
{{ content | expand_urls: root_url | backtick_codeblock | smart_quotes }}
{% unless page.sidebar == false %}
<aside role=sidebar>{% include sidebar.html %}</aside>
{% endunless %}

View File

@ -7,28 +7,28 @@ sidebar: false
{% include_code javascripts/test.js %}
{% codeblock Testing html files (test.html) %}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>A Tiny Page</title>
<style type="text/css">
<!--
``` html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>A Tiny Page</title>
<style type="text/css">
<!--
p { font-size:15pt; color:#000 }
-->
</style></head><!-- real comment -->
<body bgcolor="#FFFFFF" text="#000000" link="#0000CC">
<script language="javascript" type="text/javascript">
</style></head><!-- real comment -->
<body bgcolor="#FFFFFF" text="#000000" link="#0000CC">
<script language="javascript" type="text/javascript">
function changeHeight(h) {
var tds = document.getElementsByTagName("td");
for(var i = 0; i < tds.length; i++) {
tds[i].setAttribute("height", h + "px");
}}
</script>
<h1>abc</h1>
<h2>def</h2>
<p>Testing page</p>
</body></html>
{% endcodeblock %}
</script>
<h1>abc</h1>
<h2>def</h2>
<p>Testing page</p>
</body></html>
```
{% gist 996818 %}

View File

@ -0,0 +1,38 @@
---
layout: page
title: "Github Style Codeblock"
date: 2011-07-26 23:42
sidebar: false
footer: false
---
With the `backtick_codeblock` filter you can use Github's lovely back tick syntax highlighting blocks.
Simply start a line with three back ticks followed by a space and the language you're using. Tab in four spaces
for your code snippets, and then finish your code block with three more back ticks.
#### Syntax
``` language
code snippet
```
### Example
``` ruby
class Fixnum
def prime?
('1' * self) !~ /^1?$|^(11+?)\1+$/
end
end
```
``` ruby
class Fixnum
def prime?
('1' * self) !~ /^1?$|^(11+?)\1+$/
end
end
```
This is a nice, lightweight way to add a highlighted code snippet. For features like titles and links you'll want to look
at the `codeblock` or `include_code` liquid tags.

View File

@ -48,8 +48,7 @@ function testFeatures() {
function addCodeLineNumbers(){
if (navigator.appName == 'Microsoft Internet Explorer') { return }
$('div.highlight pre code').each(function(el){ addDivLines(el); });
$('div.highlight, div.gist-highlight').each(function(code){
$('div.gist-highlight').each(function(code){
var tableStart = '<table cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter">';
var lineNumbers = '<pre class="line-numbers">';
var tableMiddle = '</pre></td><td class="code" width="100%">';
@ -62,16 +61,6 @@ function addCodeLineNumbers(){
$(code).html(table);
});
}
function addDivLines(el){
var content = $(el).html();
var lines = content.replace(/\s*$/g, '').split(/\n/);
var count = lines.length;
$(lines).each(function(line, index){
if(line == '') line = ' ';
lines[index] = '<div class="line">' + line + '</div>';
});
$(el).html(lines.join(''));
}
function flashVideoFallback(){
var flashplayerlocation = "/assets/jwplayer/player.swf",