Markdown is awesome. Clean and easy to read both in its native form, and when transformed. This page provides example snippets that and shows you the results for the Portico site.

Typography and Text

You can get Italic Text by using _Text Here_ or *Text Here*.

You can get some Bold Text by using __Text Here__ or **Text Here**.

Also, let’s start with a larger block of text. This lets Tim test things like font spacing and line height, while also showing you that the carriage return in the source text has no impact on the HTML text in terms of line breaks or the like. When writing your Markdown doc, please try and keep lines under 100 columns so that they’re considerably simpler to read in a text editor. A lot of people try to keep them under 70 columns, but that’s really just too short.

Remember, people read web content differnetly, tending to skim. Make the structure of your document visible, and in prose be direct, concise and clear without sacrificing completeness. This is extremely difficult. When attempting it individuals will often produce brief documentation that contains unnecessary information and is ultimately incomplete. Use short paragraphs and write in a conversational tone - this isn’t a text book. If you can imagine yourself saying it - you are probably on the right track.

Alerts and Callouts

Below are some alert box styles you can use to call attention to various important things in your document. Unfortunately these are only available as embedded HTML as there is no easy Markdown conversion:

Info Alert

<div class="alert info">
  <p>This is an Info alert - use it to alert people to alertful things.</p>
</div>

This is an Info alert - use it to alert people to alertful things.

Success Alert

<div class="alert success">
  <p>This is a Success alert - use it to affirm successful things.</p>
</div>

This is a Success alert - use it to affirm successful things.

Warning Alert

<div class="alert warning">
  <p>This is a Warning alert - use it to warn people about scary things.</p>
</div>

This is a Warning alert - use it to warn people about scary things.

Error Alert

<div class="alert error">
  <p>This is an Error alert - use it to alert people to red things.</p>
</div>

This is an Error alert - use it to alert people to red things.

Quotes

Quotes are blocks prefixed with ` >`. For example:

 > Are you quite sure that all those bells and whistles, all those wonderful facilities of
 > your so called powerful programming languages, belong to the solution set rather than the
 > problem set?
 > 
 >  -- Edsger W. Dijkstra

Are you quite sure that all those bells and whistles, all those wonderful facilities of your so called powerful programming languages, belong to the solution set rather than the problem set?

– Edsger W. Dijkstra

Code Highlighting

Inline Code

The Markdown conversion supports inline code through the use of backticks ```, allowing you to create sections like this.

If we want to get a bit more specific with the background colour of the highlight we have to drop back to html again. For example: methodWithBlueBackground() is generated from this:

<span class="label label-info">methodWithBlueBackground()</span>

Other options available include:

label-default, label-primary, label-success, label-info, label-warning, label-danger.

Fenced Code Blocks

Fenced code blocks are also supported. They start with three backticks and should be followed by the name of the language you wish to use. For example:

```java
public static void main( String[] args )
{
	System.out.println( "Do you like Portico?" );
	for( int i = 0; i < 10; i++ )
	{
		String temp = "Yes I do!";
		System.out.println( temp );
	}
}

public static void main( String[] args )
{
  System.out.println( "Do you like Portico?" );
  for( int i = 0; i < 10; i++ )
  {
    String temp = "Yes I do!";
    System.out.println( temp );
  }
}

External Code Files

Finally, you can point the highlighter at an external file, which it will parse and bring in for highlighting:

<!-- Bring in some code from an external file -->
<pre data-src="Main.java" class="language-java"></pre>

Tables

Tables? You want tables? OK. They’re really easy.

| Left-Aligned     |   Center Aligned    |    Right Aligned |
| :--------------- |:-------------------:| ----------------:|
| col 3 is         | **some wordy text** |       **$1600**  |
| col 2 is         | centered            |             $12  |
| zebra stripes    | are neat            |              $1  |

Left-Aligned	Center Aligned	Right Aligned
col 3 is	some wordy text	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

Images

Images are also straightforward, except that you have little control over things like the size :(

![This is the alt text for the image](../../assets/images/logos/macosx-yosemite-450x250.png)![This is the alt text for the image](../../assets/images/logos/macosx-yosemite-450x250.png)

This is the alt text for the image

That’s all for now!

Getting Started with Portico