openproject/app/views/help/wiki_syntax_detailed.html.erb

<%#-- copyright
OpenProject is a project management system.
Copyright (C) 2012-2015 the OpenProject Foundation (OPF)

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License version 3.

OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
Copyright (C) 2006-2013 Jean-Philippe Lang
Copyright (C) 2010-2013 the ChiliProject Team

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.

See doc/COPYRIGHT.rdoc for more details.

++#%>
<% content_for :styles do %>
  body { font:80% Verdana,Tahoma,Arial,sans-serif; }
    h1, h2, h3, h4 {  font-family: Trebuchet MS,Georgia,"Times New Roman",serif; }
    pre, code { font-size:120%; }
    pre code { font-size:100%; }
    pre {
        margin: 1em 1em 1em 1.6em;
        padding: 2px;
        background-color: #fafafa;
        border: 1px solid #dadada;
        width:95%;
        overflow-x: auto;
    }
    a.new { color: #b73535; }

    .CodeRay .c  { color:#666; }

    .CodeRay .cl { color:#B06; font-weight:bold }
    .CodeRay .dl { color:black }
    .CodeRay .fu { color:#06B; font-weight:bold }

    .CodeRay .il { background: #eee }
    .CodeRay .il .idl { font-weight: bold; color: #888 }

    .CodeRay .iv { color:#33B }
    .CodeRay .r  { color:#080; font-weight:bold }

    .CodeRay .s  { background-color:#fff0f0 }
    .CodeRay .s  .dl { color:#710 }
<% end %>
<% html_title "Wiki Formatting" %>
<h1><a name="1" class="wiki-page"></a>Wiki Formatting</h1>
<h2><a name="2" class="wiki-page"></a>Links</h2>
<h3><a name="3" class="wiki-page"></a>OpenProject links</h3>
<p>OpenProject allows hyperlinking between work packages, changesets and wiki pages from anywhere wiki formatting is used.</p>
<ul>
  <li><strong>#124</strong> displays a link to a work package: <del><a href="#" class="work package" title="bulk edit doesn't change the category or fixed version properties (Closed)">#124</a></del> (link is striked-through if the work package is closed)</li>
  <li><strong>##124</strong> displays a link to a work package with context information: <a href="#" class="work package status-1 priority-2 overdue created-by-me" title="Work package subject (New)">Bug #12: Work package subject</a> 2012-05-14 - 2012-05-23</li>
  <li><strong>###124</strong> displays a link to a work package with context information and an excerpt (first 3 lines) of the description</li>
  <li><strong>r758</strong> displays a link to a changeset: <a href="#" class="changeset" title="Search engine now only searches objects the user is allowed to view.">r758</a></li>
  <li><strong>commit:c6f4d0fd</strong> displays a link to a changeset with a non-numeric hash: <a href="#" class="changeset">c6f4d0fd</a></li>
  <li><strong>sandbox:r758</strong> displays a link to a changeset of another project: <a href="#" class="changeset" title="Search engine now only searches objects the user is allowed to view.">sandbox:r758</a></li>
  <li><strong>sandbox:c6f4d0fd</strong> displays a link to a changeset with a non-numeric hash: <a href="#" class="changeset">sandbox:c6f4d0fd</a></li>
</ul>
<p>Wiki links:</p>
<ul>
  <li><strong>[[Guide]]</strong> displays a link to the page named 'Guide': <a href="#" class="wiki-page">Guide</a></li>
  <li><strong>[[Guide#further-reading]]</strong> takes you to the anchor "further-reading". Headings get automatically assigned anchors so that you can refer to them: <a href="#" class="wiki-page">Guide</a></li>
  <li><strong>[[Guide|User manual]]</strong> displays a link to the same page but with a different text: <a href="#" class="wiki-page">User manual</a></li>
</ul>
<p>You can also link to pages of an other project wiki:</p>
<ul>
  <li><strong>[[sandbox:some page]]</strong> displays a link to the page named 'Some page' of the Sandbox wiki</li>
  <li><strong>[[sandbox:]]</strong> displays a link to the Sandbox wiki main page</li>
</ul>
<p>Wiki links are displayed in red if the page doesn't exist yet, eg: <a href="#" class="wiki-page new">Nonexistent page</a>.</p>
<p>Links to other resources:</p>
<ul>
  <li>Versions:

    <ul>
      <li><strong>version#3</strong> (link to version with id 3)</li>
      <li><strong>version:1.0.0</strong> (link to version named "1.0.0")</li>
      <li><strong>version:"1.0 beta 2"</strong></li>
      <li><strong>sandbox:version:1.0.0</strong> (link to version "1.0.0" in the project "sandbox")</li>
    </ul>
  </li>
</ul>
<ul>
  <li>Attachments:

    <ul>
      <li><strong>attachment:file.zip</strong> (link to the attachment of the current object named file.zip)</li>
      <li>For now, attachments of the current object can be referenced only (if you're on a work package, it's possible to reference attachments of this work package only)</li>
    </ul>
  </li>
</ul>
<ul>
  <li>Repository files:

    <ul>
      <li><strong>source:some/file</strong>           (link to the file located at /some/file in the project's repository)</li>
      <li><strong>source:some/file@52</strong>        (link to the file's revision 52)</li>
      <li><strong>source:some/file#L120</strong>      (link to line 120 of the file)</li>
      <li><strong>source:some/file@52#L120</strong>   (link to line 120 of the file's revision 52)</li>
      <li><strong>source:"some file@52#L120"</strong> (use double quotes when the URL contains spaces</li>
      <li><strong>export:some/file</strong>           (force the download of the file)</li>
      <li><strong>sandbox:source:some/file</strong>   (link to the file located at /some/file in the repository of the project "sandbox")</li>
      <li><strong>sandbox:export:some/file</strong>   (force the download of the file)</li>
    </ul>
  </li>
</ul>
<ul>
  <li>Forum messages:

    <ul>
      <li><strong>message#1218</strong> (link to message with id 1218)</li>
    </ul>
  </li>
</ul>
<ul>
  <li>Projects:

    <ul>
      <li><strong>project#3</strong> (link to project with id 3)</li>
      <li><strong>project:someproject</strong> (link to project named "someproject")</li>
    </ul>
  </li>
</ul>
<p>Escaping:</p>
<ul>
  <li>You can prevent OpenProject links from being parsed by preceding them with an exclamation mark: !</li>
</ul>
<h3><a name="4" class="wiki-page"></a>External links</h3>
<p>HTTP URLs and email addresses are automatically turned into clickable links:</p>
<pre>
https://www.openproject.org, someone@foo.bar
</pre>
<p>displays: <a class="external" href="https://www.openproject.org">https://www.openproject.org</a>, <a href="mailto:someone@foo.bar" class="email">someone@foo.bar</a></p>
<p>If you want to display a specific text instead of the URL, you can use the standard textile syntax:</p>
<pre>
"OpenProject web site":https://www.openproject.org
</pre>
<p>displays: <a href="https://www.openproject.org" class="external">OpenProject web site</a></p>
<h2><a name="5" class="wiki-page"></a>Text formatting</h2>
<p>For things such as headlines, bold, tables, lists, OpenProject supports Textile syntax.  See <a class="external" href="http://www.textism.com/tools/textile/">http://www.textism.com/tools/textile/</a> for information on using any of these features.  A few samples are included below, but the engine is capable of much more of that.</p>
<h3><a name="6" class="wiki-page"></a>Font style</h3>
<pre>
* *bold*
* _italic_
* _*bold italic*_
* +underline+
* -strike-through-
</pre>
<p>Display:</p>
<ul>
  <li><strong>bold</strong></li>
  <li><em>italic</em></li>
  <li><em>*bold italic*</em></li>
  <li><ins>underline</ins></li>
  <li><del>strike-through</del></li>
</ul>
<h3><a name="7" class="wiki-page"></a>Inline images</h3>
<ul>
  <li><strong>!image_url!</strong> displays an image located at image_url (textile syntax)</li>
  <li><strong>!>image_url!</strong> right floating image</li>
  <li>If you have an image attached to your wiki page, it can be displayed inline using its filename: <strong>!attached_image.png!</strong></li>
</ul>
<h3><a name="8" class="wiki-page"></a>Headings</h3>
<p>Prefixing a line with <code>h1.</code>, <code>h2.</code> etc. will create a heading:</p>
<pre>
h1. Heading
h2. Subheading
h3. Subsubheading
</pre>
<p>OpenProject assigns an anchor to each of those headings thus you can link to them with "#Heading", "#Subheading" and so forth.</p>
<h3>Numbered Headings</h3>
<p>
  You may also define numbered headings by prefixing lines with <code>h1#.</code>, <code>h2#.</code> etc. The heading numbers are then automatically managed by OpenProject for you.
      </p>
<table>
  <thead>
    <tr>
      <th>
        Wiki format
            </th>
      <th style='padding-left: 3em'>
        Resulting Text
            </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <pre>
h1#. Topic Foo
h2#. Sub-Topic Foo Bar
h1#. Topic Baz
</pre>
      </td>
      <td style='padding-left: 3em'>
        <strong>1. Topic A</strong><br/>
        1.2. Sub-Topic 1<br/>
        <strong>2. Topic B</strong>
      </td>
    </tr>
  </tbody>
</table>
<h3><a name="9" class="wiki-page"></a>Paragraphs</h3>
<pre>
p>. right aligned
p=. centered
</pre>
<p style="text-align:center;">This is a centered paragraph.</p>
<h3><a name="10" class="wiki-page"></a>Blockquotes</h3>
<p>Start the paragraph with <strong>bq.</strong></p>
<pre>
bq. Rails is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern.
To go live, all you need to add is a database and a web server.
</pre>
<p>Display:</p>
<blockquote>
  <p>Rails is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern.<br />
    To go live, all you need to add is a database and a web server.</p>
</blockquote>
<h3><a name="11" class="wiki-page"></a>Table of content</h3>
<pre>
{{toc}} => left aligned toc
{{>toc}} => right aligned toc
</pre>
<h2><a name="12" class="wiki-page"></a>Macros</h2>
<p>OpenProject has the following builtin macros:</p>
<p>
  <dl>
    <dt><code>hello_world</code></dt>
    <dd>
      <p>Sample macro.</p>
    </dd>
    <dt><code>include</code></dt>
    <dd>
      <p>Include a wiki page. Example:</p>
      <pre><code>{{include(Foo)}}</code></pre>
    </dd>
    <dt><code>macro_list</code></dt>
    <dd>
      <p>Displays a list of all available macros, including description if available.</p>
    </dd>
  </dl>
</p>
<h2><a name="13" class="wiki-page"></a>Code highlighting</h2>
<p>Code highlighting relies on <a href="http://coderay.rubychan.de/" class="external">CodeRay</a>, a fast syntax highlighting library written completely in Ruby. It currently supports c, cpp, css, delphi, groovy, html, java, javascript, json, php, python, rhtml, ruby, scheme, sql, xml and yaml languages.</p>
<p>You can highlight code in your wiki page using this syntax:</p>
<pre>
&lt;pre&gt;&lt;code class="ruby"&gt;
  Place you code here.
&lt;/code&gt;&lt;/pre&gt;
</pre>
<p>Example:</p>
<pre><code class="ruby CodeRay"><span class="no"> 1</span> <span class="c"># The Greeter class</span>
<span class="no"> 2</span> <span class="r">class</span> <span class="cl">Greeter</span>
<span class="no"> 3</span>   <span class="r">def</span> <span class="fu">initialize</span>(name)
<span class="no"> 4</span>     <span class="iv">@name</span> = name.capitalize
<span class="no"> 5</span>   <span class="r">end</span>
<span class="no"> 6</span>
<span class="no"> 7</span>   <span class="r">def</span> <span class="fu">salute</span>
<span class="no"> 8</span>     puts <span class="s"><span class="dl">"</span><span class="k">Hello </span><span class="il"><span class="idl">#{</span><span class="iv">@name</span><span class="idl">}</span></span><span class="k">!</span><span class="dl">"</span></span>
<span class="no"> 9</span>   <span class="r">end</span>
<span class="no"><strong>10</strong></span> <span class="r">end</span>
</code>
</pre>