Skip to content

Commit 8f0f4be

Browse files
committed
More complete documentation in the README
1 parent 32ff454 commit 8f0f4be

File tree

1 file changed

+93
-20
lines changed

1 file changed

+93
-20
lines changed

README.md

Lines changed: 93 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
1-
# CodeBlock Extension for Twig
1+
# Codeblock Extension for Twig
22

33
[![Build Status](https://travis-ci.org/ramsey/twig-codeblock.svg?branch=master)](https://travis-ci.org/ramsey/twig-codeblock)
4-
[![Coverage Status](https://coveralls.io/repos/ramsey/twig-codeblock/badge.svg)](https://coveralls.io/r/ramsey/twig-codeblock)
4+
[![Coverage Status](https://coveralls.io/repos/ramsey/twig-codeblock/badge.svg?branch=master)](https://coveralls.io/r/ramsey/twig-codeblock?branch=master)
55

6-
Documentation to be updated and polished soon...
6+
The {% codeblock %} extension for Twig is a port of the [Octopress codeblock liquid tag](https://github.com/octopress/codeblock) for use with the [Twig template engine for PHP](http://twig.sensiolabs.org/).
77

8-
### Using the codeblock tag
8+
By default, Codeblock uses the [Pygments Python syntax highlighter](http://pygments.org/) for generating HTML mark-up suitable for highlighting blocks of code. However, it is flexible enough to use any syntax highlighter of your choice; simply implement the `HighlighterInterface` and provide some additional configuration (see below for an example).
99

10-
Highlight your source code...
10+
## Using the Codeblock tag
11+
12+
To highlight blocks of code, start the code block with the `{% codeblock %}` tag and end it with the `{% endcodeblock %}` tag. For example:
1113

1214
{% codeblock lang:php %}
15+
<?php
1316
namespace Foo;
1417

1518
/**
@@ -31,10 +34,88 @@ Highlight your source code...
3134
}
3235
{% endcodeblock %}
3336

37+
A number of options are available to Codeblock:
38+
39+
Option | Description
40+
----------- | ------------
41+
lang | the programming language used in the code block
42+
format | the output format (defaults to "html")
43+
linenos | "true" to turn on line numbers (defaults to "false")
44+
start | starting line number, if linenos is "true"
45+
end | ending line number, if linenos is "true"
46+
range | starting and ending line numbers, overrides start and end (e.g. "101-118")
47+
mark | marks one or more lines of code to be highlighted in the output (e.g. "102,111-113,117")
48+
phpopentag | "false" to highlight PHP code without needing the PHP open tag (defaults to "true")
49+
50+
In addition to the options, you may also pass three text attributes. These are not named and must be wrapped in quotation marks (see example).
51+
52+
Attribute | Description
53+
----------- | ------------
54+
title | Provides a `<figcaption>` title for the code block
55+
link | Provides a link to the external source of the code, if desired
56+
link text | Provides the text to use for the link, otherwise "link" is used
57+
58+
A more complex example:
59+
60+
{% codeblock lang:php phpopentag:false start:11 mark:3,8 "Methods on a Class" "http://example.com/full-listing" %}
61+
public function __construct(BazInterface $baz)
62+
{
63+
$this->baz = $baz;
64+
}
65+
66+
public function doIt()
67+
{
68+
return $this->baz->do('it');
69+
}
70+
{% endcodeblock %}
71+
72+
## Output
73+
74+
If using "html" as the format output (which is the default), the resulting HTML output will wrap the highlighted code in a `<figure>` element. If you have provided a title and link, a `<figcaption>` will also be present.
75+
76+
Here's an example of HTML output that Pygments might generate, including the figure and figcaption elements provided by Codeblock (cleaned up for readability):
3477

35-
#### Pygments lexers
78+
``` html
79+
<figure class="code-highlight-figure">
80+
<figcaption class="code-highlight-caption">
81+
<span class="code-highlight-caption-title">Methods on a Class</span>
82+
<a class="code-highlight-caption-link" href="http://example.com/full-listing">link</a>
83+
</figcaption>
84+
<div class="highlight"><pre>
3685

37-
If you're using Pygments, here are just a few of the lexers it supports:
86+
<span class="k">public</span> <span class="k">function</span> <span class="nf">__construct</span><span class="p">(</span><span class="nx">BazInterface</span> <span class="nv">$baz</span><span class="p">)</span>
87+
<span class="p">{</span>
88+
<span class="hll"> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">baz</span> <span class="o">=</span> <span class="nv">$baz</span><span class="p">;</span>
89+
</span><span class="p">}</span>
90+
91+
<span class="k">public</span> <span class="k">function</span> <span class="nf">doIt</span><span class="p">()</span>
92+
<span class="p">{</span>
93+
<span class="hll"> <span class="k">return</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">baz</span><span class="o">-&gt;</span><span class="na">do</span><span class="p">(</span><span class="s1">&#39;it&#39;</span><span class="p">);</span>
94+
</span><span class="p">}</span>
95+
96+
</pre></div>
97+
</figure>
98+
```
99+
100+
## Pygments
101+
102+
By default, Pygments is used for highlighting code. You will need to [install Pygments](http://pygments.org/) and ensure that the `pygmentize` CLI tool is available on your system. See the Configuration section for help configuring Codeblock if `pygmentize` is not in your `PATH`.
103+
104+
### Styles
105+
106+
A syntax highlighter, such as Pygments, requires a stylesheet for the markup it generates. Pygments provides some styles for you, which you may list from the command line:
107+
108+
pygmentize -L styles
109+
110+
To output and save one of these styles for use in your application, use:
111+
112+
pygmentize -S default -f html > default.css
113+
114+
Additionally, there are many custom Pygments styles found on the web, and you may create your own.
115+
116+
### Languages
117+
118+
If you're using Pygments, here are a few of the languages (lexers) it supports:
38119

39120
* bash, sh, ksh, shell
40121
* console
@@ -62,20 +143,17 @@ To see more, type the following from the command line:
62143

63144
pygmentize -L lexers
64145

146+
## Configuration
65147

66-
### Using the built-in Pygments helper
67-
68-
By default, the extension uses Pygments and, if `pygmentize` is in your `PATH`,
69-
then you do not need to pass any arguments.
148+
By default, the extension uses Pygments and, if `pygmentize` is in your `PATH`, then you do not need to pass any arguments.
70149

71150
services:
72151
ramsey.twig.codeblock_extension:
73152
class: Ramsey\Twig\CodeBlock\CodeBlockExtension
74153
tags:
75154
- { name: twig.extension }
76155

77-
However, if `pygmentize` is not in the `PATH`, then you may specify it's
78-
location, like this:
156+
However, if `pygmentize` is not in the `PATH`, then you may specify its location, like this:
79157

80158
services:
81159
ramsey.twig.codeblock_extension:
@@ -87,14 +165,9 @@ location, like this:
87165
- [/usr/local/bin/pygmentize]
88166

89167

90-
### Using your own highlighter
168+
## Using your own highlighter
91169

92-
If you have your own highlighter class that implements
93-
`Ramsey\Twig\CodeBlock\Highlighter\HighlighterInterface`, then you may specify
94-
the fully-qualified classname as the first argument to the extension. The second
95-
argument is an array of 0-indexed values that will be passed as arguments to
96-
your class constructor. Make sure that you specify them in the correct order as
97-
your constructor requires.
170+
If you have your own highlighter class that implements `Ramsey\Twig\CodeBlock\Highlighter\HighlighterInterface`, then you may specify the fully-qualified classname as the first argument to the extension. The second argument is an array of 0-indexed values that will be passed as arguments to your class constructor. Make sure that you specify them in the correct order as your constructor requires.
98171

99172
services:
100173
ramsey.twig.codeblock_extension:

0 commit comments

Comments
 (0)