NTextile

Overview

NTextile is a lightweight, humane web compatible markup generator. It generates valid XHTML output using simple easy to remember conventions and text characters (a.k.a modifiers), to markup plain text. NTextile is especially useful to provide quick and valid markup for .NET web applications. For e.g. blogs, online forums, content management systems etc.

This reference guide is generated using NTextile (eating my own dog food!). The XHTML output shown in the examples are as produced by NTextile itself. This guide will be updated from time to time to reflect changes to its syntax, output and features.

Reading this guide

NTextile is best illustrated by example. Each example shows the following:

  • Original NTextile input
  • Generated Output, which is the result as displayed in a web browser,
  • The raw XHTML output

Download

You can download NTextile source code and usage.
You can also download from Codeplex.

Block Modifiers

Block modifiers are triggered by placing special characters at the begining of the text. For e.g. h1. for heading 1, bq. for Blockquote etc. The block ends with a blank line.

All block modifiers have support for alignments (left, right, justify and center) and support attributes for e.g. class, id, language etc. Please see the syntax for attributes and alignments in the relavent sections of this guide.

Headers[1–6]

Headers are triggered by h1.[space], h2.[space] etc in front of the text to be modified. Note that a space should separate the modifier from the text to modify

Original Input

h1. Heading 1

Browser View

Heading 1

XHTML Output


<h1>Heading 1</h1>

Blockquote

Blockquotes are triggered by placing bq.[space] in front of the text to be modified. It indicates a quoted block of text. Note that a space should separate the modifier from the text to modify

Original Input

bq. It is better to be a courageous dog than a timid lion – Sai Panyam

Browser View

It is better to be a courageous dog than a timid lion – Sai Panyam

XHTML Output

<blockquote>It is better to be a courageous dog than a timid lion &#8211; Sai Panyam</blockquote>

Paragraph

Paragraphs are triggered by placing p.[space] in front of the text to be modified. This is the default block type: any paragraph without a block modifier will automatically be enclosed with p tags. Note that a space should separate the modifier from the text to modify

Original Input

p. This text will be enclosed in paragraphs.

Browser View

This text will be enclosed in paragraphs.

XHTML Output

<p>This text will be enclosed in paragraphs.</p>

Blockcode

Blockcode is triggered by placing bc.[space] in front of the text to be modified. Code such as .NET, XHTML, Javascript etc. may be displayed using this modifier. This modifier is used to display code to the reader and is not meant for execution. Note that a space should separate the modifier from the text to modify

Original Input

bc. <script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("<b>Good morning</b>")
}
</script>

Browser View

<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("<b>Good morning</b>")
}
</script>

XHTML Output

<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
var d = new Date()
var time = d.getHours()
if (time &lt; 10)
{
document.write(&quot;&lt;b&gt;Good morning&lt;/b&gt;&quot;)
}
&lt;/script&gt;</code></pre>

Preformat

Preformat is triggered by placing pre.[space] in front of the text to be modified. pre. is almost identical to bc., with the exception that code tags are not used within the pre block. Note that a space should separate the modifier from the text to modify

Original Input

pre. This text is preformatted.

Browser View

This text is preformatted.

XHTML Output

<pre>This text is preformatted.</pre>

Notextile

Notextile is triggered by placing notextile.[space] in front of the text to be modified. It applies no NTextile processing to the block text. So this may be used to insert explicit XHTML markup. Note that a space should separate the modifier from the text to modify

Original Input

notextile. <script type="text/javascript">
document.write("Hello World!");
</script>
<noscript>Your browser doesn't support Javascript</noscript>

Browser View


XHTML Output

<script type="text/javascript">
document.write("Hello World!");
</script>
<noscript>Your browser doesn't support Javascript</noscript>

Phrase Modifiers

Phrase modifiers are usually applied by enclosing the text to be modified with the corressponding phrase modifier’s operator characters. The operators must open and close within a single paragraph to produce valid markup.

Emphasis

Use underscores around text to be emphasized. The em HTML tag is applied to the enclosed text.

Original Input

I would like to draw your attention to the _significant_ global warming that has taken place over the past decade.

Browser View

I would like to draw your attention to the significant global warming that has taken place over the past decade.

XHTML Output

<p>I would like to draw your attention to the <em>significant</em> global warming that has taken place over the past decade.</p>

Italics

If the text is not meant to have structural emphasis, but simply to be styled in italic, use double underscores. The i HTML tag is applied to the enclosed text.

Original Input

The reason I __do__ is because I __can__ !

Browser View

The reason I do is because I can !

XHTML Output

<p>The reason I <i>do</i> is because I <i>can</i> !</p>

Strong

Use asterisks around text to be strongly emphasised. The strong HTML tag is applied to the enclosed text.

Original Input

I *strongly* suggest that you take heed of my advice.

Browser View

I strongly suggest that you take heed of my advice.

XHTML Output

<p>I <strong>strongly</strong> suggest that you take heed of my advice.</p>

Bold

If the text is not meant to have structural emphasis, but simply to be styled in bold use double asterisks. The b HTML tag is applied to the enclosed text.

Original Input

I **think** therefore I **am**!

Browser View

I think therefore I am!

XHTML Output

<p>I <b>think</b> therefore I <b>am</b>!</p>

Inserted Text

Use pluses around text that needs to be shown as inserted. The ins HTML tag is appled to the enclosed text.

Original Input

Please +insert+ this flyer in the goodies bag.

Browser View

Please insert this flyer in the goodies bag.

XHTML Output

<p>Please <ins>insert</ins> this flyer in the goodies bag.</p>

Deleted Text

Use minuses around text that needs to be shown as deleted. The del HTML tag is appled to the enclosed text.

Original Input

The tennis match has been –scheduled– rescheduled due to inclement weather.

Browser View

The tennis match has been scheduled rescheduled due to inclement weather.

XHTML Output

<p>The tennis match has been <del>scheduled</del> rescheduled due to inclement weather.</p>

Citation

Use double question marks around text that needs to be shown as a citation. The cite HTML tag is applied to the enclosed text.

Original Input

??Journey To Ixtlan??, by Carlos Castaneda

Browser View

Journey To Ixtlan, by Carlos Castaneda

XHTML Output

<p><cite>Journey To Ixtlan</cite>, by Carlos Castaneda</p>

Span

Use percentage(%) character around text that needs to be shown within a span. The span HTML tag is appled to the enclosed text.

Original Input

The %San Fransisco% bridge has a big span.

Browser View

The San Fransisco bridge has a big span.

XHTML Output

<p>The <span>San Fransisco</span> bridge has a big span.</p>

Superscript

Use caret(^) character around text that needs to be shown as a superscript. The sup HTML tag is appled to the enclosed text.

Original Input

Solving equation 2^x^ = 8 gives x=3.

Browser View

Solving equation 2x = 8 gives x=3.

XHTML Output

<p>Solving equation 2<sup>x</sup> = 8 gives x=3.</p>

Subscript

Use tilde(~) character around text that needs to be shown as a subscript. The sub HTML tag is appled to the enclosed text.

Original Input

In mathematics, the binary logarithm (log~2~ n) is the logarithm for base 2.

Browser View

In mathematics, the binary logarithm (log2 n) is the logarithm for base 2.

XHTML Output

<p>In mathematics, the binary logarithm (log<sub>2</sub> n) is the logarithm for base 2.</p>

Other Modifiers

One can also apply the following special case modifiers:

Link Modifier

Hypertext links can be rendered by putting link text in “quotation marks” followed immediately by a colon and the URL of the link. Optionally we can provide for the title attribute by putting text in (parentheses) following the link text, but before the closing quotation mark.This text will be visible as a tooltip when the cursor hovers above the hyperlink.

Original Input

“My Website(Sai Panyam.NET)”:http://www.saipanyam.net

Browser View

My Website

XHTML Output

<p><a  HREF="http://www.saipanyam.net" title="Sai Panyam.NET">My Website</a></p>

Image Modifier

Image can be inserted by putting the URL for the image inside exclamation marks. Optionally we can provide for the alt attribute of the image by putting text in (parentheses) following the URL, but before the closing exclamation mark.This text will be visible as alternate text.

Original Input

!http://www.saipanyam.net/wp-content/uploads/2009/04/192-150×150.jpg(Yours truly!)!

Browser View

Yours truly!

XHTML Output

<p><img src="http://www.saipanyam.net/wp-content/uploads/2009/04/192-150x150.jpg" alt="Yours truly!" /></p>

Image + Link Modifier

Image and Link can be combined to make an image as hyperlink. The synatx is similar to that of an image, followed by a colon and a URL to make the image into a link.

Original Input

!http://www.saipanyam.net/wp-content/uploads/2009/04/192-150×150.jpg(Yours truly again!)!:http://www.saipanyam.net

Browser View

Yours truly again!

XHTML Output


<p><a href="http://www.saipanyam.net" ><img src="http://www.saipanyam.net/wp-content/uploads/2009/04/192-150x150.jpg" alt="Yours truly again!" /></a></p>

Acronym Modifier

All strings of three or more uppercase letters are wrapped in acronym HTML tags. To define the acronym, place the full text in (parentheses) immediately following the acronym.

Original Input

APS(American Philosophical Society)- example of Acronym

Browser View

APS– example of Acronym

XHTML Output

<p><acronym title="American Philosophical Society">APS</acronym>- example of Acronym</p>

Numbered List Modifier

A numbered list can be created by placing each item on a new line, preceded by #[space]. Optionally attributes, for e.g. color, font etc. can be added to each list item or to the list as a whole. An attribute present on the first item in the list will be applied to the entire list, unless overriden by a different attribute placed on the individual list item.

2Numbered list with and without attributes.

Original Input

Here is a list of popular fruits:
# Apples
# Oranges
# Bananas
# Grapes
Here the list is ALL red:
#{color:red} Apples
# Oranges
# Bananas
# Grapes
This fruits list is more informational!
#{color:red} Apples
#{color:orange} Oranges
#{color:yellow} Bananas
#{color:green} Grapes

Browser View

Here is a list of popular fruits:

  1. Apples
  2. Oranges
  3. Bananas
  4. Grapes

Here the list is ALL red:

  1. Apples
  2. Oranges
  3. Bananas
  4. Grapes

This fruits list is more informational!

  1. Apples
  2. Oranges
  3. Bananas
  4. Grapes

XHTML Output

Here is a list of popular fruits:<ol><li> Apples</li><li> Oranges</li><li> Bananas</li><li> Grapes</li></ol>
Here the list is ALL red:<ol  style="color:red" >
<li  style="color:red" > Apples</li>
<li> Oranges</li>
<li> Bananas</li>
<li> Grapes</li>
</ol>
This fruits list is more informational!<ol  style="color:red" >
<li  style="color:red" > Apples</li>
<li  style="color:orange" > Oranges</li>
<li  style="color:gold" > Bananas</li>
<li  style="color:green" > Grapes</li></ol>

Bulleted List Modifier

A bulleted list can be created by placing each item on a new line, preceded by *[space]. Optionally attributes, for e.g. color, font etc. can be added to each list item or to the list as a whole. An attribute present on the first item in the list will be applied to the entire list, unless overriden by a different attribute placed on the individual list item.

3Bulleted list with and without attributes.

Original Input

Here is a list of popular fruits:
* Apples
* Oranges
* Bananas
* Grapes
Here the list is ALL red:
*{color:red} Apples
* Oranges
* Bananas
* Grapes
This fruits list is more informational!
*{color:red} Apples
*{color:orange} Oranges
*{color:gold} Bananas
*{color:green} Grapes

Browser View

Here is a list of popular fruits:

  • Apples
  • Oranges
  • Bananas
  • Grapes

Here the list is ALL red:

  • Apples
  • Oranges
  • Bananas
  • Grapes

This fruits list is more informational!

  • Apples
  • Oranges
  • Bananas
  • Grapes

XHTML Output

Here is a list of popular fruits:<ul><li> Apples</li><li> Oranges</li><li> Bananas</li><li> Grapes</li></ul>
Here the list is ALL red:<ul  style="color:red" >
<li  style="color:red" > Apples</li>
<li> Oranges</li>
<li> Bananas</li>
<li> Grapes</li>
</ul>
This fruits list is more informational!<ul  style="color:red" >
<li  style="color:red" > Apples</li>
<li  style="color:orange" > Oranges</li>
<li  style="color:gold" > Bananas</li>
<li  style="color:green" > Grapes</li>
</ul>

Footnote & FootnoteRef Modifier

Footnote References are created using numbers in [square brackets] adjacent to the text that needs to be referenced. To create the footnote that corresponds to its reference, on a new line start the footnote with fn and the footnote’s number, followed by a [dot] and a [space]:

Original Input

The specific details about this widget are covered elsewhere[1].
fn1. Widget design and mechanism.

Browser View

The specific details about this widget are covered elsewhere1.

1Widget design and mechanism.

XHTML Output

<p>The specific details about this widget are covered elsewhere<sup><a href='#fn1' >1</a></sup>.</p>
<p  id="fn1" ><sup>1</sup>Widget design and mechanism.</p>

Attributes

NTextile supports 5 different types of attributes. Namely class, id, class & id combined, language and style. Attributes can be applied to Phrase, Block and List Modifiers.

Class

A class modifier is applied by enclosing the class name in (parentheses). In Phrase modifiers it comes right after the phrase modifier’s start operator (for e.g. after % etc.). In Block modifiers it is after the Block modifier’s operator and before the period. In List modifiers it is after the ‘#’ or ‘*’ symbol.

See Numbered List Modifier2 and its attribute usage.

See Bulleted List Modifier3 and its attribute usage.

Original Input

p(input). This paragraph will display with the styles defined in the “input” css class.

Please highlight the following %(output)points% while presenting.

Browser View

This paragraph will display with the styles defined in the “input” css class.

Please highlight the following points while presenting.

XHTML Output

<p  class="input" >This paragraph will display with the styles defined in the &#8220;input&#8221; css class.</p>
<p>Please highlight the following <span  class="output" >points</span> while presenting.</p>

Id

An Id modifier is applied by enclosing the id value in (#idvalue). In Phrase modifiers it comes right after the phrase modifier’s start operator (for e.g. after % etc.). In Block modifiers it is after the Block modifier’s operator and before the period. In List modifiers it is after the ‘#’ or ‘*’ symbol.

Original Input

p(#para1). This paragraph will display with an id value of ‘para1’.

Please highlight the following %(#para2)points% while presenting.

Browser View

This paragraph will display with an id value of ‘para1’.

Please highlight the following points while presenting.

XHTML Output

<p  id="para1" >This paragraph will display with an id value of &#8216;para1&#8217;.</p>
<p>Please highlight the following <span  id="para2" >points</span> while presenting.</p>

Class & Id

Class and Id can be combined by enclosing the class name together with ‘#” and followed by id value in (parentheses).

Original Input

p(input#para3). This paragraph will display with the styles contained in “input” css class and an id value of ‘para3’.

Please highlight the following %(input#para4)points% while presenting.

Browser View

This paragraph will display with the styles contained in “input” css class and an id value of ‘para3’.

Please highlight the following points while presenting.

XHTML Output

<p  class="input" id="para3" >This paragraph will display with the styles contained in &#8220;input&#8221; css class and an id value of &#8216;para3&#8217;.</p>
<p>Please highlight the following <span  class="input" id="para4" >points</span>
 while presenting.</p>

Language

The Language attribute is applied by enclosing the language text within [Box Brackets]. The text in the box brackets will be taken as the attribute value for the lang attribute.

Original Input

p[fr]. This isn’t french. So why are you speaking in french?

Browser View

This isn’t french. So why are you speaking in french?

XHTML Output

<p  lang="fr" >This isn&#8217;t french. So why are you speaking in french?</p>

Style

Style attributes are applied by enclosing the style in {Flower Brackets}. The text between the flower brackets will be taken as the attribute value for the style attribute.

Original Input

p{color:red}. This paragraph will be red in color as we have applied that style attribute.

Browser View

This paragraph will be red in color as we have applied that style attribute.

XHTML Output

<p  style="color:red" >This paragraph will be red in color as we have applied that style attribute.</p>

Alignments

There are four types of alignments that can be applied: left, right, justify and center. Alignments can be applied to Phrase, Block and List modifiers. Align left is applied using ‘<‘, align right using ‘>’, justified using ‘<>’ and centered using ‘=’.

Original Input

p<. This paragraph is left aligned.

p>. This paragraph is right aligned.

p<>. This paragraph is justified.

p=. This paragraph is centered.

Browser View

This paragraph is left aligned.

This paragraph is right aligned.

This paragraph is justified.

This paragraph is centered.

XHTML Output

<p  style="text-align:left;" >This paragraph is left aligned.</p>
<p  style="text-align:right;" >This paragraph is right aligned.</p>
<p  style="text-align:justify;" >This paragraph is justified.</p>
<p  style="text-align:center;" >This paragraph is centered.</p>

Punctuations

Punctuations are transformations of certain text characters into HTML entities. Please find below the list of punctuations supported by NTextile:

  • Replace single and double quotes ‘ and ” used as quotation marks with HTML entities for opening and closing quotation marks ‘’ and “”.
  • Replace double hyphens (–) with an em-dash (—) entity.
  • Replace single hyphens surrounded by spaces with an en-dash (–) entity.
  • Convert the letter x to a dimension sign: 20.6 x 4.8 to 20.6 × 4.8 .
  • Convert (TM), (R), and (C) to ™, ®, and ©.
  • Replace triplets of periods (…) with an ellipsis (…) entity.

Original Input

"Double Quotes"
'Single Quotes'
it's a test of aphostrophe
em -- dash
en - dash
2 x 4
foo(tm)
foo(r)
foo(c)
p. It was a dark windy night. People were hurrying to get back into the warmth of their
homes. Meanwhile...

Browser View

“Double Quotes”

‘Single Quotes’

it’s a test of aphostrophe

em — dash

en – dash

2 × 4

foo™

foo®

foo©

It was a dark windy night. People were hurrying to get back into the warmth of their homes. Meanwhile…

XHTML Output

<p>&#8220;Double Quotes&#8221;
	      &#8216;Single Quotes&#8217;
              it&#8217;s a test of aphostrophe
              em &#8212; dash
              en &#8211; dash
              2 &#215; 4
              foo&#8482;
              foo&#174;
              foo&#169;
              p. It was a dark windy night. People were hurrying to get back into the warmth of their<br/>homes. Meanwhile&#8230;</p>

Credits & Caveats

This project was inspired by Dean Allen’s original Textile features, as included in the Textpattern content management application.

This guide describes the .NET 2.0 version of NTextile. Please note that it is not a .NET port of Textile, but mimics it in terms of features and operations. Also note that not all of the syntax described in this guide will work on versions other than NTextile.

Disclaimer

This document may be changed substantially from time to time, corressponding to the release of different versions of NTextile.

The information contained in this document represents the current view of Sai Panyam regarding NTextile features and capabilities. It should not be interpreted to be a commitment on the part of Sai Panyam, and Sai Panyam cannot gaurentee the accuracy of any information presented here.

The guide is for informational purposes only. SAI PANYAM MAKES NO WARRANTIES, EXPRESS OR IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS DOCUMENT.


%d bloggers like this: