Wikipad – Unofficial Coding Documentation

Contents
HTML Reference
List of HTML Elements

Find out what HTML Elements are available on Wacky and how to use them. Includes examples and template code.
Learning Markdown
Markdown styles + examples

The complete list of Markdown styles available on the Wacky Writers forums with demos showcasing their use.
Learning BBCode
BBCode Styles + Examples

The complete list of BBCode styles and elements available for use on the Wacky Writers forums with demos to showcase their use.
Community Resources
More Resources & Information

A repository of coding resources and threads from the Wacky community! Expect guides, tutorials, showcases and more.
1 Like
Community Resources
PM me to get your resource featured here
HTML Reference
<b> <i> <s> <mark> <del> <ins> <small> <sub> <sup> <h1 to 6> <kbd> <ruby> <rt> <rb> <rp> <abbr>
<blockquote> <code> <p> <pre>
<div> <div>
<br> <hr>
<dl> <dd> <dt> <ol> <ul> <li>
<table> <tr> <th> <td>
<details> <summary>
<a>
<img>
<video> <audio> <track> <source>
Markdown

A complete reference showcasing and demonstrating the use of Markdown elements on the Discourse forums. For an interactive tutorial visit CommonMark.

Contents

  1. Headings
  2. Text Formatting
  3. Links
  4. Horizontal Rule
  5. Images
  6. Lists
  7. Tables

Headings

Used to create styled headings.

Demo:

h1

# h1
h1
=

h2

## h2
h2
-

h3

### h3

h4

#### h4
h5
##### h5
h6
###### h6

Text Formatting

Applies basic styles to text.

Demo:

italic

_italic_
*italic*

bold

__bold__
**bold**

strikethrough

~~strikethrough~~

quote
quote

> quote > quote

code

`code`
<div>
  codeblock
</div>
``` <div> codeblock </div> ```
<div>
codeblock
</div>
* Lines are indented with 4 spaces

Links

Creates a hyperlink to a URL address. URL addresses may include other websites, email addresses, files or even locations within the same webpage.

Demo:

WackyWriters Forum!

[WackyWriters Forum!][1]

[1]: https://forum.wackywriters.com/

Horizontal Rule

Inserts a horizontal line spanning the width of the container to visually separate content.

The background of the demo box has been darkened to improve contrast.

Demo:

Line 1


Line 2

Line 1

---
Line 2
Line 1
***
Line 2
Line 1
___
Line 2

Images

Used to display images.

Demo:

Legacy WackyWriters Logo

![Legacy WackyWriters Logo](https://storage.wackywriters.com/original/2X/1/15ea83bc7eaf249cc758b6b18b1e83d677760ca9.png)
![Legacy WackyWriters Logo][Wacky Source]



[Wacky Source]: https://storage.wackywriters.com/original/2X/1/15ea83bc7eaf249cc758b6b18b1e83d677760ca9.png

Lists

Used to create order, unordered or check lists.

Demo:

  • Item 1
  • Item 2
* Item 1 * Item 2
+ Item 1<br>+ Item 2
- Item 1<br>- Item 2
  1. Item 10
  2. Item 11
10) Item 10
11) Item 11
10. Item 10
11. Item 11

Item 1
Item 2

[x] Item 1
[ ] Item 2

Tables

Creates a table used for storing and organising information.

Demo:

Heading 1 Heading 2 Heading 3
Cell Cell Cell
Cell Cell Cell
| Heading 1 | Heading 2 | Heading 3 | | --------- |:---------:| ---------:| | Cell | Cell | Cell | | Cell | Cell | Cell |

Back to HTML Reference
Spot something we didn't? Let us know!
BBCode

A complete reference showcasing and demonstrating the use of BBCode elements on the Discourse forums. For more information see the official Discourse resource for the BBCode plugin.

Contents

  1. Text Formating
  2. Font, Colour and Size
  3. Text Alignment
  4. Quote
  5. Links and Emails
  6. Images
  7. Lists
  8. Jump To

Text Formating

Applies basic styles to text.

Demo:

bold

[b]bold[/b]

italic

[i]italic[/i]

underline

[u]underline[/u]

strikethrough

[s]strikethrough[/s]

code
[code]code[/code]
[quote="SockMonster1"]quote[/quote]

spoiler

[spoiler]spoiler[/spoiler]

Font, Colour and Size

Applying styles which affect the font, color or size of text.

Demo:

Times New Romans

[font="Times New Romans"]Times New Romans[/font]

small
[small]small[/small]

color

[color="chartreuse"]color[/color]

highlight

[highlight]highlight[/highlight]

background color

[bgcolor=#11AAEE]background color[/bgcolor]

Text Alignment

Dictates the positioning of the text.

Demo:

center
[center]center[/center]

left
[left]left[/left]

right
[right]right[/right]

Quote

Denotes content as belonging to another source.

Demo:

[quote="SockMonster1"]quote[/quote]

Links and Emails

Create a hyperlink to a URL address or email address.

Demo:

WackyWriters Forum

[url="https://forum.wackywriters.com"]WackyWriters Forum[/url]

email@email.com

[email="email@email.com"]email@email.com[/email]

Images

Used to display an image.

Demo:

[img]https://storage.wackywriters.com/original/2X/1/15ea83bc7eaf249cc758b6b18b1e83d677760ca9.png[/img]

Lists

Used to create ordered or unordered lists.

Demo:

  1. Item 1
  2. Item 2
[ol] [li]Item 1[/li] [li]Item 2[/li] [/ol]
  • Item 1
  • Item 2
[ul] [li]Item 1[/li] [li]Item 2[/li] [/ul]

Jump To

Users can jump to anchor points in a document by clicking the link.

Demo:

Click here!

[jumpto="anchorDemo"]Click here![/jumpto]

…

…

…

Anchor

[aname="anchorDemo"]Anchor[/aname]

Back to HTML Reference
Spot something we didn’t? Let us know!

Text Formatting

The list of HTML tags used to format text.

Contents

  1. Bold
    <b>
  2. Italic
    <i>
  3. Strikethrough
    <s>
  4. Highlight
    <mark>
  5. Delete and Insert
    <del>, <ins>
  6. Small
    <small>
  7. Subscript and Superscript
    <sub>, <sup>
  8. Headings
    <h1> to <h6>
  9. Keyboard Input
    <kbd>
  10. Ruby
    <ruby>, <rb>, <rp>, <rt>
  11. Abbreviation
    <abbr>

Bold

Makes text bold.

Demo:

bold
<b>bold</b>

Italic

Makes text italicised.

Demo:

italics
<i>italics</i>

Strikethrough

Used to strike out text.

Demo:

strikethrough
<s>strikethrough</s>

Highlight

Used to highlight text.

Demo:

highlight
<mark>highlight</mark>

Delete and Insert

Used to signify which sections of text have been deleted or inserted respectively.

Demo:

deleted
<del>deleted</del>
inserted
<ins>inserted</ins>

Small

Used to signify smaller text such as side comments.

Demo:

small
<small>small</small>

Subscript and Superscript

Used to apply subscript or superscript to text respectively.

Demo:

Example of subscript text
<sub>subscript</sub>
Example of superscript text
<sup>superscript</sup>

Headings

Used to define and style headings.

Demo:

h1

<h1>h1</h1>

h2

<h2>h2</h2>

h3

<h3>h3</h3>

h4

<h4>h4</h4>
h5
<h5>h5</h5>
h6
<h6>h6</h6>

Keyboard Input

Used to denote a key on the keyboard.

Demo:

To copy press Ctrl + C
<kbd>Ctrl</kbd>

Ruby

Ruby allows for text to be annotated with pronunciations or additional information. It is most commonly used in Japanese and Chinese text.

The base text is written inside of <rb> whilst the annotation to appear above is written inside of <rt>. For browsers which cannot render ruby notation, we use <rp> (Ruby Parantheses) to insert parentheses. For browsers which do support ruby notation, the contents of <rp> are hidden.

Demo:

WWW ( World Wide Web )
<ruby> <rb>WWW</rb> <rp>(</rp> <rt>World Wide Web</rt> <rp>)</rp> </ruby>

How it appears for browsers which do not support <ruby>:

WWW (World Wide Web)

Abbreviation

Used to define an abbreviation or acronym. This element does not apply styles to text unless it is combined with the title attribute.

Demo:

<abbr> with title attribute:
www
<abbr title="World Wide Web">www</abbr>

How it should appear:

Screenshot of an abbreviation element with the text "www" displaying the tooltip "World Wide Web".
<abbr> without title attribute:
www
<abbr>www</abbr>

Back to HTML Reference
Spot something we didn't? Let us know!
Text Containers

HTML elements used to contain text.

Contents

  1. Blockquote
    <blockquote>
  2. Code
    <code>
  3. Paragraph
    <p>
  4. Preformatted Text
    <pre>

Blockquote

Used to denote quoted content.

Demo:

blockquote
blockquote

Code

Used to denote code. On Wacky, the style of <code> changes when directly placed inside a <p>, <li> or <pre>.

The background of the demo box has been darkened to improve contrast.

Demo:

code
<code>code</code>

code

<p> <code>code</code> </p>
  • code
  • <li> <code>code</code> </li>
    code
    <pre> <code>code</code> </pre>

    Paragraph

    Separates long passages of text into paragraphs.

    Demo:

    paragraph 1

    paragraph 2

    <p>paragraph 1</p> <p>paragraph 2</p>

    lang=""

    Used to specify the language of the text. This attribute only accepts ISO 639-1 language codes as values, see here for a full list.

    Aside from semantics, specifying the language will ensure that browsers render non-english characters correctly (issue described here).

    Demo:

    This text is in English

    <p lang="en">This text is in English</p>

    Preformatted Text

    Used to denote that the text has been preformatted. This is useful as it prevents line wrapping and preserves whitespaces and line breaks therefore retaining text structure.

    Demo:

    Consecutive whitespace characters    are retained
    <pre>Consecutive whitespace characters are retained</pre>

    Back to HTML Reference
    Spot something we didn't? Let us know!
    Content Containers

    Used to contain other elements, organising them into different sections of the document.

    Contents

    1. div <div>
    2. span <span>

    div

    A block-level element used to section the document.

    Demo:

    div
    <div>div</div>

    align=""

    Used to designate which direction the text should be read from (left to right or right to left). Only use dir="auto" if the text direction is unknown.

    Demo:

    One Two Three Four
    <div dir="ltr">One Two Three Four</div>
    One Two Three Four
    <div dir="rtl">One Two Three Four</div>
    One Two Three Four
    <div dir="auto">One Two Three Four</div>

    lang=""

    Used to specify the language of the text. This attribute only accepts ISO 639-1 language codes as values, see here for a full list.

    Aside from semantics, specifying the language will ensure that browsers render non-english characters correctly (issue described here).

    Demo:

    This text is in English
    <div lang="en">This text is in English</div>

    span

    Normally used to group inline elements together however, on Wacky Writers this is the only element where CSS styles can be used.

    Demo:

    span
    <span>span</span>

    lang=""

    Used to specify the language of the text. This attribute only accepts ISO 639-1 language codes as values, see here for a full list.

    Aside from semantics, specifying the language will ensure that browsers render non-english characters correctly (issue described here).

    Demo:

    This text is in English
    <span lang="en">This text is in English</span>

    style=""

    Allows for the use of CSS styles but only when font-size is the first style specified. This has been acknowledge and permitted for use by the site admin[source].

    Demo:

    Oh no! It didn't work!
    <span style="color: var(--success);">Oh no! It didn't work!</span>
    It worked!
    <span style="font-size:; var(--success);">It worked!</span>

    Back to HTML ReferenceSpot something we didn't? Let us know!
    Spatial Dividers

    Elements used to spacially separate content.

    Contents

    1. Line Break <br>
    2. Horizontal Rule <hr>

    Line Break

    Inserts a new line break forcing any content following the <br> onto a new line.

    Demo:

    Line 1
    Line 2
    Line 1<br>Line 2

    Horizontal Rule

    Inserts a horizontal line spanning the width of the container to visually separate content.

    The background of the demo box has been darkened to improve contrast.

    Demo:

    Line 1
    Line 2
    Line 1<hr>Line 2

    Back to HTML ReferenceSpot something we didn't? Let us know!
    List Elements

    Organising information using lists.

    Contents

    1. Description List <dl>, <dd>, <dt>
    2. Ordered List <ol>, <li>
    3. Unordered List <ul>, <li>

    Description List

    Creates a list of items accompanied by their descriptions.

    Demo:

    Item One
    Description One
    Item Two
    Description Two
    Item Three
    Description Three
    <dl>
    <dt>Item One</dt>
      <dd>Description One</dd>
    <dt>Item Two</dt>
      <dd>Description Two</dd>
    <dt>Item Three</dt>
      <dd>Description Three</dd>
    </dl>

    Ordered List

    Creates a new ordered list. On Wacky, this can only be used to create numerical lists.

    Demo:

    1. One
    2. Two
    3. Three
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>

    Using the <start=""> attribute:

    1. One
    2. Two
    3. Three
    <ol start="11">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>

    Unordered List

    Creates a bullet point list.

    Demo:

    • One
    • Two
    • Three
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>

    Back to HTML ReferenceSpot something we didn't? Let us know!
    Tables

    An element used to store organised information in rows and columns.

    <table>: Encapsulates all the code to be included in the table
    <caption>: Table Heading
    <tr>: Create a new row
    <th>: Heading of a row
    <td>: A table cell

    Demo:

    Sweets Menu!
    Item Price
    Icecream $2.00
    Chocolate $4.00
    <table>
    <caption>Sweets Menu!</caption>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
    <tr>
      <td>Icecream</td>
      <td>$2.00</td>
    </tr>
    <tr>
      <td>Chocolate</td>
      <td>$4.00</td>
    </tr>
    </table>

    Back to HTML ReferenceSpot something we didn't? Let us know!
    Details and Summary

    The contents of <details> can be hidden or shown on demand when the heading is clicked on. <summary> is a subelement of the <details> tag and contains the heading.

    Contents

    1. Details <details>
    2. Summary <summary>

    Details

    open=""

    The <details> element is closed by default until the user clicks on the heading. To have the contents of the element shown from the beginning, we use the open attribute.

    Demo:

    Closed

    Contents

    <details>
      <summary>Closed</summary>
      <p>Contents</p>
    </details>
    Open

    Contents

    <details open>
      <summary>Open</summary>
      <p>Contents</p>
    </details>

    .elided

    Applies custom styles to both <details> and <summary> elements.

    Demo:

    *

    Contents

    <details class="elided">
      <summary>*</summary>
      <p>Contents</p>
    </details>

    Elided CSS

    .elided {
      background-color: unset;
      padding: 0;
    }
    .elided summary {
      -webkit-user-select: none;
      user-select: none;
      cursor: default;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-sizing: border-box;
      margin: 0;
      padding: .5rem .75rem;
      color: var(--primary-medium);
      background: var(--primary-very-low);
      width: min-content;
      line-height: 1;
    }

    Summary

    title=""

    Used to specify the tooltip which appears when the mouse hovers over the link.

    Demo:

    With 'title' attribute

    Contents

    <details>
      <summary title="Hello World!">With 'title' attribute</summary>
      <p>Contents</p>
    </details>

    How it should appear:


    Back to HTML ReferenceSpot something we didn't? Let us know!
    Links

    Creates a hyperlink to a URL address. URL addresses include other websites, email addresses, files or even locations within the same webpage.

    Contents

    1. Attributes

    href=""

    The URL is expressed as the value of the href attribute.

    Demo:

    Click here!
    <a href="https://forum.wackywriters.com/t/wikipad-unofficial-coding-documentation/14894/13">Click here!</a>

    name=""

    This attribute has been depreciated and functionally replaced by the id attribute in HTML5. Note that id cannot be used on WackyWriters.

    Specifies the name of an anchor point in a document. Users can jump to these anchor points in a document without scrolling.

    Demo:

    Jump to anchor point:

    Click here!
    <a href="#name_attribute_demo">Click here!</a>

    ...

    ...

    ...

    Anchor Point
    <a name="nameAttributeDemo">Anchor Point</a>

    title=""

    Adds a text tooltip to display when the mouse is hovering over the element.

    Demo:

    Hyperlink with title="Tooltip!":
    Tooltip on hover!
    <a title="Tooltip!">Tooltip on hover!</a>

    How it should appear:

    Screenshot of a link with text "Tooltip on hover!" displaying the tooltip "Tooltip!".

    Back to HTML ReferenceSpot something we didn't? Let us know!
    HTML Tag <img>

    Used to display images.

    Contents

    1. Attributes

    width="", height=""

    Specifies the width and height of the <img>.

    Demo:

    <img width="50" height="50" src="https://storage.wackywriters.com/original/2X/1/15ea83bc7eaf249cc758b6b18b1e83d677760ca9.png">

    title=""

    Creates a popup tooltip which appears when the cursor remains stationary over the image for a few moments.

    Demo:

    Hover over the image to see the tooltip:

    <img title="WackyWriters" src="https://storage.wackywriters.com/original/2X/1/15ea83bc7eaf249cc758b6b18b1e83d677760ca9.png">

    How it should appear:

    Screenshot of the WackyWriters logo (legacy version) displaying the tooltip "WackyWriters".

    alt=""

    Contains a description of the image. Although this attribute is invisible majority of the time, screen readers and browsers where images have been disabled will replace the image with the alt text instead.

    In order to test this feature, you can temporarily disable images from loading (Google Chrome, Firefox).

    Demo:

    <img> without alt attribute:

    <img src="https://storage.wackywriters.com/original/2X/1/15ea83bc7eaf249cc758b6b18b1e83d677760ca9.png">
    <img> with alt="Legacy WackyWriters Logo":

    Legacy WackyWriters Logo

    <img alt="Legacy WackyWriters Logo" src="https://storage.wackywriters.com/original/2X/1/15ea83bc7eaf249cc758b6b18b1e83d677760ca9.png">

    Video and Audio

    Embedding video, audio and their subtitles into posts.

    Contents

    1. Video <video>, <source>
    2. Audio <audio>, <source>
    3. Subtitles <track>

    Video

    With <video>, we can embed multiple video formats. This is useful as not all browsers are capable of supporting all video formats, hence by including many we increase the number of users able to watch our video.

    Video borrowed from W3Schools.

    Demo:

    <video width="320" height="240" controls>
      <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
      <source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
      Your browser does not support the video tag.
    </video>

    Audio

    With <audio>, we can embed multiple audio formats. This is useful as not all browsers are capable of supporting all audio formats, hence by including many we increase the number of users able to listen to our audio.

    Audio borrowed from W3Schools.

    Demo:

    <audio controls>
      <source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
      <source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>

    Subtitles

    No working example available.

    Videos and audio can also come with subtitles across multiple languages.

    Example borrowed from W3Schools.

    Demo:

    <video width="320" height="240" controls>
      <source src="forrest_gump.mp4" type="video/mp4">
      <source src="forrest_gump.ogg" type="video/ogg">
      <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
      <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
    </video>

    Back to HTML ReferenceSpot something we didn't? Let us know!