Style Guide

When porting documents from the old wiki over to the new one or if you’re generally writing new content for the script.aculo.us wiki,
this style guide might be helpful for structuring your document.

Document includes

Syntax Highlighting

In order to make syntax highlighting work for documents which contain code examples, be sure to put this line to the very beginning of your document:


<link rel="stylesheet" title="Sunburst" href="http://script.aculo.us/github/styles/sunburst.css"/>

and the following code-block to the very end of the document:


<script type="text/javascript" src="http://script.aculo.us/github/highlight.js"></script>
<script type="text/javascript">
  hljs.initHighlightingOnLoad.apply(null, hljs.ALL_LANGUAGES);
</script>

Javascript Includes

In documents where you show demos of script.aculo.us’ features, include the following code at the beginning of
your document:


<script type="text/javascript" src="http://script.aculo.us/prototype.js"></script>
<script type="text/javascript" src="http://script.aculo.us/scriptaculous.js"></script>

Mind that these files are the latest versions from the master branch, and may contain bugfixes that make them work slightly different from the latest official release.

Document Structure

Documents which show the usage of an effect, a control or other related topics should be structured as following:

h2. Introduction — A short paragraph describing what the document is about.
h2. Syntax — A description of the usage of the topic (e.g. how to instantiate an effect, the order of parameters, etc.).
h2. Options — A table which shows all available options and a corresponding description.
h2. Examples — Practical usage examples of the topic.
h2. Demo — A playable demo of the topic.
- h3. Source Code of the Demo — All the code which is needed to rebuild the demo, an optional description.

Including a Path

When a document belongs to a specific category, include a path in the beginning of your document.
An example:
Effect.Morph belongs to the Core Effects category. The path for the Effect.Morph document will look like:

Core Effects > Effect.Morph

The textile snippet for the above example looks like this:


p{background:#eee; border-bottom:1px solid #bbb; padding:4px 2px 2px 2px;}. [[Core Effects]] > *Effect.Morph*

Document Linking

The syntax for linking to other documents looks like:


[[Title of another document]]

Be sure to not use the camelcased style (CoreEffects) as often seen in other wikis, but instead the real, space-seperated title of the document you want to link to (Core Effects).

Here an example on how to link from your document to other documents of the wiki:


[[Core Effects]] => links to the document with the title "Core Effects"
[[Combination Effects]] => links to the document with the title "Combination Effects"

Code Examples

When giving examples, wrap your example code into code tag with the programming language the example is written in as its class-attribute which is again wrapped in a pre-tag. An example of this would look like this:


<pre><code class="javascript">
  Example code here
  …

Demos

1. Include all the necessary JS files as described in Javascript Includes in your document.

2. Wrap all your demo code in a notextile-tag.

3. Wrap all your HTML demo code into a div[class="demo"].

4. In order to prevent an overriding of Githubs own Javascript code, be sure to add a prefix (e.g. scriptyGetValue()) when defining custom functions for your demo.

script.aculo.us