basic markup

Xilize's basic markup is very similar to Textile and in several ways more capable. It's used as a shorthand to generate HTML tags like <h1>, <blockquote>, <pre>, etc. as well as inline tags like <a>, <img>, <em>, and <span>. There is also markup for lists and tables.

blocks and signatures

Xilize HTML description
p. <p> paragraph, default if no signature is present
h1. <h1> level 1 heading, up to level 6 supported
bq. <blockquote> block quote
pre. <pre> preformatted text
prex. <pre> preformatted with no translation
bc. <pre><code> block code
bcx. <pre><code> block code with no translation
dl. <dl> ... definition list
table. <table> table, explicit signature required only if modifiers applied
hr. <hr /> horizonal rule
divStart. <div> div start tag, modifiers may be applied
divEnd. </div> div end tag
clear. <div ... ></div> clears floating elements

See the signatures category in the example browser.

In Xilize blocks are separated from each other by blank lines and may have a signature. Here are three blocks, two of which have signatures — the third has a signature with modifiers:

The care of human life and happiness, and not their destruction,
is the first and only object of good government.

bq. God is conscience. He is even the atheism of the atheist.

p(quote). Four freedoms: The first is freedom of speech and expression -
everywhere in the world. The second is freedom of everyone to worship God
in his own way, everywhere in the world. The third is freedom from want ...
everywhere in the world. The fourth is freedom from fear ... anywhere in
the world.
  • Blocks correspond roughly to block HTML elements.
  • The signature is always at the start of a block.
  • A block with no signature is given an implied p. signature.
  • Signatures may have modifiers as in the third block above. See the next section.
  • Hard carriage returns within a block are translated (with some exceptions) to <br />. This means in jEdit you usually want to work with word wrap set to soft. See this section of the jEdit tips appendix for more information.

modifiers

markup description
(name) class attribute or (n1,n2,n3) to specify multiple class names — note multiple class names are separated with commas , and no whitespace
(#id) id attribute
(name#id) class name and id attributes
( left padding, 1em per (
) right padding, 1em per )
> right justify text or float element
< left justify text or float element
<> justify text left and right (i.e. style="text-align:justify;")
= center horizontal align
^ top vertical align (applies only to images and table cells)
~ (tilde) bottom vertical align (applies only to images and table cells)
- (hyphen) middle vertical align (applies only to images and table cells)
{style} style attribute
{{attributes}} arbitrary tag attributes
[lang] lang attribute

See the modifiers category in the example browser.

Modifiers:

  • go just before the . (dot/period) at the end of a signature
  • can go after the first % in the <span> phrase markup, in which case they are not followed by a . (dot/period)
  • can be applied to tables, table rows, table cells, lists and list elements — see table and list sections below.
  • translate to HTML tag attributes

Note the special modifier {{attributes}} places arbitrary text inside the HTML start tag it modifies. One thing this allows is the addition of event handlers like onmouseover=myfunction(). Since any text within the double curly braces will be added to the start tag, you become responsible for ensuring it still validates as XHTML.

Modifiers can be grouped as in this extreme example:

bq(important#einstein)(({color:blue;}{{onmouseover=myfunction()}}. text

phrase markup

symbol HTML usage rendering
_ (underscore) emphasis <em> _sample text_ sample text
* strong <strong> *sample text* sample text
__ italics <i> __sample text__ sample text
** bold <bold> **sample text* sample text
- (hyphen) strikethrough <del> -sample text- sample text
+ inserted <ins> +sample text+ sample text
^ superscript <sup> sample ^text^ sample text
~ (tilde) subscript <sub> sample ~text~ sample text
@ code <code> @sample text@ sample text
== no mod n/a ==sample text== sample text
% span <span> %sample text% sample text
++ bigger <big> ++sample text++ sample text
-- smaller <small> --sample text-- sample text

See the phrase markup category in the example browser.

The symbols in the table are used to mark phrases within a block and correspond to inline HTML tags.

Note the %, <span>, can take modifiers like a signature does.

Example:

The _care_ of human life and happiness, and *not* their destruction,
is the first and only object of good government. %{color:red}(( Thomas Jefferson%

<p>The <em>care</em> of human life and happiness, and
<strong>not</strong> their destruction, is the first and only object of
good government. <span style="color:red;padding-left:2em;">Thomas
Jefferson</span></p>

The care of human life and happiness, and not their destruction, is the first and only object of good government. Thomas Jefferson

links and images

markup HTML
"text":url link <a href="url">text</a>
"text (title text)":url link with title text <a href="url" title="title text">text</a>
!url! image <img src="url" />
!url (alternate text)! image with alternate text <img src="url" alt="alternate text" title="alternate text" />
!imgURL!:url linked image <a href="url"><img src="imgURL" /></a>
!imgURL (alt text)!:url linked image with alternate text <a href="url"><img src="imgURL" alt="alt text" title="alt text" /></a>

Link and image markup are a form of phrase markup with a little structure added.

See the links and images category in the example browser.

See also url abbreviations in the directives chapter if you find yourself using the same URL many places in your project.

The < and > modifiers when applied to images cause them to float.

examples

Simple link:

See "here":topics.html for the Xilize2 User Guide.

<p>See <a href="topics.html">here</a> for the Xilize2 User Guide.</p>

See here for the Xilize2 User Guide.

Link with title:

See "here (Xilize2 User Guide)":topics.html for the same link with title text.

<p>See <a href="topics.html" title="Xilize2 User Guide">here</a> for
the same link with title text.</p>

See here for the same link with title text.

Simple image:

This !../images/xilbox.png! is a common image on this site.

<p>This <img src="../images/xilbox.png" /> is a common image on this site.</p>

This is a common image on this site.

Image with alt and title:

This is the same image !../images/xilbox.png (Xilize document list)!
with @alt@ and @title@ attributes set.

<p>This is the same image <img src="../images/xilbox.png" alt="Xilize
document list" title="Xilize document list" /> with <code>alt</code> and
<code>title</code> attributes set.</p>

This is the same image Xilize document list with alt and title attributes set.

link-with-image

There are two ways to create a link using an image rather than text. The easiest way is to just add :url to the end of the standard image markup like this:

!imageURL!:linkURL

Compare the two following examples and look for the difference in where the title attribute ends up.

The most efficient way:

This is an image with a link !../images/xilbox.png (Xilize
reference documentation)!:../xlinks.html

This is an image with a link <a href="../xlinks.html"><img
src="../images/xilbox.png" alt="Xilize  reference documentation"
title="Xilize  reference documentation" /></a>

This is an image with a link Xilize reference documentation

An alternative:

This is an image with a link "!../images/xilbox.png! (Xilize
reference documentation)":../xlinks.html

<p>This is an image with a link <a href="../xlinks.html" title="Xilize
reference documentation"><img src="../images/xilbox.png" /></a></p>

This is an image with a link

lists

markup description
* item top-level unordered list
** item 2nd-level unordered list
# item top-level ordered list
## item 2nd-level ordered list
dl. term : def definition list

See the lists & definition list categories in the example browser.

The example browser shows how basic list markup works. This example shows how modifiers can be applied to lists and list items (and shows that list types can be mixed):

{color:purple}* item 1
** item 1a
**{color:brown} item 1b
*** item 1b1
* item 3
* item 4
## item 5
## item 6

<ul style="color:purple;">
  <li>item 1
    <ul>
      <li>item 1a</li>
      <li style="color:brown;">item 1b
        <ul>
          <li>item 1b1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>item 3</li>
  <li>item 4
    <ol>
      <li>item 5</li>
      <li>item 6</li>
    </ol>
  </li>
</ul>
  • item 1
    • item 1a
    • item 1b
      • item 1b1
  • item 3
  • item 4
    1. item 5
    2. item 6

tables

See the tables category in the example browser.

The example browser shows how basic table markup works. Notice the table. signature is required only when applying modifiers to an entire table; otherwise Xilize recognizes a block in which each line begins with a | (vertical bar) as indicating a table.

  • each line of a table block is taken to be a row in the table
  • Xilize is aware of table headers <thead> and footers <tfoot> as well as column groups — <colgroup> and <col>
  • row, cells, and the entire table may have modifiers, note that cell modifiers end with a . (dot/period)

table header and footer rows

Here is a table with header and footer rows with row and cell modifiers:

_| h1 |{background:#ddf} 1
_| h2 | 2
| a | 3
{color:orange}| b | 4
| c | 5
_| f1 | 6

<table>
<thead>
  <tr>
    <td>h1</td>
    <td style="background:#ddf;"> 1</td>
  </tr>
  <tr>
    <td>h2</td>
    <td>2</td>
  </tr>
</thead>
<tfoot>
  <tr>
    <td>f1</td>
    <td>6</td>
  </tr>
</tfoot>
<tbody>
  <tr>
    <td>a</td>
    <td>3</td>
  </tr>
  <tr style="color:orange;">
    <td>b</td>
    <td>4</td>
  </tr>
  <tr>
    <td>c</td>
    <td>5</td>
  </tr>
</tbody>
</table>

Here is the resulting table. Note that the external CSS stylesheet for this User Guide adds a gray background to table header and footer rows and adds borders to the cells.

h1 1
h2 2
f1 6
a 3
b 4
c 5

markup for <colgroup> & <col>

See also the W3C spec for colgroup.

The HTML elements <colgroup> & <col> provide a way to group and style table columns. The corresponding Xilize markup uses a special syntax — &amp;{columns: ... } — with the explicit table. signature:

table. &amp;{columns:
\2{background:lightblue}
\4{background:lightgreen}
\3{background:lightyellow}
}
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

<table>
<colgroup span="2" style="background:lightblue;" />
<colgroup span="4" style="background:lightgreen;" />
<colgroup span="3" style="background:lightyellow;" />
<tbody>
  <tr>
    <td>1</td>
    <td>2</td>
...
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8 9

colgroup with width attribute

table. &amp;{columns:
\2{background:lightblue} 40
\4{background:lightgreen} 20
\3{background:lightyellow} 30
}
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

<table>
<colgroup span="2" width="40" style="background:lightblue;" />
<colgroup span="4" width="20" style="background:lightgreen;" />
<colgroup span="3" width="30" style="background:lightyellow;" />
<tbody>
  <tr>
    <td>1</td>
    <td>2</td>
...
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8 9

colgroup with <col> tags

Each line within &amp;{columns:...} markup translates to a <colgroup> element. If cells — marked by the | (vertical bar) just like table cells — are present on the line, they are translated to <col> elements.

In this example the first two column groups contain column elements and third does not:

.table. &amp;{columns:
| 50 |{background:lightblue} 40
{background:lightgreen}| | 80 | |
\3{background:lightyellow} 30
}
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

<table>
<colgroup>
  <col width="50" />
  <col width="40" style="background:lightblue;" />
</colgroup>
<colgroup style="background:lightgreen;">
  <col />
  <col width="80" />
  <col />
  <col />
</colgroup>
<colgroup span="3" width="30" style="background:lightyellow;" />
<tbody>
  <tr>
    <td>1</td>
    <td>2</td>
...
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8 9

tables in W3C specs

See the HTML Table chapter and the CSS Tables chapter of the W3C HTML docs for the complete description of the HTML elements that can be used with tables and how to style them with CSS. Xilize provides no markup for the <caption> element.

Note, the width attribute can be expressed as

pixels 45
percentage 30%
relative 2*
just big enough 0*

See Lengths in the W3C specs.

footnotes

markup description
text[1] footnote marker, 1 may be any number, use this markup in your text, repeat with different numbers as needed
fn1. body of footnote footnote text, 1 may be any number, this is a block signature, repeat with different numbers as needed

Footnotes are marked with [1] and the text of the footnote is given with the footnote signature, fn1., where 1 can be any number. Xilize creates anchors and links between the two and allows you to choose to have the HTML generated with or without <sup> tags.

modern footnotes

Since no <sup> tags you should provide CSS styling. Xilize can generate a default CSS file with support for modern footnote styling.

A paragraph[4] with two footnotes[5].

fn4. This block of text is associated with the first footnote.

fn5. This is associated with the second.

<p>A paragraph<a class="fn_mark" id="fnmk4" href="#fn4">4</a> with two
footnotes<a class="fn_mark" id="fnmk5" href="#fn5">5</a>.</p>

<div class="footnotes">

<p class="fn_text" id="fn4"><a class="fn_anchor" href="#fnmk4">4</a> This
block of text is associated with the first footnote.</p>

<p class="fn_text" id="fn5"><a class="fn_anchor" href="#fnmk5">5</a> This
is associated with the second.</p>

</div>

A paragraph4 with two footnotes5.

4 This block of text is associated with the first footnote.

5 This is associated with the second.

Notice the id attributes generated and the class names assigned.

classic footnotes

Classic footnotes are identical to modern except that <sup> tags are generated.

<p>A paragraph<sup><a class="fn_mark" id="fnmk4" href="#fn4">4</a></sup>
with two footnotes<sup><a class="fn_mark" id="fnmk5"
href="#fn5">5</a></sup>.</p>

<div class="footnotes">

<p class="fn_text" id="fn4"><sup><a class="fn_anchor" href="#fnmk4">4</a>
</sup>This block of text is associated with the first footnote.</p>

<p class="fn_text" id="fn5"><sup><a class="fn_anchor" href="#fnmk5">5</a>
</sup>This is associated with the second.</p>

</div>

choose modern or classic HTML generation

type default for force with this directive uses <sup> tags
modern natural mode define. _FootnoteStyle_ modern no
classic classic mode define. _FootnoteStyle_ classic yes

TOC & headings

See directives for special markup available in hn. blocks to specify the portion of the heading text or alternative text to use in a TOC.