How to improve the layout/presentation of your posts

Posted 14/07/2009 - 11:24 by ng

Have you ever wondered...

  • How
  • to
  • do...

... things like this?


Here on the site we use a system called Markdown to format text (headings, bold and italics, bullet points, etc.) "Markdown is a lightweight markup language, originally created by John Gruber and Aaron Swartz to help maximum readability and "publishability" of both its input and output forms" (Wikipedia).

Here is an overview of how to use Markdown to format your messages.

Headings

To mark a heading prefix the heading with one or more # characters - one for the biggest heading, five for the smallest heading. So this:

### This is a medium heading

... becomes...

This is a medium heading

Similarly:

# Very big heading

That's an H1 in HTML terms.

## Big heading

That's an H2 in HTML terms.

#### Small heading

That's an H4 in HTML terms.

##### Very small heading

That's an H5 in HTML terms.

Emphasis: bold and italics

Surround the word or phrase with * for example *this is italics* and **this is bold**. Finally ***this is both***. You can mix, for example, emphasis and headings:

##### Very **small** *heading*

Bullet points

Mark bullet points with a single * as the first character on the line, like this:

* Point 1
* Point 2
* Point 3

... and it will be displayed like this:

  • Point 1
  • Point 2
  • Point 3
  • You can use *emphasis* here too

Links

Links are more readable if shown as text rather than the actual url of the link. The format is:
[text to display](url) for example: [click here to go to Google](http://www.google.com) would be displayed as: click here to go to Google.

Horizontal lines

Type a line of ------ and it will be displayed as:


More information

For more information, including some alternative methods of marking text which you may prefer, see the Wikipedia article.

4.75
Your rating: None Average: 4.8 (4 votes)
Showing data as tables in

Showing data as tables in your posts

To show a table you enter text for each column separated by vertical bars. First line contains column headers; second line contains a mandatory separator line between the headers and the content; each following line is a row in the table. Columns are always separated by the pipe (|) character.

Heading 1   | Heading 2   | Heading 3
-------- | -------- | --------
Row 1 Col 1 | Row 1 Col 2 | Row 1 Col 3
Row 2 Col 1 | Row 2 Col 2 | Row 2 Col 3
Row 3 Col 1 | Row 3 Col 2 | Row 3 Col 3

Note that due to proportional fonts, columns won't line-up properly when you are typing them, but the end result looks like this:

Heading 1 Heading 2 Heading 3
Row 1 Col 1 Row 1 Col 2 Row 1 Col 3
Row 2 Col 1 Row 2 Col 2 Row 2 Col 3
Row 3 Col 1 Row 3 Col 2 Row 3 Col 3

A further possibility here is a WYSIWYG editor to provide a similar interface to typical word processing programs, with buttons for bold, italic and so on. It's on my to-do list!

Posted by ng on Mon, 16/06/2014 - 17:22