Using Markdown Formatting in Coggle

Coggle supports Markdown for formatting in text. Markdown is a simple way of formatting text – to add titles, links, and other things – using the text itself. The simplest example of this is using **asterisks** to make text bold. You can use Markdown like that anywhere in a Coggle diagram.

Differences between Coggle and Standard Markdown

If you're a Markdown pro, here are the differences in Coggle's Markdown you should be aware of (or skip down the page for the full reference!)

Checkable Check-Boxes

Really useful for tracking tasks, checkboxes follow the Markdown principle of looking good in plain-text:

- [X] Here's a list with checkboxes
- [ ] This one's unchecked
- [X] And this one's checked
	

But the best part is that instead of having to edit the text to check or uncheck a box, you can just click it:

checkboxes

Strike-Through

Strike-through is really useful when you want to show that something is wrong, or has been changed, any text that is surrounded by two tilde characters (~~):

    The world is ~~round~~ an oblate spheroid.
	

strikethrough

Smarter List Numbering

This isn’t normally considered part of Github Flavoured Markdown, but updating our parser has enabled us to make the way lists are numbered much smarter. Markdown will automatically number lists for you (so you don’t have any of those embarrassing lists with two items labelled 3.), but now instead of always starting from 1., the numbers will start from the first number that you use in a list. A single-numbered list like this:

   3. The third thing is neat.
	

Will now correctly appear like this:

Smarter list numbering

Not Strictly New

There are several differences that we’ve always had in our Markdown that were part of Github Flavoured Markdown – these still apply, so they’re worth repeating here.

Newlines are Line-Breaks

Whenever you press ctrl+enter (or use one of the other ways) to insert a new line into a branch of a coggle you’ll always get a line break in the text that’s displayed.

No Inline HTML

HTML code is not a natural or easy way to enter and format text, and can have a very overbearing structure. For these reasons we’ve disabled the inclusion of raw HTML in Coggle Markdown. If there’s a strong demand for some HTML features that there’s no markdown equivalent for (such as tables), then we may consider allowing inline HTML.

Other Things

There’s one other difference between Coggle Markdown and Guthub Flavoured or Standard Markdown, and that’s that we’ve added an extension to allow images to be resized.

Specify Image Size

We’ve added an extension to the image syntax that lets you specify the size of an image. Add a size in the format wxh after the url to an image. For example: ![Coggle logo](http://coggle.it/images/coggle.png 180x86).

Full Reference

Here’s absolutely everything that you can do with Coggle Markdown:

Span Elements

Links

There are three styles of link: inline, automatic, and reference. URLs for all types of links can be http://, https://, ftp:// and file:// urls, but beware that most browsers prevent clicks on URLs to local files. To follow links you need to use [ctrl] + click, ([cmd] + click on Macs), or right-click, as left clicking will allow you to edit the text.

Inline links specify the text to link, the url to link to, and an optional title (normally displayed in a tooltip when you hover the link):

This is [an inline](http://example.com "With this title.") link.
This [link](http://example.com) has no title.
	

If you want to turn a bare URL into a link, wrap it in < > to create an automatic link:

A link to <http://example.com>
	

Reference style links allow you to gather links together outside the text (useful if you want to include a few links in a short paragraph, and still be able to easily read what you’ve written). Like inline links, the text to be linked is written inside square brackets, [ ], but instead of being followed directly by a URL, they are followed by an ID:

Here's a [reference style][my-id] link.

[my-id]: http://example.com "Optional title for link"
	

At the end of the paragraph (after a blank line), the reference-style links can be defined in a list. The optional title for the link (displayed as a tooltip when you hover the linked text) can be included in quotes or normal parentheses:

Here's a paragraph with a [link here][1], and a
link [here][link2].

[1]: http://example.com "Optional title for link 1"
[link2]: http://example.com (Optional title for link 2)
	

Note that the IDs for links can contain anything you like, but they are not case sensitive. So these two links refer to the same definition:

[linked text][a]
[linked text][A]
	

You can also leave out the ID entirely, in which case the linked text is used as the ID when defining the link:

Here's a link to [Coggle][]

[Coggle]: https://coggle.it;
	

Emphasis

There are two forms of Emphasis, <em>, and <strong>: in practise these translate into bold and italic:

Here's some **text that will be bold**.
And some *text that will be italic*.
	

You can put emphasis in the middle of a word, but if you leave space around the * characters, then they will be ignored:

Markdown is incredi**awesome**tacular.
	

Strikeout

Anything that is surrounded by two pairs of tilde characters (~~) will be displayed with a line through it, as if crossed out:

The world is ~~round~~ an oblate spheroid.
	

Code

Sometimes you want to write text in a fixed-width font (perhaps it’s ascii art, or source code). The code syntax lets you do this: use `back-ticks` around the text:

`This will be in a fixed-width font`
	

As code spans are technically span-level elements any newlines within them are ignored. You can add multiple lines of code using the Code Block syntax (see below).

If you want to include literal back-ticks inside the code span, then you can start and end the code span with a pair of back-ticks:

``Here's a literal `, neat, huh?``
	

Images

The syntax for images is very similar to that for links, but prefixed by an exclamation point:

![Alt text](http://path/to/img.jpg)
![Alt text](http://path/to/img.jpg "Optional title")
![Alt text](http://path/to/img.jpg "optional title" 100x200)
	

Where 100x200 in the above example specifies the size of the image in pixels. You can also use the reference-style syntax:

![Alt text][id]

[id]: http://path/to/image  "Optional title attribute"
	

Don’t forget that you can drag & drop images too, though!

Block Elements

Headers

Headers allow you to change the text size in a Coggle, there are two different ways of specifying headers, the preferred way is to start the line with a number of # characters:

# This is the biggest header
## Second Biggest (Level 2)
### Third
#### Fourth
##### Fifth, getting pretty small
###### Sixth and tinyest!
	

You can also, as in Gruber Markdown, underscore with === or --- to specify level one and level two headers:

This is an H1
=============

This is an H2
-------------
	

BlockQuotes

Markdown uses email-style > characters for quoting paragraphs, and quotes can be nested:

normal paragraph
> First level of quoting
> > Nested quote
>
> Back to the first level
	

Other syntax within the quoted text is interpreted as normal.

Lists

There are two styles of lists: ordered, and un-ordered. Unordered lists use *, + or - (interchangeably) to mark list items:

* List
* Of
* Lots
- Of
+ Things
	

Ordered lists use numbers followed by periods. You don’t have to get the numbers right: Markdown will correctly number things starting at the first number you use.

1. First
2. Second
3. Third
	

You can use multiple lines within a list item:

1. This is a single list item
   consisting of multiple lines

1. Another item in the same list
   (will be numbered 2.)
	

Task Lists

Task lists are like regular unordered lists, but each item starts with a checkbox. [ ] for an empty checkbox, and [x] for a checkbox with a check in it. You can check and uncheck checkboxes by clicking on them, without editing the raw text (the text will be automatically updated when you click).

- [ ] The first item in a task list
- [ ] normal **formatting** is possible
      and list items can span multiple lines
- [ ] incomplete
- [x] complete
- [X] also complete
	

Code Blocks

Blocks of pre-formatted text, in a fixed-width font are often useful when writing about programming, or doing ascii drawings of penguins. To put text in a code block, put it in triple backtick-quotes:

```
(o_
//\
V_/_
```
	

Horizontal Rules

You can produce a horizontal line (sometimes useful to separate two paragraphs of text) by placing three or more -, * or _ characters on a line by themselves. All of these will work:

* * *
***
*****
- - -
	

Other Things

Automatic HTML Escaping

Markdown takes care of escaping any special characters that you enter, like &, or < and > will also automatically encode these characters when use them in URLs.

Backslash Escapes

You can use backslash escapes to include characters that would otherwise be interpreted as special syntax, for example:

\*literal asterisks\*
	

The following characters can be escaped:

\   backslash
`   backtick
*   asterisk
[]  square brackets
()  parentheses
#   hash mark
+   plus sign
-   minus sign (hyphen)
.   dot
!   exclamation mark
_   underscore
{}  curly brackets