Formating messages in Basecamp using textile

Basecamp is using textile to format and display its messages. The following is a list of codes used to modify the look of your messages inside basecamp.

You can format the messages in basecamp using the following codes below:

Paragraph Codes
The following codes are commonly used in composing paragraphs in basecamp, adding in the following codes helps you convey the message you wish to tell and makes it easier to read and understand the context.

Header: hn. <text>
h1. Header 1 is equivalent to <h1>Header 1</h1>

Blockquote: bq. <text>
bq. A block quotation. is equivalent to <blockquote>bq. A block quotation.</blockquote>

Footnote: fn1. <text>
fn1. Footnote text. is equivalent to <p id="fn1">¹ Footnote text.</p>

Example:
This text has a footnote below[1].
fn1. This is the footnote of the text above.

Text Alignments
p<. align left
p>. align right
p=. centered
p<>. justified
p(., p((. left indent 1em, 2em, etc.
p). right indent 1em

Example:
p=. This text is centered is equivalent to <center>This text is centered</center>


Phrase Codes
These codes below allows us to importance to a portion of our text in basecamp and adding some emphasis to it. We can use either the emphasis or the boldface HTML code when adding some importance to the message we have written. Other HTML code can also be used.

Emphasis
Prepend and append underscores to the text you wish to be emphasized.
_text on emphasis_ is equivalent to <em>text on emphasis</em>

To make italics text we use double underscores
__text on italics__ is equivalent to <i>text on italics</i>

Strong emphasis
Use asterisk to make text appear with strong emphasis
*text on strong emphasis* is equivalent to <strong>text on strong emphasis</strong>

And, use double asterisk to make them apear as boldface
**text on boldface** is equivalent to <b>text on boldface</b>

Citations
Enclose citation text with double question marks
??cited text?? is equivalent to <cite>cited text</cite>

Mark as deleted
Also called overstrike. Useful in editing copy with multiple versions.
-text to be deleted- is equivalent to <del>text to be deleted</del>

Mark as inserted
Used mutually with the overstrike tag. Marks the text as newly inserted text.
+inserted text+ is equivalent to <ins>inserted text</ins>

Span
Allows us to customize out text based on color or formating using the CSS standard code. Use the percent symbol to start a span tag.
%{color:red}text in red color% is equivalent to <span style="color:red;">text in red color</span>


Lists
Precede each line with pound sign to make an ordered list like this:

# line 1
# line 2
# line 3

Which becomes,

<ol>
<li>1 line 1</li>
<li>2 line 2</li>
<li>3 line 3</li>
</ol>

To make a bulleted list, use the asterisk instead like this:

* line 1
* line 2
* line 3

Which becomes,

<ul>
<li>1 line 1</li>
<li>2 line 2</li>
<li>3 line 3</li>
</ul>

To add a nested list or increase the list indention we add another asterisk link this:

* line 1
** line 1.1
** line 1.2
* line 2
* line 3

Which becomes

<ul>
<li>line 1</li>
<ul>
<li>line 1.1</li>
<li>line 1.2</li>
</ul>
<li>line 2</li>
<li>line 3</li>
</ul>

Creating Tables
Use the pipe symbol to make tables

|This|is|a|table|
|with|two|rows|inside|

is equivalent to

<table>
<tr>
<td>This</td><td>is</td><td>a</td><td>table</td>
</tr>
<tr>
<td>with</td><td>two</td><td>rows</td><td>inside</td>
</tr>

Inserting Links
Inserting hyperlinks in basecamp is similar to inserting text in wikipedia, just enclose the anchor text with double quotation marks followed by a colon and the url
"Tildemark blogs":http://www.tildemark.com is equivalent to <a href="http://www.tildemark.com>Tildemark blogs</a>

Inserting Images
Use the exclamation symbol to insert an image into basecamp.

!http://www.basecamphq.com/images/basecamplogo-small.png! is equivalent to <img src="http://www.basecamphq.com/images/basecamplogo-small.png" alt="basecamp logo"/>

Image Links
To make the image clickable we add the link code adding in a colon and the corresponding link.
!http://www.basecamphq.com/images/basecamplogo-small.png!:"http://www.basecamphq.com" is equivalent to <a href="http://www.basecamphq.com"><img src="http://www.basecamphq.com/images/basecamplogo-small.png" /></a>

Superscripts
Use caret symbol to make superscripts
e = m * c ^2^ is equivalent to e = m * c ²

Subscripts
Use the tildemark to make subscripts
log ~b~ (x) = y is equivalent to log _b (x) = y

Source Codes
To add source code listing we use the @ symbol
@print "hello world";@ is equivalent to <code>print "hello world";</code>

More examples with textile code for basecamp here.

Formating messages in Basecamp using textileTweet this post