Textile block modifiers in Textpattern CMS

admin-ajax

Textpattern CMS includes support for Textile, a markup language for formatting content. In this article, I’ll focus on how to use Textile as a block modifier for text. For your reference, that includes:

  • paragraphs
  • headings
  • block code
  • pre-formatted text
  • HTML
  • block quotes

Depending on the content of your Textpattern website, you will use one or more of the above list more often than the others. Paragraphs (like this one, in fact) are very widely-used, so that’s where I’ll start. A paragraph in HTML is text wrapped in `<p>` tags, like this:

<p>This is a short paragraph.</p>

Simple. It’s also possible to add a line break inside a paragraph, too:

<p>This is a paragraph with<br />
a line break.</p>

In Textile, a paragraph is indicated by `p.` and the line break is automatically figured out with the return key, or a line break in the text. So, in order to get this:

<p>This is a paragraph with<br />
a line break.</p>

…this is the Textile used:

p. This is a paragraph with
a line break.

Fewer characters to type, and it creates valid (X)HTML.

Headers are also widely-used across websites, and are typically represented by text wrapped in `<h1>`–`<h6>` tags, like this:

<h1>This is a header</h1>
<h2>This is a subheading</h2>
<h3>This is a third-level subheading</h3>

…and so forth. The Textile indicator for headings is `h1.`–`h6.` according to the initial h-number. With that on mind, the three-heading code above can be achieved in Textile like this:

h1. This is a header

h2. This is a subheading

h3. This is a third-level subheading

Note the empty lines. Line breaks in Textile are interpreted as line breaks in HTML, and it’s important to have them to separate the three headings in the example. If the empty lines weren’t there, like this:

h1. This is a header
h2. This is a subheading
h3. This is a third-level subheading

The output would be broken and invalid:

<h1>This is a header<br />
h2. This is a subheading<br />
h3. This is a third-level subheading</h1>

Note that the the `h2` and `h3 are not processed into HTML at all, it’s just a single `h1` header that spans three lines thanks to a couple of line breaks. Yucky. Make sure you have line breaks, that’s the moral of the story.

Code blocks are also popular, especially on developer-centric blogs where code samples are shared. Typically, HTML formatted code blocks use `<pre>` tag and a `<code>` tag, like this:

<pre><code># This is line one of my code block.
# This is line two of my code block.
# This is line three of my code block.</code></pre>

There are three lines of code, with no line breaks. The easiest way to Textile-ify these lines is to prepend a `bc.` at the beginning:

bc. # This is line one of my code block.
# This is line two of my code block.
# This is line three of my code block.

There may be situations where code blocks include blank lines for formatting or presentation. Remember that a line break in Textile is interpreted as a line break in HTML, and a blank line will close the tag from the previous thing (see the header example above). That’s easily fixed, though – in the case of long blocks of code with line breaks aplenty, throw a `bc..` at the beginning instead:

bc. # This is line one of my code block.
# This is line two of my code block.
# This is line three of my code block.

# This is line four of my code block.
# This is line five of my code block.

# This is line six of my code block.

When this is parsed, it generates this HTML:

<pre><code># This is line one of my code block.
# This is line two of my code block.
# This is line three of my code block.

# This is line four of my code block.
# This is line five of my code block.

# This is line six of my code block.</code></pre>

Perfect. Note at this point that if you use a `bc.` instead of a `bc..`, lines four through six will turn into numbered lists, like this:

<pre><code># This is line one of my code block.
# This is line two of my code block.
# This is line three of my code block.</code></pre>
<ol>
 <li>This is line four of my code block.</li>
 <li>This is line five of my code block.</li>
</ol>
<ol>
 <li>This is line six of my code block.</li>
</ol>

This is because the pound (hash) symbol is interpreted as a numeric list indicator, and the code block has technically been closed after line two because of – yes – the line break.

Pre-formatted (typically fixed-width) text is similar in some respects to the code block approach, but in this case we substitute `pre.` and `pre..` for `bc.` and `bc..` respectively. Tabs are respected, as are spaces and line breaks. Reusing the previous example, it’s almost identical aside from the opening `pre..`:

pre.. # This is line one of my text block.
# This is line two of my text block.
# This is line three of my text block.

# This is line four of my text block.
# This is line five of my text block.

# This is line six of my text block.

Moving on to HTML handling, HTML code is generally left as-is. To prevent Textile from wrapping HTML with line breaks, insert a space character at the start of each line. You can also, if you prefer, avoid the space character and use `notextile.` instead. If you have long runs of HTML with line breaks in it, use `notextile..`. Again, the double dot at the end is far more efficient for longer runs of text with line breaks.

Blockquotes are pretty easy to do, too. Just use a `bq.` at the start, and you have a valid block quote:

bq. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras augue tortor, sagittis in ex vitae, laoreet tristique nisi.

When this is parsed, it wraps the quote in `<blockquote>` tags:

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras augue tortor, sagittis in ex vitae, laoreet tristique nisi. Nullam iaculis sapien vitae metus varius lacinia.</p>
</blockquote>

Multi-paragraph blockquote? Use the double dot approach:

bq.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Cras augue tortor, sagittis in ex vitae, laoreet tristique nisi.

Want to tack on a citation for the quote? No problem. Just tweak the opening tag with a colon and location:

bq.:http://example.com Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras augue tortor, sagittis in ex vitae, laoreet tristique nisi. Nullam iaculis sapien vitae metus varius lacinia.

This, when parsed, shows a valid blockquote with citation:

<blockquote cite="http://example.com">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras augue tortor, sagittis in ex vitae, laoreet tristique nisi. Nullam iaculis sapien vitae metus varius lacinia.</p>
</blockquote>

Looking for quality Textpattern Hosting? Look no further than Arvixe Web Hosting and use coupon TEXTPATTERN for 20% off your first invoice!

Tags: , , , , , , , , , , | Posted under Textpattern | RSS 2.0

Author Spotlight

Pete Cooper

Pete Cooper has been using Textpattern since 2005. Textpattern is his preferred CMS weapon of choice. Its logical and flexible approach to content management makes Pete happy, as does its lightweight core and helpful user community. Pete's website - petecooper.org - runs on top of Textpattern and chronicles his day-to-day experiences from his home near the Atlantic in north Cornwall, United Kingdom.

Leave a Reply

Your email address will not be published. Required fields are marked *