Help:Syntax

From ChemPRIME

Jump to: navigation, search

The purpose of this page is to help new users to become familiar with the syntax involved in editing on the wiki, and to be a reference for quick editing questions.

Contents


Syntax: Introduction

Coding properly is vital to creating ChemPRIME that looks good and will help students learn. To edit a page, log in and click the edit tab at the top. A new screen will display the wikitext coding behind what you see. A toolbar above the editable field lists several useful functions you can click on to automatically add coding to the page. If you prefer to use a WYSIWYG editor, click the Rich editor link above the toolbar.

The most important syntax in ChemPRIME is the link, which allows a viewer to click on text and be directed to another page on ChemPRIME. For links within the ChemPRIME wiki, the page to be directed to is encased in double square brackets and then appears as blue text. For example, a link to Help:Contents (the Help file listed in the navigation menu) is coded this way:

[[Help:Contents]]

This gives Help:Contents.

Pages that have different purposes in the wiki have different namespaces preceding the title, and the namespace is included in the link. (For Help:Contents, the namespace is "Help:", indicating that it is a help page.) Base pages listing tracks of exemplars have no namespace and are linked to this way:

[[Atoms, Molecules, and Chemical Reactions]]

This gives Atoms, Molecules, and Chemical Reactions.

Another important facet of syntax is tabs, which enclose text and format it in a certain way. For example, the <nowiki> and </nowiki> tabs display the text between them exactly as that text appears (before the wiki formats it).

Syntax is essential to building a page, and you should review Syntax thoroughly before creating a new page. A good way to get started with complicated syntax, such as LaTeX math equations, is to copy/paste or or ask other users about it.

Rich (WYSIWYG) Editor

Wiki-markup, used to write pages on ChemPRIME, can be difficult for users more familiar with visual "What You See Is What You Get (WYSIWYG) editors in word processors like Microsoft Word. Writing ChemPRIME pages requires use of wiki codes to create links, bold and italicize text, and format pages. Wiki codes are described below, but instead of using wiki codes, ChemPRIME users may also use the FCK(WYSIWYG) editor.

To do so, when editing a page, click on the Rich editor link above the editing box, and the wiki-markup code will be turned into WYSIWYG text, appearing more like a familiar word processor page. To return to the wiki-code editor, click Disable rich editor. You can also click on Open Rich editor in new window to open the same view on a new page. After composing your ChemPRIME page, click Ok to return to the wiki-code editor. The Rich editor is a good option for users ready to write, but without a lot of experience using the wiki-markup editor.

If you use the Rich editor, you will soon find that text is copied without formatting. Therefore it is best to use the wiki-code editor (non-WYSIWYG) to copy example code to the page you are working on. Once the code, with all of its links and formatting, has been transferred, you can turn the Rich editor on again and edit more like a word processor.

Buttons in the Wiki Editor

For those wishing to transition into using wiki coding, the buttons below the Rich editor links will insert the wiki codes for certain kinds of formatting. For instance, clicking on the bold button (letter B) will add the wiki codes needed for bold text. This is a good option for users wishing to use the wiki-code editor, but who have yet to learn all the syntax. The function performed by each button can be discovered by mousing over the button.

Creating Links

Creating links is one of the easiest and most important ways to improve a wiki page. The syntax for a link depends on whether the page linked to is within the ChemPRIME wiki.

Linking to Pages Within ChemPRIME

Links to pages within the wiki may be added in two different ways; both are illustrated in the table below. The first method uses the name (title) of the page linked to as the link; all that is needed is a pair of square brackets around the name of the page. If you wish to use text other than the title of the page as the link, then use the vertical bar symbol, |, to separate the text to be linked from the name of the page to be linked.

Wiki Code How the Link Appears
[[Help:Contents]]
Help:Contents
Help for editors may be found [[Help:Contents|here]]
Help for editors may be found here


More Information

Additional information about internal links can be found at Wikipedia

Linking to External Pages

Links can also be made to pages on the web outside of ChemPRIME. This is done by placing the URL of the web page in a single set of square brackets (as opposed to double square brackets used for internal linking). The link appears on the page as a number. To have the link appear as text, put a space after the URL and then write the desired text. Here are examples of both types of linking to Wikipedia:

Wiki Code How the Link Appears
[http://www.wikipedia.org/]
[1]
[http://www.wikipedia.org/ wikipedia]
wikipedia

The Rich Editor has a button in the editing bar that allows you to enter a link and prompts for the information needed. To use this feature, highlight the text that you want to be the link and then click the button in the editing bar that has a blue-green sphere and a chain link.

More Information

Another resource for creating external links can be found at Wikipedia

Formatting and Style Markup

When making headings or trying to highlight aspects of text, making certain words bold, underlined, etc. is very important. There are several ways that this can be done. Bold, italic, and underscore buttons are available as mentioned above. Standard XML tags, such as <b> and <i> can be applied to bold or italicize text, respectively.

However, there is also a standard "wiki" format for highlighting text, and it is the same as how the text is encoded when entered using the Rich Editor. To italicize a word, add two apostrophes, ' ' before and after the text. To bold a word, use three.

Wiki Code How Text Appears
''Italics''
Italics
'''Bold'''
Bold
'''''Bold and Italics'''''
Bold and Italics

Other style markup, must be done with <span> and <div> tags with in-line CSS. More on the use of these tags in a wiki can be found on Wikipedia.

There are also easy ways to create headings and lists. Bracketing a heading in equals signs (=) will make it appear as a heading on the page. Each subsequent set of equals signs moves the heading down a level:

Wiki Code How Heading Appears
=Heading=

Heading

==Subheading==

Subheading

===Sub-subheading===

Sub-subheading

The syntax for creating numbered lists, bullet points and indentations is very similar. Numbered lists use the pound symbol ( # )bullet points use the asterisk ( * ), and indentations use a colon ( : )

Wiki Code How Heading Appears
#One
##One point One
##One point Two
###One point Two point One
#Two

  1. One
    1. One point One
    2. One point Two
      1. One point Two point One
  2. Two
*Point 1
*Point 2
**Sub-point 2.1
***Sub-Sub-point 2.1.1
***Sub-Sub-point 2.1.2
**Sub-point 2.2
*Point 3
  • Point 1
  • Point 2
    • Sub-point 2.1
      • Sub-Sub-point 2.1.1
      • Sub-Sub-point 2.1.2
    • Sub-point 2.2
  • Point 3
:single indent
::double indent
:::triple indent
single indent
double indent
triple indent

To add space between lines of text, the "break" markup "<br>" can be used. A horizontal rule (line) may also be used to separate text.

Wiki Code How Page Breaks Appear
 End of previous paragraph.<br> Start of next paragraph.

End of previous paragraph.
Start of next paragraph.

Text before a line.
----
Text after a line.

Text before a line.


Text after a line.

All of the formatting features just described are available in the Rich Editor, which has other formatting features as well. If you are not sure about the correct syntax to create text formatted in a particular way, it can be useful to use the Rich Editor to format text and then use the Wiki Editor to view the syntax that creates the desired formation.

Special Characters

Special characters such as α are embedded using the decimal representation, or the name, for the special character, such as

&#945;  or  &alpha;

which give

α or α.

These character representations can be found by searching for "special characters" in Google, for example here or here.

Creating Tables

ChemPRIME uses tables to present information in an organized and concise manner. As is true of any textbook we prefer to maintain similar style for tables throughout ChemPRIME. We have selected as our basic template a 500 px width table with border of 1 px, no cell spacing, and variable cell padding. The first row (column headings) has gray background and the column labels are written with bold font with variable alignment. Note that the width of the table has been set as 500 px, this is the maximum width if the table is to be displayed properly in ChemPaths. An example is shown below and this section contains the syntax commands to build this type of table and modify it when necessary.


The Base Constants for Some Bases at 25°C

Base Formula and ionization equation Kb
Amide ion NH2 + H2O \rightarrow NH3 + OH Large
Ammonia NH3 + H2O \rightleftharpoons NH4 + + OH 1.8 × 10–5
Aniline C6H5NH2 + H2O \rightleftharpoons C6H5NH3+ + OH 3.9 × 10–10
Carbonate ion CO32– + H2O \rightleftharpoons HCO3 + OH 2.1 × 10–4


Wiki Code Action
{|
Start table
{|
| Column 1
| Column 2 
| Column 3
Establish the number of columns using a bar and the name of the column, use one line for each column
{|
| Column 1
| Column 2 
| Column 3
|-
| Row A
Add rows by typing a bar and a hyphen. Start a new row by typing a bar.
{|
| Column 1
| Column 2 
| Column 3
|- 
| Row A
| Row A
| Row A
Add cells within a row by typing a bar
|}
Add rows as required and finish the table by typing


Example

Wiki Code Table
{|
| Column 1
| Column 2 
| Column 3
|- 
| Row A
| Row A
| Row A
|-
| Row B
| Row B
| Row B
|}
Column 1 Column 2 Column 3
Row A Row A Row A
Row B Row B Row B


Basic Format

The table above shows the simplest format we can have, however all the font commands used for text in ChemPrime apply for the text in tables including the use of bold and italic fonts. There are also commands that allow you to modify the aligning of the text within a cell, position the table, merge columns or rows, modify borders, and cell colors.

The Rich Editor allows you to define a table similar to the way you would in a word processor by entering the number of columns and rows. Once a table has been created, the Rich Editor allows access to many table-formatting functions by right-clicking on the table.

Cell settings and borders

The characteristics of the cell need to be defined at the opening of the table.

1) Cell padding is the space wrapping the text within a cell, the higher the number assigned for it the more blank space will surround the text.

2) Cell spacing defines the space between cells

3) The number assigned for Border establishes the thickness of the border lines for the table, a value of 0 defines a table with no borders


Table size, margin, and alignment

In ChemPrime the tables must have a maximum with of 500 px in order to appear properly on screen. The width and height of the table need to be defined at the beginning using a style command. Here, the margin and the alignment of the table should also be defined. If these parameters are not established, the wiki will build the table with default settings adjusting to the text included in the cells.

The following code defines a table with cell padding of 5, no space between cells, a border of 1, width of 300 px, height of 100 px, floating on the right, and a margin of 2. The float command allows you to embed tables within the text.


Wiki Code Table

{|cellpadding=5 cellspacing=0 border=1
style="width:300px; height:100px; float:right; margin:2em"

|'''Column 1'''
|'''Column 2'''
|'''Column 3'''
|-
| Row A
| Row A
| Row A
|-
| Row B
| Row B
| Row B
|}

The following code defines a table with cell padding of 5, no space between cells, a border of 1, width of 300 px, height of 100 px, floating on the right, and a margin of 2. The float command allows you to embed tables within the text.
Column 1 Column 2 Column 3
Row A Row A Row A
Row B Row B Row B

Note: Each wiki-code command for the table must be in a single line beginning with a vertical bar with no carriage returns; the first line in red above is not properly formatted--it has a line break to fit it into the box.


Modifying the width and height of cells

The cell size can be modified by inserting

width="number of pixels" and height="number of pixels" 

separated by a bar prior the cell's text.


Example

Wiki Code Table

{|cellpadding=5 cellspacing=0 border=1
style="width:300px; height:140px; align:left; margin:2em"

|width="100" height="30" align="center"|'''Height 30'''
'''Width 100'''
| align="center"|Column 2
| align="center"|Column 3
|-
| Row A
| height="10" | '''Height 10'''
| Row A
|-
| Row B
| width="50"| '''Width 50'''
| height= "100" | '''Height 100'''
|}

Height 30

Width 100

Column 2 Column 3
Row A Height 10 Row A
Row B Width 50 Height 100

Note: Each wiki-code command for the table must be in a single line beginning with a vertical bar with no carriage returns; the first line in red above is not properly formatted--it has a line break to fit it into the box.



Text alignment within a cell

For aligning the text within the cell add the command

align="center" or align="left" or align="right"

followed by a bar prior the cell's text. If no alignment is defined, the text will automatically be aligned on the left.

Example

Wiki Code Table

{|cellpadding=5 cellspacing=0 border=1
style="width:300px; height:100px; align:left; margin:2em"

| align="center"|Column 1
| align="center"|Column 2
| align="center"|Column 3
|-
| Row A
| align="right"| '''Align right'''
| Row A
|-
| Row B
| align="left"| '''Align left'''
| align="center"| '''Align center'''
|}

Column 1 Column 2 Column 3
Row A Align right Row A
Row B Align left Align center

Note: Each wiki-code command for the table must be in a single line beginning with a vertical bar with no carriage returns; the first line in red above is not properly formatted--it has a line break to fit it into the box.



Add background color to cells

Color filling can be added to cells using the command

bgcolor="#cccccc"

when opening the cell and separating from the text adding a bar.


Example

Wiki Code Table

{|cellpadding=5 cellspacing=0 border=1
style="width:300px; height:100px; align:left; margin:2em"

| bgcolor="#cccccc" align="center"|'''#cccccc'''
| bgcolor="#cccccc" align="center"|'''#cccccc'''
| bgcolor="#96C8A2" align="center"|'''#96C8A2'''
|-
| bgcolor="#cccccc" | '''#cccccc'''
| bgcolor="#efefef" align="right" | '''#efefef'''
| bgcolor="#ffdead"| '''#ffdead'''
|}

#cccccc #cccccc #96C8A2
#cccccc #efefef #ffdead

Note: Each wiki-code command for the table must be in a single line beginning with a vertical bar with no carriage returns; the first line in red above is not properly formatted--it has a line break to fit it into the box.


For more background colors go to:

http://en.wikipedia.org/wiki/Wikipedia:Colours


Merging Rows

In order to merge rows, use the command

rowspan="number of rows to merge"

This command should be inserted in the the first cell to be merged followed by a bar before the cell's text. As a consequence of merging rows, the last cell in the next row will disappear.

Example

Wiki Code Table

{|cellpadding=5 cellspacing=0 border=1
style="width:300px; height:100px; float:align; margin:2em"

| align="center"|Column 1
| align="center"|Column 2
| align="center"|Column 3
|-
| rowspan="2" bgcolor="#cedff2" align="center"| '''Row AB'''
| Row A
| Row A
|-
| Row B
| align="left"| Row B
|}

Column 1 Column 2 Column 3
Row AB Row A Row A
Row B Row B

Note: Each wiki-code command for the table must be in a single line beginning with a vertical bar with no carriage returns; the first line in red above is not properly formatted--it has a line break to fit it into the box.


Rows can be merged using the Rich Editor. The commands are accessed by right-clicking on the table or group of cells to be merged.

Merging Columns

In order to merge columns, use the command

colspan="number of columns to merge"

This command should be inserted in the the first cell to be merged followed by a bar before the cell's text. As a consequence of merging colums, the last cell in the same row will disappear.

Example

Wiki Code Table

{|cellpadding=5 cellspacing=0 border=1
style="width:300px; height:100px; align:left; margin:2em"

| Column 1
| align="center"|Column 2
| Column 3
|-
| Row A
| colspan="2" bgcolor="#ffdead" align="right"| '''Row A Column 2,3'''
|-
| Row B
| align="left"| Row B
| align="center"| Row B
|}

Column 1 Column 2 Column 3
Row A Row A Column 2,3
Row B Row B Row B

Note: Each wiki-code command for the table must be in a single line beginning with a vertical bar with no carriage returns; the first line in red above is not properly formatted--it has a line break to fit it into the box.

Columns can be merged using the Rich Editor by selecting the columns or cells to be merged and right-clicking.


Combining Format Commands

The above format commands can be combined to modify the cell characteristics. They simply must be separated by a space and divided by a bar prior the cell's text. Only the font style commands, such as bold, italics, and underlining, are inserted with the text. Note that when the height and width for a cell are established, the same width and height will be used for the other cells in the same column and row respectively.

Wiki Code Table

{|cellpadding=15 cellspacing=0 border=1
style="width:500px; height:300px"

|bgcolor="#cccccc" width="150" height="50"|   '''Food'''
|bgcolor="#cccccc" align="center"|'''pH'''
|bgcolor="#cccccc" align="center"| '''Classification'''
|-
|   Canned cranberry juice
| align="center"|2.30 - 2.52
|rowspan="2" align="center" bgcolor="#F4BBFF"| '''High acid foods'''
|-
|   Vinegar
| align="center"|2.40 - 3.40
|-
|   Ketchup
| align="center"|3.89 - 3.92
|rowspan="2" align="center" bgcolor="#FFB6C1"| '''Acid foods'''
|-
|   Honey
| align="center"|3.70 - 4.20
|-
|   Bananas
| align="center"|4.50 - 5.20
|rowspan="2" align="center" bgcolor="#F4C2C2"| '''Medium acid foods'''
|-
|   Cottage Cheese
| align="center"|4.75 - 5.02
|}

Food pH Classification
Canned cranberry juice 2.30 - 2.52 High acid foods
Vinegar 2.40 - 3.40
Ketchup 3.89 - 3.92 Acid foods
Honey 3.70 - 4.20
Bananas 4.50 - 5.20 Medium acid foods
Cottage Cheese 4.75 - 5.02

Note: Each wiki-code command for the table must be in a single line beginning with a vertical bar with no carriage returns; the first line in red above is not properly formatted--it has a line break to fit it into the box.

Wrapping Jmol structures

It is often desirable to wrap text around Jmol structures and other images in the text. Inserted Jmol structures do not allow you to do this even when their size is smaller than the screen width. To overcome this limitation, the Jmol structure can be inserted in a wiki table with no borders and floating alignment.


Example

Wiki Code Table
{| style="border-collapse:collapse;float:left;margin:1em;"
|<chemeddl-jmol>phosphoric_acid|size=200|caption='''Phosphoric Acid'''</chemeddl-jmol>
|}
We often require to wrap Jmol structures and other images in the text. Inserted Jmol structures do not allow you to do this even when their size is smaller than the screen width.

Error this entity does not have a Standard Aggregate?!

Your search returned more than one match.

  • h3po4: formula:H3PO4 ; node name h3po4 ; alt name Phosphoric Acid ; iupac name phosphoric acid ; pubchem CID:1004 ;
  • h3po4: formula:H3PO4 ; node name h3po4 ; alt name Phosphoric Acid ; iupac name phosphoric acid ; pubchem CID:1004 ;
Click here for a list of the molecules
Phosphoric Acid

To overcome this limitation, the Jmol structure can be inserted in a wikitable with no borders and floating alignment.


Examples of tables in ChemPRIME can be found in these pages:

pH and pOH in Food Color

The Solubility Product

Buffer solutions and the production of food ingredients


For more information regarding formatting tables go to:

http://en.wikipedia.org/wiki/Table_markup

Personal tools