Using Wiki Code

General Info

All text is entered as plaintext. Any formatted text from word processing applications will produce unpredictable results.

Paragraph separations are made by typing two "returns."

This CMS app contains an open-source wiki-to-html translator courtesy of Marc Worrell that lets you use wiki markup to style your entries. Please view the source code of this page in your browser, if you need to better see how to form the wikicode elements.

The wiki translator supports the following styling elements:

Headings

Use "+" signs in the first position of a line to make successive indented and styled headings. The number of "+" signs determines the heading level. There must be a space between the last "+" and the heading text.

++ Heading level 2 text
Paragraph text grouped under the heading.

...and so on for levels 2, 3, and 4, etc., as needed.

Tables of contents

Wikicode can build a linked table of contents. Just embed this code on a line all by itself in the place where you want the toc to appear:

[[toc]] // plain version, always visible
[[tof]] // fancy Wikipedia-style show/hide version,
        // requires this css to work properly:
        // #show,.tofbox .wikitoc{display:none;}
        // #show:checked~.wikitoc{display:block;}

Only the first occurring toc or tof in each article of text on a page will be recognized. The translator will locate the secondary HTML headings in the content article body (h1 tags are ignored), and list them as links to anchors it installs above the headings in the final translated text.

All HTML tags produced by the wiki translator will be styled according to rules in the site CSS stylesheets.

Lists

Typing this:

* One 1st-column asterisk
* starts an un-ordered list
 * indent one space to create
 * sub-lists

Produces this:

One 1st-column asterisk
starts an un-ordered list
- indent one space to create
- sub-lists

# One 1st-column pound-sign
# starts an ordered list
 . indent one space to create
 . sub-lists
# List continues

One 1st-column pound-sign
starts an ordered list
- indent one space to create
- sub-lists
List continues

Definitions

Begin the line with a colon and space ": ", followed by the term, then on the same line write another space-colon-space " : " and the definition.

: Term : Definition

Term: Definition

FAQs

You can create an accordion-style FAQ list by beginning a line with "Q " followed by a question, separated from the answer by a " Q " combination. The accordion CSS styling (view the source of this page) will produce html like this:

<fl>
  <input id="acrd1-item1" type="radio">
<label for="acrd1-item1">Question1 here</label>
  <fa>Answer1 here</fa>
  <input id="acrd1-item2" type="radio">
<label for="acrd1-item2">Question2 here</label>
  <fa>Answer2 here</fa>
  <input id="acrd1-item3" type="radio">
<label for="acrd1-item3">Question3 here</label>
  <fa>Answer3 here</fa>
</fl>

Question1 here Answer1 here Question2 here Answer2 here Question3 here Answer3 here

The stylesheet must contain the rules to add the styling and dynamic operation of the FAQ class of list. Note also that you can have only ONE FAQ on a page for this to work!

Blockquotes

The greater-than "> " symbol and a space indents text in a blockquote tag.

> This is a blockquote that can be styled with stylesheet rules.

This is a blockquote that can be styled with stylesheet rules.

Centering

Begin a line with an equal sign and space "= " to center a line of text.

= Centered text

Centered text

Tables

Tables are formed by enclosing cells in double-pipes ("||"). Specify a column header by preceding its contents with a tilde ("~") in the first character position of the cell. Use a greater-than first character to align cell text to the right. For example, this:

||~ Item ||~ Data ||
|| SerNo || R1234567 ||
|| Mfg || Ruger ||
|| Mod || Redhawk ||
|| Cal ||> .44mag ||

yields this:

Item	Data
SerNo	R1234567
Mfg	Ruger
Mod	Redhawk
Cal	.44mag

Observe this page source code to view the resulting HTML. Cell coloring and text alignment is controlled as usual by clever CSS rules.

|| cell one || cell two ||
|||| big ol' line ||
|| cell four ||> cell five ||
|| cell six || here is a very long cell ||

cell one	cell two
big ol' line
cell four	cell five
cell six	here is a very long cell

Links

Web addresses in your text beginning with "http://" or "https://" will be converted to direct links. I recommed using the target="new" attribute to open links in a new window.
Use this code to link to other urls:

     ((url|description attr="value"))

example:

     ((https://bing.com|Search target="new"))

The description can be text or an image wiki-code (see below).
(Note the "|" between the middle "l" and "d" separating the target url on left from the the link description text on the right. Attributes are optional, and may include id, name, target, title, class. For example target="new" to force the link to open a new window.)

Anchors

Anchors are named places on a page you can link to, for instance footnotes at the bottom of some text. Use a "#-sign" as the url, and a number or name as the description. While the link is visible to be clicked on, the target anchor is hidden.
Here is a link to a named anchor on the same page:

    ((#url|description))

for example:

    ^^``[``((#ref1|1))``]``^^

creates a typical raised Wikipedia-like link ^[1] to a reference citation at the bottom of the page in a list. Notice that the square brackets special characters have to be wikicoded as literals to prevent triggering the translator.
If you wish to make a standard superscript link, such as ², use this simpler format:

     ^^((#ref2|2))^^

And here is how to code the target anchor it would cause the browser to scroll to:

    [[# anchor-name]]
    footnote text

in our case:

    [[# ref2]]
    [2] - Perhaps a link to an info source

Images

Images can be placed using standard wiki notation:

     [[image image_path options]]

For example (type all on one line, not as it appears here),

     [[image uploaded_imgs/Willis.jpg width="250px" class="floatr" 
     alt="My Jeep Willis first day home after an impulsive 
     Saturday purchase" caption="after"]]

My Jeep Willis first day home after an impulsive Saturday purchaseIn this case the image "Willis.jpg" will be found in the uploaded_imgs/ folder of your website, the option width="250px" limits the horizontal display size of the image to 250 pixels, and the option class="floatr" throws the image floating to the right of text that flows around it to the left. Your site's stylesheet must have a CSS class with rules to do that (see the source of this page).

Captions

Notice in the above example that you can place a caption below the image by adding a caption="after" option, causing the translator to use the "alt" option text as the caption. The stylesheet should have a "max-width" rule to limit the caption to the width of the image (view the source of this page to see how).
You can place a thumbnail image that opens a larger version by putting the image wiki-code inside a link wiki-code like so (again, type on one line):

     ((big.jpg|[[image uploaded_imgs/thumb.jpg 
     title="Click to bigify"]] target="new"))

Notice that the target attribute is separated by a leading space and outside the thumbnail image wiki-code brackets. Using the original (big) image with the width="200px" attribute will function as a thumbnail too, but requires additional bandwidth during page initial loading.

Notice also the title attribute -- this text is what appears when you mouseover the image.

Colored Text

You can color text by using this construct:

    ``##cc4466|colored text##``

colored text

Note that the color is specfied in CSS red-green-blue hexadecimal format, "rrggbb", and overrides any text color rules in the stylesheet.

Inline Formatting

//emphasized text//	emphasized text
strong text	strong text
//emphasized and strong//	emphasized and strong
{{teletype text}}	`teletype text`

Combined formatting

Here is some colored, emphasized and strong text, using a shorthand color triplet notation:

    ``##c46|//**colored, emphasized and strong**//##``

colored, emphasized and strong

Email Addresses

Email addresses can be encoded in the final HTML so that web bots cannot easily find them. Typing email addresses like this:

     [mailto:name@domain.ext name@domain.ext]

Will produce a linked/encoded on-page address like this:

When clicked, the address should open your default email client with a pre-addressed email form ready to fill in and send.

Literal

You can temporarily suspend wiki code interpretation by typing double-grave "`" accents on either side of text.

This text will be parsed.

``This //text// will not be **parsed**.``

Backslash "\" continues lines

Backslash causes the line end "\n" to be removed:

You can break long lines in the source text with\ 
a backslash for clarity, and the translator will\ 
display them unbroken.

You can break long lines in the source text with a backslash for clarity and the translator will display them unbroken.

HTML

The wikicode translator was designed to eliminate the need to code in HTML for 99% of the site content. Occasionally, though, it is desireable and indespensable to use HTML for special circumstances.

For instance, it is sometimes useful to format content into two colums to make better use of the page space. This can be done by putting a <html> tag on a line all by itself, then placing HTML code below that can be controlled by your site stylesheet to accomplish packaging text and floating it to the right of other content. Close off the HTML block with a </html> tag, also on its own line. The content between the tags will be interpreted normally by the wikicode translator.

For example:

<html>
<div class="rightcol">
</html>
This is the right column text that will appear to be 
in a right column beside the original content of the page,
and is interpreted by the wikicode translator.
<html>
</div><!--closes the right column space -->
</html>
This is the original text content that will wrap around 
to the left of the right column content shown between 
HTML tags as above.

Again, your CSS stylesheet must contain rules to control the placement of the right "column". For instance:

div.rightcol {
float: right;      /* placement of the right column   */
width: 45%;        /* about half the page minus a gap */
padding: 0;
margin: -0.5em 0 0 1em; /* puts a gap between the right
                      column and the left content     */
}

This is the right column text that will appear to be in a right column beside the original content of the page, and is interpreted by the wikicode translator.

This is the original text content that will wrap around to the left of the right column content shown between HTML tags as above.

Videos

Another use for the html tag is to embed HTML5 videos. Here is an example:

<html>
<div style="text-align: center;">
<video width="320" height="240" controls>
<source src="uploaded_imgs/name.mp4" type="video/mp4">
</video>
</div>
</html>

The video will display as a 320x240 rectangle centered on the page with controls around the corners and a start triangle in the center. Instead of the styled centering, above, you can use class="video", and include appropriate rules in your CSS stylesheet for the ".video" class.

Comments

Authors can comment their work with lines that are only visible in the editor, not by visitors to the website. Simply type on a separate line in the standard format for an html comment:

<!-- This is a comment line -->

Author

The creator of this monstrosity is Rik Nilsson, a U.S. Navy Vietnam-era submarine service veteran of the Cold War who, when he is not Jeeping, tries to keep his mind sharp by programming for the Linux, Apache, MySQL, PHP (LAMP) platform. He assumes no responsibility nor expects any reward for anything, bad or good, that happens from your using this app.