Skip to content

Tables, footnotes, links, and images

Steven Norton edited this page Sep 16, 2024 · 2 revisions

The following instructions are courtesy of the Textile Language Development Team at https://textile-lang.com/

Tables

This text:
| A | simple | table | row |
| And | another | table | row |
| With an | | empty | cell |

generates this result:

A simple table row
And another table row
With an empty cell

Footnotes

The following Textile markup:

A table, a chair, a bowl of fruit and a violin; what else does a man need to be happy?[1]

fn1. "Albert Einstein":http://www.brainyquote.com/quotes/quotes/a/alberteins148867.html

generates this in the browser:

A table, a chair, a bowl of fruit and a violin; what else does a man need to be happy?1

1 Albert Einstein

Links

This text:

"Wikipedia":https://en.wikipedia.org/

generates this:

Wikipedia

More about: Links

1. A local link:

"link text":/example

2. A link with a title attribute:

"link text(with title)":https://example.com/

3. An email link:

"(classname)link text(title tooltip)":mailto:[email protected]

4. Combine with a link with an image link:

!carver.png!:https://textpattern.com/

5. Usage of a link alias:

This is "a link to Textpattern":txp, and "another link":txp to the same site.

[txp]https://textpattern.com/

6. If you wish to link to a URL and want the URL itself in the text, you can use the following ‘dollar’ shorthand:

"$":https://textpattern.com/start

7. Class names can be added in parentheses before the link (requires Textile v2.5.1 or later):

"(various fancybox.iframe)Cats and cheese":https://example.com/video/cheesecatvideo?autoplay=1

Images

Images can be included by using exclamation marks around a local path or a URL:

The original Textpattern carver: !https://textile-lang.com/carver.png!

yields

The original Textpattern carver:

More about: Images

1. An image from a local path:

!/example.png!

2. Use () parentheses to include alt text and title at the same time:

!/carver.png(the carver)!

3. Combine a link with an image link:

!/carver.png!:https://textpattern.com/

4. Images can be aligned left:

!</carver.png!

Or right:

!>/carver.png!

Or centered:

!=/carver.png!

5. An image can have CSS styles:

!{border:1px solid #333; padding:5px;}/carver.png!

Or CSS classes:

!(classy-image bevel)/carver.png!

6. To center an image, you may use this style:

!{display:block; margin:0 auto;}/carver.png!

7. To include an image with a complex formula using latex, you can link to a remote service and have it sent back as an image:

!http://www.codecogs.com/eq.latex?\int_{-\infty}^{\infty}e^{-x^{2}}dx=\sqrt{\pi}!

This would produce:

8. For the generation of relative images and to better support content for responsive layouts, the automatic generation of image width and height can be suppressed by a Textile parser option as of Textile v2.5.1.