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