www.ThimbleOpenSource.com

ThimbleText syntax


Syntax of ThimbleText pseudo-markup-language was developed so it is readable by average human and it looks good in plain-text too.

Quick links:

Headlines, titles

These are equivalents of H1, H2 and H3:

H1 - the most important headline

Headline 1
##########

H2 - used for dividing page to sections

Headline 2
==========

H3 - good for paragraphs, etc.

Headline 3
----------

Text formatting

Nothing else than bold, italics and underline:

Bold

*bold* -->> bold

Italics

**italics** -->> italics

Underline

--underline-- -->> underline

There is defined so-called escape character that tells the parser to not parse next special character and parser ignores it. This escape character is slash ( / ). Look at example:

This is *bold text /* with star* which is not parsed.

Links

There are two ways you can define links. Either inline, right in the place you want it to be used, or you can define link with its name somewhere in the text and then use it anytime you want in the text.

Links - inline definition

It's very close to link usage in html. There is opening and closing tag:

[http://www.thimbleopensource.com]some text[/]

If you want link to be opened in new window, just put ^ at the very end of opening tag:

[http://www.thimbleopensource.com^]some text[/]

You can specify as many (X)HTML properties as you want, just use comma delimited list of properties and values:

[http://www.google.com,title=great search engine]google[/]

[http://www.google.cz,title=google,target=_top]google[/]

[http://www.google.com,title=search engine^]google[/]

Links - defined separately

You can define anywhere in the text your links you wish to use in other place of the document. This is great, because it helps you to keep your text clean and more readable.
Here is definition of the link and it's usage in the text:

Definition:
[link_name=http://www.google.com]
Usage in text:
[link_name]google[/link_name]

In seperate link definition you can specify same attribute syntax as with inline links. Here is brief list of possible syntax:

[link_name=http://www.google.com,title=great search engine]

[link_name=http://www.google.cz,title=google,target=_top]

[link_name=http://www.google.com,title=search engine^]

Links - on-the-fly

ThimbleText parser searches for URLs or email in the text and automatically converts them into links. And it also offers small tuning of this feature, so you can quickly make the link to open in new window. Simple example first:

john@doe.com --> <a href="john@doe.com">john@doe.com</a>

www.google.com --> <a href="http://www.google.com">www.google.com</a>

If you use ^ right in front of the link, then the resulting link will open in a new browser window. Example follows:

Some text with link to ^www.google.com to be opened in new window.

Sometimes you don't want the URL or email to be automatically and instead you want it to leave intact by parser. So the easiest way to do that, is to use so-called escape character, in our case slash ( / ), example:

/john@doe.com
/www.google.com

Images

There two types of defining images, very similar to the way the links are defined. Let's look at inline image definition:

Images - inline definition

{http://www.google.com/logos/balloon08.gif}

Using comma delimited list, you can specify (X)HTML attributes for image:

{http://www.google.com/logos/balloon08.gif,alt=Google logo,border=0}

And also you can use quick way how to align the image either to the left or right side:

Align to the left:
{http://www.google.com/logos/balloon08.gif<}

Align to the right:
{http://www.google.com/logos/balloon08.gif>}

And you can mix it up with using attributes:

{http://www.google.com/logos/balloon08.gif,alt=Google logo>}

Images - defined separately

The same rules apply as to defining links separately. You can define image anywhere in the text and use it any times in the text as needed. Simple example:

Usage in text:
{image_name}

Definition of the image:
{image_name=http://www.google.com/logos/balloon08.gif}

And you can also use same syntax for defining parameters of the image, so quick example:

{image_name=http://www.google.com/logos/balloon08.gif,alt=alternative text}

{image_name=http://www.google.com/logos/balloon08.gif,alt=alternative text,border=0}

{image_name=http://www.google.com/logos/balloon08.gif,alt=alternative text,border=0>}

Specifying paremeters can be mixed, they can be set in the definition and the same paremeter can be overriden in actual place where image should appear. Example is better than words:

Definition somewhere in the text:
{image_name=http://www.google.com/logos/balloon08.gif,border=0}

And usage in text overrides parameters set in definition:
{image_name,border=1}

Lists

As for now, ThimbleText supports only unordered lists. But it supports multiple nesting of lists. Let's start with simple list:

- item 1
- item 2
- item 3

Defining nested lists is pretty easy, just make sure, there is same number of spaces in front of the item for those, that should have same level of nesting.

- item level 1
- item level 1
    - item level 2
        -item level 3

Ordered lists

The same rules apply when you want ordered list. That is, instead of bullets in front of the items, there will be numbers or letters, that depends on your CSS styles. You can define ordered list either by numbers, letters, or mix them as you like. These are combinations you can use: 1. or 1) or a) or A) or A. - here are two examples:

1. one item
2. second item
    1. third item
3) fourth item

a) item 1
b) item 2
    3. item 3
c. item 4

CSS classes and styles

Classes and individual styles can be set for each paragraph. This is done by special tag placed right at the beginning of a new paragraph.
You can set styles either in its place at the beginning of paragraph, or you can define your style somewhere else in the text and then use their name multiple times.
First example shows setting class name for paragraph:

>class_name< This is some regular paragraph text.

Easily combined with paragraph indenting:
>class_name<   This is some regular paragraph text.

Next example is inline usage of paragraph style definition:

)background-color:blue( This is some regular paragraph text.

And last example shows style definition and its multiple usage in the text:

Style definition:
)style_name=background-color:blue(

Style usage in text:
)style_name( This is some regular paragraph text.

New (empty) lines

New line is ignored. When you want to indent parts of the text by newlines ( <br /> ), you have to put one space-character at the beginning and then make a newline.

Comments

Comments in the text are defined from the comment-sign ||(two pipes) to the end of line. Comments can start at the beginning of the line, or somewhere in the middle. Everything what is on the left side of comment-sign will be left out.

This is normal text || and this is "invisible" comment

Blocks (divs)

You can divide text into logical blocks. These are translated into XHTML as DIVs. When defining block, you have to give it an unique name, respectively id. Block is a paired tag with 2 opening parenthesis and 2 closing parenthesis.Blocks can be nested in each other as you like. Example of simple block definition:

((block_name))
Some content in the block
((/block_name))

If you want to assign CSS class to a block, use thimble_text class definition like this:

((block_name)) >class_name<
Block content
((/block_name))

Similarly you can also assign style to a block:

((block_name)) )background-color:blue(
Block content
((/block_name))

And last example is setting both class name and style to a block. Please note the order, first class definition, then style definition:

((block_name)) >class_name< )background-color:blue(
Block content
((/block_name))

Line break with float-clear

When some element has floating set, sometimes you want to end its float and begin new line without float. In XHTML this is achieved by <br style="clear:both">. This type of line-break is done by 2 underscores on seperate line. Example of usage is here:

__   this is <br style="clear:both">

Clearing only left or right floating is possible, here is syntax:

<_   this is <br style="clear:left">
>_   this is <br style="clear:right">

Text with code (html, php, ...)

Normally, html is not changed in any way, so you can include in your text direct html tags. If you want your HTML to be converted to HTML entities, so browser doesn't parse it, rather it displays it as regular text, then you can use paired tags (html) and (/html). Example follows:

This <div style="border:1px solid red;"> is </div> is parsed by browser and displayed as a box with red border.

(html)But this <div> is </div> is displayed as regular text(/html)

Another feature is highlighting PHP code. This is done very similarly as in previous example, the paired tags are now (php) and (/php). Quick example:

(php)<php? phpinfo(); ?>(/php)

Turn-off the parser

Sometimes you want to turn-off the parser for certain part of the text. Put the text in special brackets and everything what is inside these brackets will not be parsed.

Opening bracket: (!--
Closing bracket: --)

This *will be bold*, but (!-- this will *NOT be bold* and neither parsed. Great.--)