LoginOr login with:
Markup Commands
Introduction
You can format almost anything you submit (e.g. components, references, forum posts and emails) using the inbuilt markup language. The primary role of the markup is to allow you to identify elements within your document that require special processing, for example bold or italic text, headings, equations, figures, graphs.
All markup commands proceed with a backslash ('\'), so when ever you use a '\' you should expect to follow it with a command that will signify how to process the next section of text. However if you really do want a backslash to be displayed, then simply use two backslash together, i.e. '\\'.
It is important to realise early on that all this markup is converted into HTML (the language of the web). Therefore if you know HTML, then you can use it also, remembering that HTML tags are always incased in triangular brackets ('< >'). Therefore if you need to write less-than, '<', you must write this as '\<'. To avoid doubt the submission system will show a purple mark, , at the start of any HTML tags - these purple marks are not shown in the final page.
Key to these Command Instructions
- square brackets indicate a place holder for text. [text] signifies a single word of any length, while [text...] signifies multiple words. A word is any collection of characters terminated by a space or the end of the line.
- curly brackets are used by the system to group multiple words together, e.g. {the cat sat on the mat}. You must include the curly brackets within your document.
Formatting Commands
In the following table a list of formatting commands are shown. These commands merely encase the proceeding text in the required HTML (the language of the web), which we have also shown, where appropriate, for your interest. You can use either.
By default the formatting command will only apply to the next word, prior to a space or a new line. However if you need to format multiple words or lines, then place curly brackets, '{' '}' around the words.
Our system is loosely based on LaTeX markup and will in time evolve to include most relevant LaTeX features. As part of this evolution, we're moving to more commands being of the form \fn{....}.
| Command | Usage, Description and Examples |
|---|---|
| \? | A character literal. If the letter after the backslash is a non alpha-numerical character and also not another command (such as \^), then it will be converted directly into its HTML equivalent.
Example: \# \@ \< \\
gives:
# @ < \ |
| \a word
\a{words...} |
Displays the argument, {word}, in an italic blue font. This should be used to emphasise arguments of function.
Example: This function only works when \a x \< 10
gives:
This function only works when x < 10 |
| \e word
\e{words...} |
Emphasises the argument, {word}, as in italic font. This should be used to emphasise variable within the text.
Example: To calculation \e y, add 5 to \e y.
gives:
To calculation y, add 5 to >em>y. |
| \b word
\b{words...} |
Displays the argument in bold font.
Example: The \b quick brown fox jumps
gives:
over \b {the lazy dog.} The quick brown fox jumps over the lazy dog. |
| \c word | Displays the argument in typewriter font, often used to refer to code. |
| \e word | Displays the arguments in italics. This is used to emphasise words. |
a\_word a\_{words...} |
Displays the text b as a subscript of a, i.e. ab
You can also group multiple words together using the curly brackets. Example: a\_{b and c}
gives:
ab and c |
a\^word a\^{words...} |
Displays the text b as a superscript of a, i.e. ab |
| Displays the code in a formatted block using a typewriter font. Formatting using spaces and new lines is recognised in these sections. | |
\u word \u{words...} |
Displays the argument with underlining. This command should be used rarely, since an underline is often used to signify a link. |
| \url [web address] \url [web address] "link text..." |
This tag creates a simple hyperlink (in orange) to the web address you provide. Handy for creating direct links to web references.
Example: \url http://www.codecogs.com
\url http://www.codecogs.com "CodeCogs" produces: |
| \ref [module name] \ref [category/module name] "description..." \ref # |
(Beta - still in development) Produces a hyperlink reference to another module using the module name or its unique ID. If the description is specified (in quotes), then this will be used as the link instead. If you know the component ID, then you can just enter the numeric code, which will guarantee a link to that page. To link to a reference page, append the word reference: to the front. As above you can also use a numeric ID for the reference page. Example: \ref reference:10 |
| \copydoc [module name] [function name] | (Beta - still in development) Replaces \copydoc with the documentation given for {module}. This command will eventually be able to copy any part of any other documentation page. This is a dynamic copy, so when the source is updated, your page will also update. If {function} is left blank, then \copydoc will used the first detailed description it finds within a module. Example: \copydoc bessel/i/i \copydoc cheb_eval chebEval |
| \plot{ type, [data sets], options...} | (Beta - still in development) Produces a graph of the form specified by type, using the supplied data with the given formatting options. type : is can currently only be xy.Example:
\plot{xy, [[x=1:10:40, sin(x), cos(x), tan(x), 1+x],[[1,1.5],[3.3,4],[4,2]],[2,4,5,6,7,8]], labels=['sin', 'cos', 'tan', 'pow', 'xy', 'y only'], styles=[line, line, dot, line], width=550, height=330, caption="Figure 1 - This is fun"} |
| \image [filename .gif | .jpg | .png] "image caption..." .width=# .height=# .left .right |
Inserts an graphic or image on a new blank line within the documentation.
In the following example two images are inserted into the text, with the second image containing a caption: Example 1: \image box.jpg
\image rectangle.gif "A rectangle" Example 2: In these examples the sizes of the image are controlled, using the .width and .height options: \image box.jpg .width=100 Example 3: In these examples the position of the images is changed using the .left and .right options: \image box.jpg .width=100 |
| \graph [parameter ranges...] .height=# .width=# .size=small|medium|large .square .yrange=#:# .style=line .title="[some text to end of line]" .input | Create a dynamic graph of C++ functions (those visible as Calculators), using the specified parameters (which are defined by your function) and the graph options which all start with a dot (.) and are optional. There usage is as follows:
Example: If your page has defined some function, e.g. fn(int x, double a, double b) then you can create a graph which utilises this function using: \graph x=0.2:10 y=0.1:0.5:5 .size=medium
Gives:  |
| \download [filename] "[Download text]" | Inserts a button onto the page, with the name give in the 'Download text', which triggers the downloading of the file specified in 'filename'. If you omit the 'Download text', then the button text will be 'Download filename'.
Example: \download test.cpp "Get this"
gives: |
Block Formatting Commands
These markup commands all come in pairs. The first starts a block and the second signifies the end of a block. Most critically our markup rules are not applied to any text found between these two markup commands, therefore ensuring that there are no syntactical alterations to either programming code or LaTeX equations prior to them being rendered for display.
| Command | Usage, Description and Examples |
|---|---|
| \begin{code}
...C/C++ code... \end{code} |
This tag create a special section with the content colour highlighted on the understand that it is C or C++ source code. However you can used this command generally to show any text that you want display as is, without other processing. In other words, any markup tags found between '\code' and '\endcode' will be completely ignored.
Example: \begin{code}
gives:
int fn(int a) { return a+1; } \end{code} int fn(int a) { return a+1; } |
| \begin{center}
... \end{center} |
Centers the block of text.
Example: \begin{center}
gives:
This is in the center \end{center} This is in the center
|
| \begin{right}
... \end{right} |
Places the text in the right hand column of the page. This should be used to emphasis important facts or points.
Example: \begin{right}
Key points: - The Earth is round - Pluto is the last planet \end{right} Note: |
| \begin{yellow}
... \end{yellow} |
Places the text in a yellow block.
Example: \begin{yellow}
This is a yellow block \end{yellow} gives: This is a yellow block |
| \begin{quote}
... \end{quote} |
Places the text in a gray block.
Example: \begin{quote}
This is a quotation \end{quote} This is a quotation |
| $...LaTeX...$ |
Create an inline graphical representation of the equation you specify using LaTeX notation
Example: The parameter $a= \frac{14-Month}{12}$ is used to express...
gives:
The parameter |
\[ ...LaTeX...\]#1
\( ...LaTeX...\)
|
Creates an equation block that appear indented on the page on a new line. The use of square brackets, creates an equation with a unique equation number on the right side, whereas round brackets create the equation without the number.
To reference these equations with the number you must first enter a unique identifier against the equation using the '#1' notation, then in your subsequent text you use the same unique identifier to refer to the equation Example 1 - numbered equation:
\[ d = \left( Day + y + \frac{y}{4} - \frac{y}{100} +
produces:
\frac{y}{400} + \frac{31m}{12} \right ) mod 7 + 1 \] (8)
Example 2: \( \frac{sin(x)}{x} \)
gives:
Example 3 - equation referencing:
\[1+x^2\]#2
gives:
\[2-x\]#4 The addition of (#2) and (#4) is |
Wring LaTeX Equations
LaTeX is a complete markup language that is used to write most technical publications. The next table shows some simple examples of the more commonly used LaTeX commands. We suggest using the CodeCogs Equation editor to write new equations. For further information on LaTeX formulas see Wikipedia.
| LaTeX Command | Output | Comments |
|---|---|---|
| a\ b | a b | Backslash followed by a space, can be used to add additional space between items. |
| a^b | ||
| a^{b+c} | Use the 'curly' brackets to group text | |
| a_b | ||
| a_{b+c} | ||
| \frac{a}{b} | ||
| \frac{\dfrac{a}{b}}{c} | ||
| \sum_a^b c | ||
| \int_a^b x dx | ||
| \oint a | ||
| \left [ a^2 \right ] + [b^2] | The brackets on the left are scaled to encapsulate the inner text. The bracket on the right is not scaled. | |
| ( \frac{a}{b} ) | Regular (non scaled brackets) | |
| \left ( \frac{a}{b} \right ) | These brackets are scaled to encapsulate the inner text. | |
| \begin{array}{c} a \\ nice \\ day \end{array} | To create a stacked array of items. Follow \begin{array} with {c} for centered text, {l} left alignment, {r} right alignment | |
| \alpha, \beta, \gamma ... | All Greek characters can be used, but typing the full name of the character after the '\'. | |
| \text{the quick brown} fox jumps | To add words to your equation, use the \text command to solve the formatting. |
Section Commands
Section commands allow you to specify how different paragraphs should be treated and into what sections they fall. For example, if you submit a page with several authors lists, then the authors will all be grouped together within a common section and shown near the bottom of component page.
To aid the CodeCogs submission system, and to allow it to automatically format your documentation in the best possible way you should used these section commands whenever possible.
| Command | Usage, Description and Examples |
|---|---|
| \section{title...}
\subsection{title...} \subsubsection{title...} |
This command starts a new section under the given [section title] heading. If you don't provide a section title, then this command forces a paragraph and section break. Note: That a completely blank line causes a paragraph break; and two completely blank lines causes a section break. For example Example: \section{My House}
gives:
The quick brown fox lived My HouseThe quick brown fox lived |
\title word \title{words...} Example: \title{The Kennel}
gives:
Is where I put the dog The KennelIs where I put the dog |
Produces a title, presented in larger text on a blank line. Similar to \subsection, but will not appear in the index |
| \param [parameter] [description...] | Creates a parameter description. All consecutive parameters specified with this tag are formatted within a table under the single heading 'Parameters:'. The first column of this table contains the parameter(s), which are also emphasised using the HTML <em> tag. The second column contains the description(s). For example: \param a The length of the first side.
\param b The length of the second side. We requires that you specify all the input parameters used by any function in the detailed description immediately prior to the function definition. |
| \note [description...] |
Inserts a note given in 'description' into the documentation, under the heading 'Note:'. We requires that you list any known restrictions or peculiar features that might cause an error or irregular result. For example: "This function can extract an illegal date, e.g. dateYMD("31 February 2004",y,m,d)" |
| \todo [description...] | Use this to list any work or new features that you either have planned to do, or would like to do. These comments do not appear within the main documentation, but will (one day) be available to other developers. |
| \examples{} | This tag inserts an area containing the CodeCogs Worked Example System into the page at the location of this tag. Have created this tag you do noting more in edit mode. The addition of all the worked examples must be done once you are in Preview mode for the page you are editing.
After entering some worked examples, when you return to look at the source code of this page, the \examples{} command will be changed to include a number between the brackets, i.e. \example{123}. If you copy this tag to another page, then the examples you provide on one page can be made available else where also. |
| \Example ...
|
This tag creates a dedicated example section within the code. It is visually equivalent to \par Example, except that \Example is also recognised by Documentation Wizard and CodeCogs systems for checking code integrity.
We recommend that your example is as complete as possible, ideally contain the C main() { } and any necessary #include, so the example can be quickly copied and compiled by users. CodeCogs also use these examples to check your code compiles across a range of platforms. So its important this example is reflective of how it will traditionally be used. It is also often nice to follow an example with details of the output from the example. We typically do this in the following way: \Example [Introduction to example...] \begin{code} [source code...] \end{code} \b Output: \begin{code} [output code...] \end{code} |
| \reference [a reference...] |
This section is to list any references you've used to create your work.
We recommend using this tag to list any references used. We strong recommend giving credit to others were due. Reference provide further reading for user and also add creditability to your submitted work. |
| \author [author...] | This tag creates a bolded title called 'Author', below which is placed the list of author's.
We use this tag to give credit to the author. We also place the date after the authors name, as a simple, visual display of who and when the component was written. We don't insist you use this tag if you want to remain anonymous. |
Visibility Commands
These markup commands allow sections of text to be hidden and only shown to users when they request the additional information - and have permissions. It is a very convenient way of hiding complicated detail and reduce the apparent complexity of your main page.
The markup commands also come in pairs. The first starts a block and the second signifies the end of a block. However, unlike the block commands above, you can include any markup you like within the enclosed text.
| Command | Usage, Description and Examples |
|---|---|
| \begin{hidden}{title...} ... \end{hidden}
|
These tag can be used to hide parts of the documentation that you want to hide (by default) from the average user. For example:
\begin{hidden}{Advanced Options}
Produces:
This text is hidden by default \end{hidden} Advance Options 
This text is hidden by default
|
| \begin{public}{title...} ... \end{public}
|
Creates an area that is only visible to registered users of CodeCogs who are logged in.
\begin{public}{Newton's Second Law} After many hours of dropping apples from trees, Newton came up with this conclusion: \[ F=m\,a \] \end{public} |
| \begin{protected}{title...} ... \end{protected} |
Create an area that is only visible to associated members of CodeCogs who are logged in.
\begin{protected}{Einstein's Energy Equation} After many hours trawling through the mathematics of quantum mechanics, Einstein concluded: \[ E = m\,c^2 \] \end{protected} |
| \begin{private}{title...} ... \end{private}
|
Creates an area that is only visible to users who own a commercial licence for the component. One use for this section is when you want to provide a downloadable executable application, but only want it to be available when the code is commercially licensed.
\begin{private}{My theory on life} Most things are only complicated because you don't understand them - science is very often elegantly simple. \end{private} |