How to use nCode

nCode can be considered as a branch of the popular bbCode I am about to tell you now.

The bbCode language

Some of you probably know bbCode, widely used on the Internet. It is a sort of "small-html-language" developed for phpBB forums, one of the most popular forum systems on the web.
Step by step, this language became so popular that others have decided to use it for their own systems.

A bbCode example:

Code: Others

However, this language has two main drawbacks:

• It uses square brackets, and those -depending on keyboards- can be of a tricky access, requiring an amazing finger flexibility.
• It still is pretty basic, does not benefit from the many options CSS offers, and does not feature any semantic tag.

Hence, we decided to create our own code for Newbies Paradise in order to make it easy to draft messages online, and to offer as many option as we can to our users.

The nCode language

General information

Here is, in a few steps, how nCode works:

• nCode uses angle brackets < > instead of square brackets [ ] from bbCode.
• Tags names are english and easy to remember. For instance:
  
  Code: Ncode

  1	<bold> </bold>

  
  
• It features a XML like syntax. This means tags are complying to the same standards than xHTML language for those who might know it (tags have to be closed properly and in the correct order). This gives a better flexibility to the code, and allows to use the PHP's DomXML library to parse (translate into xHTML) messages.

Tags closing order

There is only one very important rule you have to know when using ncode: you have to close tags in the reversed order you used to open them.

Here is an example of what is not to be done:

Code: Ncode

Here is now the right way to do things:

Code: Ncode

This is pretty much all you need to know about the generic use of nCode. Not that complex!

What we call "nForm" actually is the form where you draft your nCode messages.

Here is what a nForm looks like:



It is a pretty peculiar form:

• At the top is the area where you input your text.
• At the bottom, you have a real-time preview of how your nCode will be displayed.

While typing some text, you can check how it looks like!



You should keep in mind that the real-time preview is nothing but a preview. It will give you an idea of what will your message look like once it is sent, but cannot give an "ultimate" preview. Since this is done real-time, we actually had to set some limits to the amount of parsed tags. Do not be surprised if, sometimes, the preview does not work as expected.
The point is you can have an idea of what the final result will be.

Use the nCode buttons!

At the top of the nForm, you have a nice amount of buttons. They will help you to use nCode without having to know it by heart (which is helpful at second thought! ).

You just have to click them to insert the related nCode. There are two ways to do it:

• Either you just click the button. nCode tags will be inserted, and you just have to input the text you need.
• Or you first input your text, select it, and click the nCode button. The selected text will automatically be surrounded with the appropriate nCode tags.

Furthermore, there are several select lists underneath buttons which will give you the option to insert some more nCode tags (position, font, colour,...).

Smilies

On the left-side of the nForm, you will find several smilies you can insert in your message. You just have to click the one you want.

There is a nice choice of smilies. Here is a sample:


But this is not it! Just above the smilies' list, there is a link to "Other smilies".
If you click it, a new window will pop up with even more smilies to use! These ones are less used, but you may find them useful at some point.

Here are some of those smilies:


Registered users can submit new smilies if they wish to, given they have the same look than the ones we are using.

By the way, thanks go to Venom who designed them especially for us.

The nUploads

Underneath smilies, you will find two links. The first one leads to the nCode User's guide you actually are reading. The second one is really interesting: Picture Upload leads you to a specific window called nUploads (we do like "n"-stuff here ).

The nUploads module gives you the option to send images from your hard drive to Newbies Paradise. Here is what a nUploads window looks like:




You will notice there are two ways to send images to Newbies Paradise:

• Either you send an image from your hard drive (first field).
• Or you can provide the url to an image from the internet. It will be duplicated on Newbies Paradise's server, which will ensure it will not become a dead link later.

Underneath is the list of all your previously uploaded images displayed in thumbnails. For every image, you have the option to:

• Display the image in its full size, clicking the thumbnail.
• Generate the nCode to display the image in the nForm.
• Generate the nCode to display the thumbnail in the nForm with a link to the image in its full size (handy if you have a really big image).
• Rename the image (can also be used to move the image to a different folder).
• Copy the image.
• Resize the image. If your image is too large, you can resize it. A real-time preview will give you an idea of the final image's size.
• Delete the image.

I bet you will mainly be interested by the insertion, and resizing buttons.
Feel free to use image resizing to reduce an image dimensions if it is too big to fit in Newbies Paradise, but also to reduce its weight. As a matter of fact, you cannot send as many pictures as you want: there is an upload quota on each folder!

We will now review all the nCode tags.

As previously mentioned, I advise you to use buttons to automatically generate nCode tags. However, it could be handy to know tags names if you want to write them "on the fly". Some tags are not directly available through buttons anyway, you have to write them by hand.

nCode tags available through buttons

Bolding text

Code: Ncode

Italicise

Code: Ncode

Underlining text

Code: Ncode

Lining through text

Code: Ncode

Bulleted lists

Code: Ncode

It is also an option to make ordered lists adding an attribute to the "list" tag.
Here is an ordered list "1, 2, 3...":

Code: Ncode

Here, we specified the type="1" attribute, but you must know you have the option to use various values:

• 1: 1, 2, 3...
• I: I, II, III...
• i: i, ii, iii...
• A: A, B, C...
• a: a, b, c...

Quotations

Code: Ncode
Code: Ncode
This attribute is now set to default when it is chosen to quote a message with the dedicated button .

Images

Code: Ncode
The legend attribute sets a descriptive text to an image.

Links

There are three different ways to set a link:

Code: Ncode

E-mails

Two options to type an email address:

Code: Ncode

Spoilers

Code: Ncode

The "spoiler" tag is used to send informations which should not be automatically seen while reading the message. To display the hidden message, the user has to click the "Spoiler" area.
This is a useful tag to hide the Practical work's answer (to not show the answer right away), or to send spoilers about a TV show. For instance:


Spoiler (click to show)

As you can see, application range is wide enough!

Information

Code: Ncode

Warning

Code: Ncode

Error

Code: Ncode

Question

Code: Ncode

nCode tags available through select lists

Code

Code: Ncode
Note: There is no space character between / and "code", this error has been made on purpose or I would not be able to display the tag (the reason is simple enough, if you think about it, you will understand ).

The "code" tag inserts a source code in your message or tutorial.
This tag has the option to not have any attribute (as in the example above). In this case, code will simply not be coloured according to its syntax.

If you set an attribute to the "code" tag (just select a language in the select list), then your source code will be coloured according to the syntax of the language you have chosen.

nCode feature syntax colouring for over fourty languages! To mention some, xHTML, CSS, PHP, Javascript, XML, SQL, ASP, C, C++, C#, Java, Python, Pascal, Delphi, VB, Darkbasic, Ocaml, Lisp (and many more). It even is possible to colour the nCode language if you wish to display some of it in a message.

Here is for the example's sake, how a piece of PHP code would be coloured:

Code: Ncode

Positionning

Code: Ncode

The position tag may have the following values:

• justified
• left
• center
• right

Floating

Code: Ncode

This tag may have the following values:

• left
• right

CSS features floating items management on a webpage. Everything within the "float" tag will be aligned left or right (according to your specification). Any text after the floating item will "surround" it. This allows to create nice presentations pretty easily.
Here is an example of a floating image, see how text surrounds it:

Size

Code: Ncode
The "size" tag may have the following values:

• vvsmall: Very very small.
• vsmall: Very small
• small: Small
• big: Big
• vbig: Very big
• vvbig: Very very big

Color

Code: Ncode
This tag may have... lots of values. I will not list the colours here, I suddenly have an extreme fever!

Font

Code: Ncode
This tag may have the following values:

• arial
• times
• courrier
• impact
• geneva
• optima

Semantic

Code: Ncode
Use the "title1" and "title2" sementic tags to clearly structure your messages and tutorials.

nCode tags to be written "by hand"

Acronyms

Code: Ncode
The "acronym" tag sets definition to acronyms (like N.A.S.A., F.B.I., C.I.A. etc.)
You just need to touch the acronym with the mouse to display its definition.

Tables

Code: Ncode

Result:

Title	Title
Blabla	Blibli
Blablou	Blobla

You may also set the rowspan and colspan attributes to merge rows or columns. You just have to set how many rows or columns you want to merge. For instance:

Code: Ncode

Result:

25	abcd
36

Finally, you may give a name to the table using the "caption" tag:

Code: Ncode

Result:

Economic evolution

25	abcd
36	efgh

Wikipedia

Code: Ncode
Will be displayed as:
Def. bbCode

This tag will lead you directly to the related article on Wikipedia.

Subscript & superscript

Code: Ncode
Will display:
2₅

Code: Ncode
Will display:
5⁹

These tags are mainly used for maths formulas, their xHTML equivalents are <sub> and <sup>.