SWiK
» tagged pages
» logout

sorted by: recent | see : popular
Content Tagged with tiddlywiki + formatting

WikiWordEscape

Sometimes it's handy to be able to write WikiWords without them being recognised as links (for people's names, for instance). You can do this by preceding the WikiWord with a tilde (~). For example, JamesBond, JavaScript and TiddlyWiki

tiddlywiki: TiddlyWiki Changes RSS

PlainText

Sometimes text can inadvertently match TiddlyWiki formatting instructions - particularly program code, or text pasted from elsewhere. In these situations you can either use MonospacedText or you can accomplish the same thing without the monospaced effect like this:
This is AnotherLink, this is a copyright symbol &copy; and this site is called <<tiddler SiteTitle>>
<nowiki>This is AnotherLink, this is a copyright symbol &copy; and this site is called <<tiddler SiteTitle>></nowiki>
"""This is AnotherLink, this is a copyright symbol &copy; and this site is called <<tiddler SiteTitle>>"""
Which displays as:
This is AnotherLink, this is a copyright symbol © and this site is called TiddlyWiki
This is AnotherLink, this is a copyright symbol &copy; and this site is called <<tiddler SiteTitle>>
This is AnotherLink, this is a copyright symbol &copy; and this site is called <<tiddler SiteTitle>>

tiddlywiki: TiddlyWiki Changes RSS

CustomCssClass

You can wrap any text in an HTML {{{}}} or {{{
}}} with a specified CSS class. This allows custom CSS styling in a nice, modular way. By placing a rule in your StyleSheet tiddler like {{{.wrappingClass{color: #666; background: #bbb} }}} you can markup a piece of text in the tiddler using this code:

{{{
{{wrappingClass{Text that is now accentuated}}}
}}}

{{wrappingClass{Text that is now accentuated}}}

By default, the text is placed in a {{{}}}. To use a {{{
}}} instead, insert a line break before the text:

{{{
{{wrappingClass{
Text that is now accentuated}}}
}}}

{{wrappingClass{
Text that is now accentuated}}}

tiddlywiki: TiddlyWiki Changes RSS

PrettyLinks

You can now link to [[external sites|http://www.osmosoft.com]] or [[ordinary tiddlers|TiddlyWiki]] with ordinary words, without the messiness of the full URL appearing. Edit this tiddler to see how.

You can also LinkToFolders.

tiddlywiki: TiddlyWiki Changes RSS

HtmlEntities

Entities in HTML documents allow characters to be entered that can't easily be typed on an ordinary keyboard. They take the form of an ampersand (&), an identifying string, and a terminating semi-colon (;). There's a complete reference [[here|http://www.htmlhelp.com/reference/html40/entities/]]; some of the more common and useful ones are shown below. Also see [[Paul's Notepad|http://thepettersons.org/PaulsNotepad.html#GreekHtmlEntities%20HtmlEntitiesList%20LatinHtmlEntities%20MathHtmlEntities]] for a more complete list.

|>|>|>|>|>|>| !HTML Entities |
| &nbsp; |   | no-break space |    | &apos; | ' | single quote, apostrophe |
| &ndash; | – | en dash |~| &quot; | " | quotation mark |
| &mdash; | — | em dash |~| &prime; | ′ | prime; minutes; feet |
| &hellip; | … | horizontal ellipsis |~| &Prime; | ″ | double prime; seconds; inches |
| &copy; | © | Copyright symbol |~| &lsquo; | ‘ | left single quote |
| &reg; | ® | Registered symbol |~| &rsquo; | ’ | right single quote |
| &trade; | ™ | Trademark symbol |~| &ldquo; | “ | left double quote |
| &dagger; | † | dagger |~| &rdquo; | ” | right double quote |
| &Dagger; | ‡ | double dagger |~| &laquo; | « | left angle quote |
| &para; | ¶ | paragraph sign |~| &raquo; | » | right angle quote |
| &sect; | § | section sign |~| &times; | × | multiplication symbol |
| &uarr; | ↑ | up arrow |~| &darr; | ↓ | down arrow |
| &larr; | ← | left arrow |~| &rarr; | → | right arrow |
| &lArr; | ⇐ | double left arrow |~| &rArr; | ⇒ | double right arrow |
| &harr; | ↔ | left right arrow |~| &hArr; | ⇔ | double left right arrow |

The table below shows how accented characters can be built up by subsituting a base character into the various accent entities in place of the underscore ('_'):

|>|>|>|>|>|>|>|>|>|>|>|>|>|>|>|>|>| !Accented Characters |
| grave accent | &_grave; | À | à | È | è | Ì | ì | Ò | ò | Ù | ù |   |   |   |   |   |   |
| acute accent | &_acute; | Á | á | É | é | Í | í | Ó | ó | Ú | ú |   |   | Ý | ý |   |   |
| circumflex accent | &_circ; | Â | â | Ê | ê | Î | î | Ô | ô | Û | û |   |   |   |   |   |   |
| umlaut mark | &_uml; | Ä | ä | Ë | ë | Ï | ï | Ö | ö | Ü | ü |   |   | Ÿ | ÿ |   |   |
| tilde | &_tilde; | Ã | ã |   |   |   |   | Õ | õ |   |   | Ñ | ñ |   |   |   |   |
| ring | &_ring; | Å | å |   |   |   |   |   |   |   |   |   |   |   |   |   |
| slash | &_slash; |   |   |   |   |   |   | Ø | ø |   |   |   |   |   |   |   |
| cedilla | &_cedil; |   |   |   |   |   |   |   |   |   |   |   |   |   |   | Ç | ç |

tiddlywiki: TiddlyWiki Changes RSS

TiddlerComments

To hide text within a tiddler so that it is not displayed you can wrap it in {{{/%}}} and {{{%/}}}. It can be a useful trick for hiding drafts or annotating complex markup. Edit this tiddler to see an example.
/%This text is not displayed
until you try to edit %/

tiddlywiki: TiddlyWiki Changes RSS

ExtendedFormatting

Like most wikis, TiddlyWiki supports a range of simplified character formatting:
To getType this
Bold''Bold''
Strikethrough--Strikethrough--
Underline__Underline__ (that's two underline characters)
Italic//Italic//
Superscript: 23=82^^3^^=8
Subscript: aij = -ajia~~ij~~ = -a~~ji~~
highlight@@highlight@@
The highlight can also accept CSS syntax to directly style the text:
green coloured
red coloured
Access any CSS style

For backwards compatibility, the following highlight syntax is also accepted:
@@bgcolor(#ff0000):color(#ffffff):red coloured@@
red coloured

tiddlywiki: TiddlyWiki Changes RSS

Tables

*sample:
|!th1111111111|!th2222222222|
|>| colspan |
| rowspan |left|
|~| right|
|bgcolor(#a0ffa0):colored| center |
|caption|c
*another sample: see PeriodicTable.
For advanced effects, you can control the CSS style of a table by adding a row like this:
{{{
|cssClass|k
}}}

tiddlywiki: TiddlyWiki Changes RSS

BlockQuotes

To make quoted bits of text stand out, you can use BlockQuotes within your tiddlers, like this:

JeremyRuston said:
A TiddlyWiki is like a blog because it's divided up into neat little chunks, but it encourages you to read it by hyperlinking rather than sequentially: if you like, a non-linear blog analogue that binds the individual microcontent items into a cohesive whole.

Like BulletPoints and NumberedBulletPoints, you can have multiple levels of BlockQuotes. Just edit this tiddler to see how it's done.

level 1
level 1
level 2
level 2
level 3
level 3
level 2
level 1

tiddlywiki: TiddlyWiki Changes RSS

EmbeddedImages

URL. It’s good practice to include a title to be shown as a tooltip, and when the image isn’t available. An image can also link to another tiddler or or a URL
[imgRomanesque broccoli|fractalveg.jpg]
Field|field.jpg]You can also float images to the left or right: the forest is left aligned with {[img[}.
@clear(left):clear(right):display(block):You can use CSS to clear the floats@
tiddlywiki