fixed indentation on code blocks, updated include_code example

This commit is contained in:
Brandon Mathis 2012-06-03 00:23:34 -05:00
parent e4cd278e0c
commit 020ec2f773
4 changed files with 47 additions and 48 deletions

View File

@ -17,14 +17,6 @@ Octopress makes it way better. Here's how.
- Insert code snippets from your filesystem with a download link. - Insert code snippets from your filesystem with a download link.
- Easy inline code blocks with `<figure>` and `<figcaption>` and optional download links. - Easy inline code blocks with `<figure>` and `<figcaption>` and optional download links.
- Pygments caching - a [Jekyll community plugin](https://github.com/rsim/blog.rayapps.com/blob/master/_plugins/pygments_cache_patch.rb). - Pygments caching - a [Jekyll community plugin](https://github.com/rsim/blog.rayapps.com/blob/master/_plugins/pygments_cache_patch.rb).
- Table based line numbers added with javascript.
## Solarized Highlighting
[Solarized](http://ethanschoonover.com/solarized) has a beautiful syntax highlighting color scheme, but reproducing it requires a highly sophisticated highlighting engine.
[Pygments](http://pygments.org) (the highlighter Jekyll uses) processes code snippets into styleable HTML, but it isn't nearly as powerful as the highlighting engine in Vim for example.
In order to port Solarized theme to octopress, I processed its [test files](https://github.com/altercation/solarized/tree/master/utils/tests) with Pygments and styled the output with Sass while comparing
them to the Vim rendered versions.
Check out the [test page](/docs/blogging/code/test) to see the results. Check out the [test page](/docs/blogging/code/test) to see the results.
@ -40,6 +32,13 @@ Check out the [test page](/docs/blogging/code/test) to see the results.
## Inline Code Blocks ## Inline Code Blocks
{% render_partial docs/plugins/codeblock/index.markdown %} {% render_partial docs/plugins/codeblock/index.markdown %}
## Solarized Highlighting
[Solarized](http://ethanschoonover.com/solarized) has a beautiful syntax highlighting color scheme, but reproducing it requires a highly sophisticated highlighting engine.
[Pygments](http://pygments.org) (the highlighter Jekyll uses) processes code snippets into styleable HTML, but it isn't nearly as powerful as the highlighting engine in Vim for example.
In order to port Solarized theme to octopress, I processed its [test files](https://github.com/altercation/solarized/tree/master/utils/tests) with Pygments and styled the output with Sass while comparing
them to the Vim rendered versions.
### Spaces vs. Tabs ### Spaces vs. Tabs
If you use tabs, there is an issue where the first level indentation is shorter than the rest. The cause is currently unknown since lots of text processors are involved. To fix, use spaces. You'll be happier anyway. If you use tabs, there is an issue where the first level indentation is shorter than the rest. The cause is currently unknown since lots of text processors are involved. To fix, use spaces. You'll be happier anyway.

View File

@ -5,7 +5,7 @@ footer: false
sidebar: false sidebar: false
--- ---
{% include_code test.js range:5,10 %} {% include_code test.js range:5-10 %}
``` html ``` html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

View File

@ -18,7 +18,7 @@ Octopress provides a rake task to create new blog posts with the right naming co
#### Syntax #### Syntax
``` sh ``` sh
rake new_post["title"] rake new_post["title"]
``` ```
`new_post` expects a naturally written title and strips out undesirable url characters when creating the filename. `new_post` expects a naturally written title and strips out undesirable url characters when creating the filename.
@ -27,8 +27,8 @@ The default file extension for new posts is `markdown` but you can configure tha
#### Example #### Example
``` sh ``` sh
rake new_post["Zombie Ninjas Attack: A survivor's retrospective"] rake new_post["Zombie Ninjas Attack: A survivor's retrospective"]
# Creates source/_posts/2011-07-03-zombie-ninjas-attack-a-survivors-retrospective.markdown # Creates source/_posts/2011-07-03-zombie-ninjas-attack-a-survivors-retrospective.markdown
``` ```
The filename will determine your url. With the default [permalink settings](https://github.com/mojombo/jekyll/wiki/Permalinks) the url would be something like The filename will determine your url. With the default [permalink settings](https://github.com/mojombo/jekyll/wiki/Permalinks) the url would be something like
@ -38,14 +38,14 @@ Open a post in a text editor and you'll see a block of [yaml front matter](https
which tells Jekyll how to processes posts and pages. which tells Jekyll how to processes posts and pages.
``` yaml ``` yaml
--- ---
layout: post layout: post
title: "Zombie Ninjas Attack: A survivor's retrospective" title: "Zombie Ninjas Attack: A survivor's retrospective"
date: 2011-07-03 5:59 date: 2011-07-03 5:59
comments: true comments: true
external-url: external-url:
categories: categories:
--- ---
``` ```
Here you can turn comments off and or categories to your post. If you are working on a multi-author blog, you can add `author: Your Name` to the Here you can turn comments off and or categories to your post. If you are working on a multi-author blog, you can add `author: Your Name` to the
@ -54,17 +54,17 @@ metadata for proper attribution on a post. If you are working on a draft, you ca
You can add a single category or multiple categories like this. You can add a single category or multiple categories like this.
``` yaml ``` yaml
# One category # One category
categories: Sass categories: Sass
# Multiple categories example 1 # Multiple categories example 1
categories: [CSS3, Sass, Media Queries] categories: [CSS3, Sass, Media Queries]
# Multiple categories example 2 # Multiple categories example 2
categories: categories:
- CSS3 - CSS3
- Sass - Sass
- Media Queries - Media Queries
``` ```
## New Pages ## New Pages
@ -73,24 +73,24 @@ You can add pages anywhere in your blog source directory and they'll be parsed b
Octopress has a rake task for creating new pages easily. Octopress has a rake task for creating new pages easily.
``` sh ``` sh
rake new_page[super-awesome] rake new_page[super-awesome]
# creates /source/super-awesome/index.markdown # creates /source/super-awesome/index.markdown
rake new_page[super-awesome/page.html] rake new_page[super-awesome/page.html]
# creates /source/super-awesome/page.html # creates /source/super-awesome/page.html
``` ```
Like with the new post task, the default file extension is `markdown` but you can configure that in the `Rakefile`. A freshly generated page might look like this. Like with the new post task, the default file extension is `markdown` but you can configure that in the `Rakefile`. A freshly generated page might look like this.
``` yaml ``` yaml
--- ---
layout: page layout: page
title: "Super Awesome" title: "Super Awesome"
date: 2011-07-03 5:59 date: 2011-07-03 5:59
comments: true comments: true
sharing: true sharing: true
footer: true footer: true
--- ---
``` ```
The title is derived from the filename so you'll likely want to change that. This is very similar to the post yaml except it doesn't include categories, and you can toggle sharing and comments or remove the footer altogether. If you don't want to show a date on your page, just remove it from the yaml. The title is derived from the filename so you'll likely want to change that. This is very similar to the post yaml except it doesn't include categories, and you can toggle sharing and comments or remove the footer altogether. If you don't want to show a date on your page, just remove it from the yaml.
@ -104,9 +104,9 @@ Inserting a `<!-- more -->` comment into your post will prevent the post content
## Generate & Preview ## Generate & Preview
``` sh ``` sh
rake generate # Generates posts and pages into the public directory rake generate # Generates posts and pages into the public directory
rake watch # Watches source/ and sass/ for changes and regenerates rake watch # Watches source/ and sass/ for changes and regenerates
rake preview # Watches, and mounts a webserver at http://localhost:4000 rake preview # Watches, and mounts a webserver at http://localhost:4000
``` ```
If you want to work on posts without publishing them, you can add a `published: false` to your post's YAML header. You can preview these posts with `rake preview` on your local server, but they won't get published by `rake generate`. If you want to work on posts without publishing them, you can add a `published: false` to your post's YAML header. You can preview these posts with `rake preview` on your local server, but they won't get published by `rake generate`.
@ -114,9 +114,9 @@ If you want to work on posts without publishing them, you can add a `published:
Using the `rake preview` server is nice, but If you're a [POW](http://pow.cx) user, you can set up your Octopress site like this. Using the `rake preview` server is nice, but If you're a [POW](http://pow.cx) user, you can set up your Octopress site like this.
``` sh ``` sh
cd ~/.pow cd ~/.pow
ln -s /path/to/octopress octopress ln -s /path/to/octopress octopress
cd - cd -
``` ```
Now that you're setup with POW, you'll just run `rake watch` and load up `http://octopress.dev` instead. Now that you're setup with POW, you'll just run `rake watch` and load up `http://octopress.dev` instead.

View File

@ -62,7 +62,7 @@ Easily embed gists in your posts or pages.
## Include Code ## Include Code
Import files on your filesystem into any blog post as embedded code snippets with syntax highlighting and a download link. Import files on your filesystem into any blog post as embedded code snippets with syntax highlighting and a download link.
{% include_code Testing include_code test.js %} {% include_code test.js Testing include_code %}
[Examples & documentation &raquo;](/docs/plugins/include-code/) [Examples & documentation &raquo;](/docs/plugins/include-code/)