• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Stop wasting time looking for files and revisions. Connect your Gmail, DriveDropbox, and Slack accounts and in less than 2 minutes, Dokkio will automatically organize all your file attachments. Learn more and claim your free account.


WikiStyle to HTML

Page history last edited by Kernigh 13 years, 12 months ago

This page is meant to explain the conversions that happen when going from WikiStyle to fully rendered HTML, for the sake of documenting the PBwiki document format and to make CSS editing easier for everyone.



Text formatting




Unordered Lists


An asterisk (*) and a space together with text creates a bullet point, such as:


  • point one
  • point two
  • point three


All three together are called an Unordered List, and each is a List Item. The format of the HTML generated is:


   <li>point one</li>
   <li>point two</li>
   <li>point three</li>


The <ul>...</ul> tag wraps all items in a list (even if there is only one item, while the <li>...</li> tag wraps each individual item.


You can apply styles to the entire list or to individual elements, with differing effects. For example, in the following list, I have applied a red border to the <ul> tag, and a blue one to the <li> tag:



  • point 1
  • point 2
  • point 3



See the pages for ul and li for more info.


Ordered Lists


Lists created with the pound sign (#) instead of an asterisk (*) are called Ordered Lists. The <ol> tag is used instead of the <ul> tag, but the HTML is otherwise identical. Therefore, the following WikiStyle list:


# cats
# dogs
# mice


looks like:


  1. cats
  2. dogs
  3. mice


and renders in HTML as:




See the pages for ol and li for more info.


List Nesting


Lists can be nested in one another; in this case, inside the <li> element, another entire <ul> or <ol> element is created:


   <li>first item</li>
   <li>second item
         <li>sub-item 1</li>
         <li>sub-item 2</li>



PBwiki allows you to create tables like so:


| This is | a small |
| example of | a table. |


Which looks like:


This is a small
example of a table.


The HTML conversion looks like:


   <tr><td> This is </td><td> a small </td></tr>
   <tr><td> example of </td><td> a table. </td></tr>


The table is in a <table> tag; each table row is in a <tr> tag; each cell of table data is in a <td> tag. PBwiki supplies some default CSS to style these tables, but you can also add your own, if you are careful to override the PBwiki default correctly.


See the pages for table and tr and td for more info.


Character formatting


Characters can be formatted as **bold**, ''italics'' , __underline__ , or -strikethrough- . The HTML conversions are summarized as follows:


Effect WikiStyle HTML conversion
bold **word** <b>word</b>
italics ''word'' <em>word</em>
underline __word__ <span style="text-decoration:underline">word</span>
strikethrough -word- <strike>word</strike>


I have no idea why PBwiki uses a span instead of <u>, but it doesn't matter. There aren't too many things worth doing to these tags, except maybe making the bold more pronounced in some cases (you would set the font-weight property for the <b> tag). Unlikely, I know. So moving right along...


Section headers


The !, !!, !!! series are used extensively and there are useful styles you can set. First the conversion chart:


Effect WikiStyle HTML

header 1

!header 1 <h1>header 1</h1>

header 2

!!header 2 <h2>header 2</h2>

header 3

!!!header 3 <h3>header 3</h3>

header 4

!!!!header 4 <h4>header 4</h4>
header 5
!!!!!header 5 <h5>header 5</h5>
header 6
!!!!!!header 6 <h6>header 6</h6>




















Comments (0)

You don't have permission to comment on this page.