Text Formatting

Also available in Deutsch, Español, Français, Polski, Русский, 简体中文.


See also: Actions


Wacko text formatting is slightly different from other wikis, so you should read the examples below.


You can experiment with the Wiki Markup in the Sandbox.
Text enclosed in pairs of double quotes is not formatted and remains unchanged when displayed.


source displayed

1. Table of contents


{{toc numerate=1}}


detailed description...

NB: if you are using this with the 'include' plugin, but don't want the headers that you're pulling in from the include file to be listed in the generated table of contents, use the 'notoc' option like so:


{{include page="Formatting/Headlines" notoc=1}}

2. Basic Formatting

**bold**
bold
//italic//
italic
__underline__
underline
##code##
code
--strikethrough--
strikethrough
++small++
small text
!!note!!
(also ''note'', but it is better not to use it).
note
!!(blue) blue color!!
blue color
!!(green) green color!!
green color
!!(red) red color!!
red color
??emphasis??
emphasis
??(blue)emphasis??
emphasis
??(red)emphasis??
emphasis
??(green)emphasis??
emphasis
%%embed code%%
int main(int arc,char **argv)
{
    printf("Hello, %s!\n", (argc>1) ? argv[1] : "World");
    return 0;
}	

NB: Strikethrough, like all formattings below (in this chapter), are multiline. All previous formattings are not multiline because we going to make formatting that doesn't break your texts.

3. Alignment

The alignment is carried out with the help of such a complex structure:


default
left
%%(wacko wrapper=text wrapper_align=center) center%%
center
%%(wacko wrapper=text wrapper_align=right) right%%
right
%%(wacko wrapper=text wrapper_align=justify) justify%%
justify

wrapper_align can be center, right or justify.

4. Links

As character markup for creating links, you can use round ((, )) or square [[, ]] brackets. Both characters are equal. Square brackets can be useful if the page text already contains simple round brackets, which may be mistakenly considered markup.

4.1. External Links

((http://wackowiki.org WackoWiki))
WackoWiki
http://wackowiki.org is highlighted automatically.
http://wackowiki.org
PPR:OneMinuteWiki
InterWiki linking
PPR:OneMinuteWiki
mailto:address@example.com
((address@example.com))
email.
mailto:address@example.com
address@example.com
xmpp:addresse@example.com
Jabber.
xmpp:addresse@example.com
((https://example.com/archive.zip Archive (zip) ))
https://example.com/archive.zip
Archive (zip)
https://example.com/archive.zip

4.2. Internal Links

[[Sandbox]] or ((Sandbox))
Sandbox
((Sandbox The sandbox page))
The sandbox page
https://wackowiki.org/wacko_logo.png
Image with no link.

((/HomePage https://wackowiki.org/wacko_logo.png))
Image with a link.
https://wackowiki.org/wacko_logo.png
{{anchor href="test"}}
anchor declaration.

((#test)) or ((/HomePage#TOC_1))
anchor reference.
test or /HomePage#TOC_1

Notes

  1. For internal links, relative or absolute addressing can be used.
  2. Mixed case words (LikeThis) do not need to be enclosed in brackets, when wikilinks are not disabled. For internal links (inside this Wiki), the complete URL should not be written (otherwise the link will not work). Add "https://" only for external links.
  3. To prevent a WordLikeThis from becoming a link, place a ~ (tilde) in front of it.
  4. How do you use a link to a local file with spaces in it? (e.g.: S:\Network Drive\File 1.txt or //server1\file name.txt)
    To link to local files on a server with spaces like that, use file:/// and switch all backslashes to forward slashes. Also, replace any spaces with %20, so your link would become file://///server1/file%20name.txt Also, there is an issue with linking to local files on Firefox: Solution
  5. To resize and align images from external sources you can use the following syntax: ((http://example.com/image.png width=500 align=center)), available parameters width, height and align=[left, center, right].

5. Including uploaded files

file:/mammut_mascot.jpg
checks for global file
file:mammut_mascot.jpg
checks for local file, that is only available to readers of this page
file:/Subpage/archive.zip
absolute path for local file, necessary for local files to be included in another page
The file must already be uploaded.


detailed description...

mammut mascot
file:/Subpage/archive.zip

5.1. Media Parameters

Parameters are added to the file syntax by appending a question mark ? and adding additional parameters by an ampersand &.
e.g. file:/lotus_flower.jpg?right&caption&400

Lotus Flower
Shinobazu Pond at Ueno Park at Ueno, Taito-ku in Tokyo
(Source:: Yoshikazu TAKADA /Some rights reserved)

  • linking
    • direct - to file
    • nolink - shows only the image
    • linkonly - shows only link
    • meta - to filemeta handler (default)
  • alignment
    • right
    • left
    • center
  • resizing
    • 400x300 - width × height
    • 0x700 - height
    • 600 - width
  • others
    • caption - shows caption
    • clear - clears float

6. Headlines


== Primary Heading ==

(2) Primary Heading


=== Secondary Heading ==

(3) Secondary Heading

==== Tertiary Heading ==

(4) Tertiary Heading

===== Small Heading ==

(5) Small Heading

====== Even Smaller Heading ==
(6) Even Smaller Heading

======= Smallest Heading ==
(7) Smallest Heading

Note: Right of the Heading it does not require the same number of "=" characters, it suffice two "=" signs.
The ==Primary Heading== is usually set with the page title and is by default not included in the table of content.

7. Bulleted and Numbered Lists


Indent lists with tabs or double spaces, and use *, 1., A., a., or i. to specify the type of list you want.
Lists:
  first line
    indented line
----
  * bullet list
  * bullet list-2
----
  1. numbered list
  1. numbered list-2
  2.#8 numbered list, with transition
----
  A. using upper case characters
  A. using upper case characters-2
----
  a. using lower case characters
  a. using lower case characters-2
----
  i. using Roman numbers
  i. using Roman numbers-2
----
  1. list
    1. nested list
      * and even more nested list
    1. nested list 2
  2. list 2	

Lists:

first line
indented line


  • bullet list
  • bullet list-2

  1. numbered list
  2. numbered list-2
  3. numbered list, with transition

  1. using upper case characters
  2. using upper case characters-2

  1. using lower case characters
  2. using lower case characters-2

  1. using Roman numbers
  2. using Roman numbers-2

  1. list
    1. nested list
      • and even more nested list
    2. nested list 2
  2. list 2

8. Cite and definitions

<[ Citation of text
(blockquote) ]>

Citation of text
(blockquote)

(?Term Some definition?)
Term
(?Term containing spaces == Some other definition?)
Term containing spaces

9. Footnotes

Text, then footnote[[*]] and second one[[**]]
Text, then footnote* and second one**
Text, then numeric footnote[[*1]] and second one[[*2]]
Text, then numeric footnote1 and second one2
[[#*]] Text for first footnote
[[#**]] Text for second footnote
[[#1]] Text for numeric footnote
[[#2]] Text for second numeric footnote
* Text for first footnote
** Text for second footnote
1 Text for numeric footnote
2 Text for second numeric footnote

auto-generated footnotes
[[^ text of footnote here]]
generates the footnotes at the end of the page, see example

10. Quoting

To mark a text as a reply or comment, you can use the following syntax:
Hi!
> Yes, it is.
>> Are you sure?
> Of course, yes!
>> Really?
>>> Now what?	

Hi!

11. Tables


Table with border
#|
*|header 1|header 2|header 3|*
||cell11|cell12|cell13||
||cell21|cell22||
|#


header 1header 2header 3
cell11cell12cell13
cell21cell22

Table without border, 100% width
#||
||cell11|cell12|cell13||
||cell21|cell22||
||#


cell11cell12cell13
cell21cell22

Note: Complex tables can be created by using inline HTML, if available.
To include a pipe | as content within your cell, enclosed the pipe by a pair of double quotes: ""|"".

12. Miscellaneous


Horizontal rule (separator):
----



Forced line break:
test---new line
test
new line


Forced empty line:
---"" ""---


Text output "as-is" -- ignoring markup
Text should be enclosed by a pair of double quotes, e.g. ""test---new line"". You can look at the source of this page for numerous examples.
Furthermore, for the screening of any form of marking, it is possible to use ~ (tilde).

13. Inline HTML

HTML output "as-is"
This works only if the site admin allows it.


<# <input type="text"> #> <# <input type="text"> #>

If you see <input type="text"> instead of the input field, the site admin don't turn up this function (config parameter: allow_rawhtml).
NB: It is very dangerous option, avoid XSS!.

14. Special Character

The automatic proofreader built into the wiki automatically adjusts the saved text to the formatting norms, saving the authors from excessively detailed editing. Here are the changes he makes:

Superscript
E=mc^^2^^
E=mc2
Subscript Insert spaces before and after vv.
H vv2vv O
H 2 O
Additional
^F °F
^C °C
(p) §
(tm) (tm)
(c) (c)
(r) (r)
+- +-
~~ ~

15. Macros


Macros are little shortcuts which automatically update the document you're writing with relevant variables such as your name and wikiname, the date of writing etc. Basically, they're just little text shortcuts.


To automatically insert your name, use:
::::
RomanIvanov


Auto name and date:
::@::
RomanIvanov /20.06.2003 18:13/


Date:
::+::
20.06.2003 18:13

16. Code and Syntax highlighting

WackoWiki is easily extended with text formatters. They are called using syntax %%(name) text%%.


As character markup for text formatters, you can use percent signs %%, %% or grave accents ``, ``. Both characters are equal. Grave accents can be useful if the text already contains percent signs, which may be mistakenly considered markup.
Beyond that this allows you to wrap a formatter in a formatter, e.g. wrapping a CSS highlighter in a details formatter.


There are several formatters included in Wacko package:

%%(wacko)The text as it is. ((/HomePage))%%
This format displays the text in the same way as if it was written without a formatter. Convenient for applying additional wrappers to text (alignment, boxes, etc. See below.)
The text as it is. /HomePage
%%(php) PHP-code%%
<?php
phpinfo();
$s = "Hello, World!\n";
echo $s;

Attention: that code should begin with <?php ?> , because builtin PHP parser identifies PHP by those separators.

%%(comment) Comments, they will be hidden when the page is stored and redisplayed %%

%%(noautolinks) no AutoLinks if CamelCase-Words%%
no AutoLinks if CamelCase-Words
%%(details title="Summary" open=1) Details info. %%
Summary The HTML Details Element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary> element.

%%(cl)zypper dup --no-recommends%%
zypper dup --no-recommends	

%%(chat [type="div|table"])
chat log
%%

Mike Hi altogether.
12:04
Alice Did you check out the link https://example.com/
12:05
Pete I did't read your message.
The images
you drawn
are awesome!
12:10

%%(email) Email%%
Hi!
RI>> Yes, it is.
>Are you sure?

Of course, yes!

Roman.	

%%(sql) SQL-code%%
SELECT * FROM sometable 
WHERE a = '12' and b = 2 
ORDER BY c DESC;

There's also (ini), (html), (css), (java) and (pascal) highlighters.
%%(html) HTML-Code%%
<html>
<a href="http://example.com">test</a>
</html>	

%%(ini) ini-Code%%
[Wiki]
BestEngine="WackoWiki"
Version=6	

%%(css) CSS-Code%%
body {margin: 0; padding: 5px;}
.class {background: url("http://example.com/");} 	

%%(pascal) PASCAL-Code%%
program megaprogramme;
{ comment }
BEGIN
 if a = 15 then writeln('test');
END.	

16.1. Info box

%%(info type="note" title="Remarks" icon=0) content... %%


Types: default, error, example, important, note, question, quote, success, warning
title box title
icon show icon, default value is 1

%%(info type="note")
content...
%%

A wiki is a website where users can add, remove, and edit every page using a web browser. It's so terrifically easy for people to jump in and revise pages that wikis are becoming known as the tool of choice for large, multiple-participant projects.


%%(info type="warning")
content...
%%

As with any software that you expose to the internet, there may be bugs or security problems. Do not install WackoWiki unless you intend to keep up with security upgrades.

16.2. PEAR Text Highlighter

PEAR package for syntax highlighting


%%(hl [Formatter] numbers=1 start=2) code example %%


numbers line numbering type: 1 -> ol, 2 -> Table
start lets the line numbers start at any number, and not just at 1


Formatter: abap, cpp, css, diff, dtd, html, java, javascript, perl, php, ruby, python, sh, sql, vbscript, xml.

%%(hl css) CSS-Code%%
body {margin: 0; padding: 5px;}
.class {background: url("http://example.com/");}


%%(hl javascript) Javascript-Code%%
var a = document.getElementById("test");
a.value = new Array(15, 31);
function echo (msg) {alert(msg)};


%%(hl php numbers=2) PHP-Code%%
1
2
3
4
<?php
phpinfo();
$s = "Hello, World!\n";
echo $s;


%%(hl xml) xml-Code%%
<config>
<section name="test">
  <var>Test</var>
  <val><![CDATA[..text...]]></val>
</section>
</config>

16.3. GeSHi

GeSHi Code Highlighting - Generic Syntax Highlighter


%%(geshi [Formatter] numbers=1 start=35 lines=37) source%%

%%(geshi css) CSS-Code%%
Formatter highlight/geshi not found

If you see Formatter highlight/geshi not found, the GeSHi formatter was not added to this site.

17. Wrappers around formatters

Also available in Deutsch, Français, Русский, 简体中文.


Additionally it is possible to assign a specific wrapper for each formatter %%(formatter) text%% with the parameter wrapper=.


%%(formatter
[wrapper="box | shade | page | text"]
[wrapper_align= "left | center | right | justify"]
[wrapper_title="Titel"]
[wrapper_type="default | error | example | important | note | question | quote | success | warning"]
[wrapper_width="pixel"]
[col=1 | 2 | 3 | 4 | 5]
[clear])
Text
%%

box shade page text
type + + -
title + + -
alignment + 1 2 +
clear + +
width + 1 + 3
column + +
frame + +
automatic line feed + + +

1 This option does not make sense, because the width of the block is always equal to the width of the page.
2 Only to the left.
3 If you don't put the line feeds yourself, the block width is fixed by the engine at approximately 90% of the page width.


Grammar = [FORMATTER | FORMAT WRAPPER | FORMAT WRAPPER OPTION | Text]


FORMATTER = [ cl | comment | css | email | hl * | html | info | ini | java | pascal | php | sql | wacko ]


FORMAT WRAPPER = box, shade, page und text


TEXT = alles, frei.

17.1. box



%%(css wrapper=box wrapper_align=left wrapper_width=270)
.d { font-size: 70% }
%%


As we see, wrapper box makes it possible to form the convenient "menu", streamlined with text. By the way, there is special formatter (Box), which does not make anything except as it turns around text into this wrapper.

17.2. shade


%%(css wrapper=shade)
.d2 { font-size: 70% }
%%

.d2 { font-size: 70% } 	

shade — this box without the tuning.

17.3. text


%%(wacko wrapper=text wrapper_align=center)
text on to center
%%

text on to center

text is derived the "floating" (float) block of text.

17.4. page

%%(wacko wrapper=page wrapper_width=200)
this text cannot be wider than two hundred pixel
%%

this text cannot be wider than two hundred pixel

page it makes it possible to regulate the width of the usual block of text.

17.5. Example


%%(wacko wrapper=box wrapper_type="quote" wrapper_width=300 wrapper_title="Box")
«A hundred times every day I remind myself that my inner and outer life depend upon the labors of other men, living and dead, and that I must exert myself in order to give in the measure as I have received and am still receiving.» – Albert Einstein
%%



Comments

  1. Re: How to resize an image?

    You want resize the picture itself or do you want diplay the picture only 50%?

    It's better to resize the image before the upload.

    1. Media parameters

    Since R5.5.8 you can resize an image by appending the following media parameters:
    e.g. file:/image.png?200x400

    • resizing
      • 400x300 - width x height (pixel)
      • 0x700 – height (pixel)
      • 600 - width (pixel)

    2. Wrapper and autoresize
    %%(wacko wrapper=page wrapper_width=500)file:/image.png%%
    %%(wacko wrapper=box wrapper_width=600)file:/image.png%%

    A wrapper might also be useful if you use it with an unknown image size, e.g.
    {{randomimage global=1}}

    3. HTML & CSS
    Using percentage is not supported, but if you have HTML enabled, you can use CSS style to do that e.g.
    <# <img style="width: 50%; height : auto;" align="left" alt="WackoWiki" src="file/global/wacko_logo.png"> #>
    • WikiAdmin
    • 28.08.2019 16:26 edited