| |||||||||||||||||||||||
| |||||||||||||||||||||||
| Wiki Markup Syntax Guide |
---- = Make a horizontal ruler. Extra '-' is ignored.
\\ = Force a line break, \\\=force line break and clear.
[link] = Creates a hyperlink to an internal WikiPage called 'link'.
[my page] = Creates a hyperlink to an internal WikiPage called 'my page'.
[alias|link] = Creates a hyperlink to an internal WikiPage called 'link', but displays the text 'alias' to the user instead of 'link'.
[1] = Makes a reference to a footnote numbered 1.
[#1] = Marks the footnote number as 1.
[[link] = Creates text '[link]'.
!heading = Small heading with text 'heading'
!!heading = Medium heading with text 'heading'
!!!heading = Large heading with text 'heading'
''text'' = Prints 'text' in italic.
__text__ = Prints 'text' in bold.
{{text}} = Prints 'text' in monospaced font.
* text = Makes a bulleted list item with 'text'
# text = Makes a numbered list item with 'text'
;term:ex = Makes a definition for 'term' with the explanation 'ex'
You do not need to know anything about the Wiki text formatting rules to use Wiki. You just need to write normal text, and then use an empty line to mark it as a paragraph. It's just like writing a simple email.
or [Java home page|http://java.sun.com], which is changed to
Java home page
.
You may use bold text or italic text, by using two underscores (_) and two single quotes ('), respectively. If you're on a Windows computer, make sure that you are using the correct quote sign, as there is another one that looks the similar.
If you want to add preformatted text (like code) just use three consecutive braces ({) to open a block, and three consecutive braces (}) to close a block.
You can inline external pictures by using the following markup:
[http://www.intland.com/images/intland_01.gif]You can assign also a URL to the inline picture:
[http://www.intland.com|http://www.intland.com/images/intland_01.gif]If you specify a link text that is not valid URL, it becomes the ALT text for those who either cannot or do not want to view images.
The example below shows the Yahoo online / offline graphics and creates a link to the Yahoo's send message:
[{Image src='http://opi.yahoo.com/online?u=YahooUser1234&m=g&t=2' border='0'
link='http://edit.yahoo.com/config/send_webmesg?.target=YahooUser1234&.src=pg'}]
[!mypic.jpg!]This will display the most recent picture with this name from the page attachments.
[!My favourite page/mypic.jpg!]Alternatively you can inline a picture using its attachment identifier:
[!28!]You can create links for all these markups:
[http://www.intland.com|!mypic.jpg!] [http://www.intland.com|!My favourite page/mypic.jpg!] [http://www.intland.com|!28!]Or you can even use Interwiki links with the attached pictures:
[BUG:1000|!mypic.jpg!] [PROJ:1|!My favourite page/mypic.jpg!] [DOC:1000|!28!]
* One * Two * Three ** Three.One
Creates:
# One # Two # Three ## Three.One
Creates
If you want to write the list item on multiple lines, just add one or more spaces on the next line and the line will be automatically added to the previous item.
See Advanced formatting for complex list examples.
A simple way to make definition-lists is to use the ;:-construct:
;__Term__:''Explanation of the term''
that renders as:
Another good use for the ';:' is that you can use it to give a short comment on other people's text, by having an empty 'term' in the definition, like shown below:
;:''Comment here.''Which would be seen as
For example:
|| Heading 1 || Heading 2 | ''Gobble'' | Bar | [Main] | [SandBox]
gives you the following table. Note how you can use links also inside tables.
| Heading 1 | Heading 2 |
|---|---|
| Gobble | Bar |
Main | SandBox![]() |
See Advanced formatting for complex table examples.
%%red This is red text.%%
Styles for the following colors are pre-defined:
%%small this %% = Smaller then normal font %%sub aij = aji %% = Subscript %%sup 23 = 8 %% = Superscript %%strike hardly readable %% = Strikethrough text %%center centered %% = Center text %%ltr left-to-right text %% = Left-to-right text %%rtl right-to-left text %% = Right-to-left text
%%( font-size: 150%; color: red; ) Hello, world!%%
The following special block markers are supported:
%%information Draft version %% %%warning Low disk space %% %%error Out of memory %%Draft version Low disk space Out of memory
When closed only the title of the collapsable box is visible, when opened the complete box becomes visible:
%%collapsebox ! Title of the box Here is the body of the box %%
See this on floating at the right side:
%%commentbox __Hi there!__ %%
When the page loads, only the first tabbed section will be visible. All other sections are hidden, until you click the corresponding tab.
You have to surround all tabbed sections with a tabbedSection style. Next, start each tabbed section with a style prefixed with tab-.
%%tabbedSection %%tab-ThisIsMyFirstTab Some text inside the first tab. %% %%tab-ThisIsMyLastTab Some other text inside the second tab. %% %%
You can turn ordinary lists into collapsable trees by enclosing them inside a collapse style.
%%collapse * RDBMS ** Commercial *** DB2 *** Oracle ** Free *** MySQL %%
You can render alternate row coloring for large tables. by enclosing them inside zebra- tags. You can specify the odd and even colors using HTML hex color values or HTML color names like aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow and transparent.
%%zebra-#FFFFCE-#F0C000 || column-head1 || column-head2 | cell-data | cell data | cell-data | cell data | cell-data | cell data %%
| column-head1 | column-head2 |
|---|---|
| cell-data | cell data |
| cell-data | cell data |
| cell-data | cell data |
You can make tables sortable by enclosing them inside a sortable block. Just click the column header and your table is sorted without a round-trip to the server.
%%sortable || Title || Author || Published || Edition | book1 | zappy | 25-Feb-2005 | 5 | book2 | happy | 25-Jan-2005 | 19 | book3 | pappy | 23-Mar-2005 | 06 | book4 | dappy | 21-Apr-2005 | 199 | book5 | rappy | 25-Jul-2005 | 017 %%
| Title | Author | Published | Edition |
|---|---|---|---|
| book1 | zappy | 25-Feb-2005 | 5 |
| book2 | happy | 25-Jan-2005 | 19 |
| book3 | pappy | 23-Mar-2005 | 06 |
| book4 | dappy | 21-Apr-2005 | 199 |
| book5 | rappy | 25-Jul-2005 | 017 |
You can translate a set of values into horizontal colored bars. You can specify both the color and the maximum length of the bars.
This is possible to combine it with lists or even with tables:
%%graphBars-#F0C000-70 * %%gBar 20 %% apples * %%gBar 40 %% peers * %%gBar 60 %% bananas %%
[PROJ:37] = Creates a link to the CodeBeamer project with the id: '37'.
[TASK:567] = Creates a link to the CodeBeamer tracker item with the id: '567'.
[{Task id=567}] = Creates a link to the CodeBeamer tracker item with the id: '567'.
[{Task id='567',label=...,link=...,title,info=...}] = Creates a link to the CodeBeamer tracker item with the id: '567' using custom formatting (see below).
[BUG:768,954] = Creates a link to the CodeBeamer tracker items with the ids: '768', '954'.
[TRACKER:91] = Creates a link to the CodeBeamer tracker with the id: '91'.
[DIR:1320] = Creates a link to the CodeBeamer directory with the id: '1320'.
[DOC:2798] = Creates a link to the CodeBeamer document with the id: '2798'.
[{Document id=324}] = Creates a link to the CodeBeamer document with the id: '324'.
[{Document id='324',label=...,link=...,title,info=...}] = Creates a link to the CodeBeamer document with the id: '324' using custom formatting.
[REPORT:965] = Creates a link to the CodeBeamer report with the id: '965'.
[NOTES:2860] = Creates a link to the CodeBeamer wiki notes with the id: '2860'.
[SRC:3564] = Creates a link to the CodeBeamer source file with the id: '3564'.
[FORUM:98] = Creates a link to the CodeBeamer forum with the id: '98'.
[FTC:1007] = Creates a link to the CodeBeamer forum topic with the id: '1007'.
[USER:1] = Creates a link to the CodeBeamer user account with the id: '1'.
[USER:bond] = Creates a link to the CodeBeamer user account with the user name: 'bond'.
The following formatting variables can be used for documents:
${id}, ${name}, ${path}, ${description}, ${size}, ${owner}, ${modified},
${created}, ${status}, ${locked}
Example:
[{Document id='1234',label='${id}',title='ID: ${id}; Path: ${path}',link='${name}'}]
The following formatting variables can be used for tracker items:
${id}, ${summary}, ${description}, ${start-date}, ${end-date}, ${estimated-hours},
${spent-hours}, ${completed}, ${modified}, ${submitted}, ${priority}, ${status}
Example:
[{Task id='1000',label='${id} ;${status}; ',title='Status: ${status}; Last Modified: ${modified}',link='${summary}'}]
[{ HorizontalGraphPlugin title='Uses'
(Action class[:color:red]
(ProjectManager[Service layer][:color:#009900][:background:#DDFFDD]
(ProjectDao[Persistence Layer][:color:#3C78B5][:background:#D8E4F1])
(Security[ACL][:color:#3C78B5][:background:#D8E4F1])
)
(ArtifactManager[Service layer][:color:#009900][:background:#DDFFDD]
(ArtifactDao[Persistence Layer][:color:#3C78B5][:background:#D8E4F1]
(File System[:color:#777777][:background:#DDDDDD])
(RDBMS[:color:#777777][:background:#DDDDDD])
)
(Security[ACL][:color:#3C78B5][:background:#D8E4F1])
)
)
}]
[{ VerticalGraphPlugin title='Class Hierarchy'
(BaseDao[Each Dao must extend this][:color:red]
(EntityDao[Persists entities][:color:#009900][:background:#DDFFDD]
(ArtifactDao[:color:#3C78B5][:background:#D8E4F1]
(Documents[:color:#777777][:background:#DDDDDD])
(Wiki pages[:color:#777777][:background:#DDDDDD])
)
(ProjectDao[:color:#3C78B5][:background:#D8E4F1])
(UserDao[:color:#3C78B5][:background:#D8E4F1])
)
(TemporalDao[Persists timestamped entities][:color:#009900][:background:#DDFFDD]
(ArtifactSample[:color:#3C78B5][:background:#D8E4F1])
(IssueSample[:color:#3C78B5][:background:#D8E4F1])
)
)
}]
[{ DirectedAcyclicGraphPlugin title='Project Steps'
(
(Separate Tasks[:status:done][:color:#777777][:background:#DDDDDD])
(Develop Business Core[:depend:Separate Tasks][:color:red])
(Develop Web Frontend[:depend:Separate Tasks][:status:done][:color:#777777][:background:#DDDDDD])
(Deploy Components[:depend:Develop Business Core][:depend:Develop Web Frontend][:color:#009900][:background:#DDFFDD])
(Milestone[:depend:Develop Business Core][:date:2.14.2006])
)
}]
[{ ExplorerGraphPlugin title='Dependencies'
(My Project[:color:red]
(Microkernel[POJO wiring][:color:#009900][:background:#DDFFDD]
(Spring IoC[Lightweight container][:color:#3C78B5][:background:#D8E4F1])
)
(Persistence[RDBMS access][:color:#009900][:background:#DDFFDD]
(Hibernate[ORM mapping][:color:#3C78B5][:background:#D8E4F1]
(EHCache[Entity caching][:color:#777777][:background:#DDDDDD])
)
(Spring AOP[Templates and transactions][:color:#3C78B5][:background:#D8E4F1])
)
)
}]
[{UMLGraphPlugin title='UML Party'
(
(Order<<interface>>
[add(LineItem item)]
[submit(return succeeded:Boolean)]
[getTotalPrice(return Double)]
)
(LineItem
[+name:String]
[+price:Double=0]
[getName(return String)]
[getPrice(return Double)]
)
(Book
[:extends:LineItem]
)
(Cd
[:extends:LineItem]
)
(AbstractOrder
[+lineItems:LineItemt#0..*]
[:implements:Order]
)
(BookOrder
[addBook(in book:Book)]
[:extends:AbstractOrder]
)
(CdOrder
[addCd(in cd:Cd)]
[:extends:AbstractOrder]
)
)
}]
[{SequencePlugin title='Sequence'
DisplayUserAction.getUser -> UserPojo {
UserManager.findUserById -> UserPojo {
UserDaoImpl.findUserById -> UserPojo {
JDBC.executeQuery -> ResultSet;
}
}
}
}]
[{MindMapGraphPlugin title='New version'
(New version[:color:red]
(New features[:color:#009900][:background:#DDFFDD]
(RDBMS agnostic persistence[Vendor independence][:color:#3C78B5][:background:#D8E4F1]
(Oracle support[:color:#777777])
(PostgreSQL support[:color:#777777])
)
(JCR support[Java Content Repository][:color:#3C78B5][:background:#D8E4F1])
(Portlet interface[:color:#3C78B5][:background:#D8E4F1])
)
(Enhanced features[:color:#009900][:background:#DDFFDD]
(Reporting[:color:#3C78B5][:background:#D8E4F1]
(Visuals[Charts and graphs][:color:#777777])
(Performance improvements[:color:#777777])
)
)
)
}]
See more examples at the ImageGen plugin
website.
[{ GanttChartPlugin title='Development Project Plan' yaxislabel='Phases'
:Name|String, Start|Month, End|Month, Percentage
Coding
* 'Design', 3-2006, 4-2006, 0.7
* 'Implementation', 4-2006, 6-2006, 0
Testing
* 'Test case planning', 4-2006, 5-2006, 1.0
Coding
* 'Integration testing', 5-2006, 6-2006, 0.1
Testing
* 'Test execution', 6-2006, 8-2006, 0
}]
[{ PieChartPlugin title='Unit tests' threed='true'
Successful, 22
Failure, 13
Error, 2
}]
[{ PolarChartPlugin title='Database Performance Comparison'
MySQL
* 60, 290
* 23, -120
* -45, 90
PostgreSQL
* -10, 200
* -12, -30
* 13, 140
}]
[{ ScatterPlotChartPlugin title='System downtime'
Accounting
* 10, 20
* 22, 30
* 33, 45
Reporting
* 60, 10
* 23, 42
* 45, 29
}]
[{ StackedXYAreaChartPlugin title='Issues Over Time' legend='true'
:Date|Day|MM/dd/yyyy,Blocking,Critical,Minor,Cosmetic
03/22/2006,9,17,13,16
03/23/2006,4,8,14,19
03/24/2006,7,11,11,12
03/25/2006,5,6,11,6
03/28/2006,0,1,6,3
}]
[{ TimeSeriesChartPlugin title='Contributors Over Time'
Programmers
* 10/7/2006, 22
* 12/6/2006, 30
* 11/1/2006, 49
Managers
* 10/9/2006, 2
* 12/13/2006, 4
* 11/8/2006, 2
Testers
* 10/3/2006, 3
* 12/22/2006, 8
* 11/7/2006, 12
}]
[{ XYAreaChartPlugin title='Commits By Team'
Team A
* 10, 20
* 12, 30
* 13, 45
* 40, 10
Team B
* 60, 10
* 23, 12
* 45, 50
}]
[{ XYLineChartPlugin title='System Response Time'
Queries
* 10, 20
* 20, 30
* 30, 45
Report Generator
* 10, 40
* 20, 20
* 30, 10
}]
[{ XYStepAreaChartPlugin title='Lines-of-Code Over Weeks'
LOC
* 1, 7545
* 2, 8987
* 3, 7788
* 4, 8544
* 5, 10344
}]
[{ BarChartPlugin title='Number-of-classes By Package' threed=true orientation=horizontal
:Package|String, Classes
persistence, 32
remoting, 16
utils, 23
}]
[{ StackedBarChartPlugin title='Issues By Version' threed=true orientation=horizontal
:Version|String, 0.7-pre, 0.9-rc1, 1.0-final
Fatal, 10, 6, 1
Major, 23, 11, 4
Minor, 15, 3, 6
}]
[{ WaterfallChartPlugin title='Timeframes'
:Phase|String, Requirements Capture, Analysis, Design, Implementation, Testing, Total
Manweeks, 1, 2, 4, 3, 2, 13
}]
[{ MultiplePieChartPlugin title='Number of classes' legend='false' height=400
:Country|String, V1, V2, V3
Abstract, 7, 7, 4
Interface, 5, 9, 3
Concrete, 15, 26, 22
}]
[{ BubbleChartPlugin title='Bubble Chart' seriespaint='red,orange'
Norway, 10, 10
*3, 4, 2
*4, 5, 2.5
*5, 6, 2.7
France, 15, 15
* 1, 14, 5
* 3, 12, 7
* 2, 11, 8
}]
[{ SpiderWebChartPlugin title='Radar Plot' direction='clockwise' webfilled='true'
headpercent='0.02' axislabelgap='0.1' interiorgap='0.2'
:Country|String, Value, Angle, Height, Weight, Coverage
Italy, 10, 10, 40, 30, 50
Norway, 20, 50, 3, 66, 76
France, 15, 100, 20, 56, 100
}]
See more examples at the ImageGen plugin
website.
[{ExcelPlugin id=1067}] displays the content of the Microsoft Excel document having the identifier 1067.
[{ReportPlugin id=9875}] executes report with the identifier 9875 and displays the items retrieved by the report.
It's actually quite possible to do things like put comment boxes like this directly on your wiki page. This sample comment box uses the "commentbox" style, as defined in the included "jspwiki.css" style sheet. To make a box like this, just use %%commentbox <text> %%.