Formatting with Markdown
-
ruario last edited by admin
Formatting with Markdown
The following is a very basic guide on how to format your comments with Markdown (or equivalent HTML tags).
Quick summary
<table>
<tr>
<th>What you type</td>
<th>How it will display</td>
</tr>
<tr>
<td><https://forums.opera.com></td>
<td>https://forums.opera.com</td>
</tr>
<tr>
<td>[the forums](https://forums.opera.com)</td>
<td>the forums</td>
</tr>
<tr>
<td>emphasis</td>
<td><em>emphasis</em>
</td>
</tr>
<tr>
<td>strong</td>
<td>strong</td>
</tr>
<tr>
<td>monospaced <code></td>
<td>monospaced <code></td>
</tr>
<tr>
<td>- List item- List item
- List item</td>
<td>• List item
• List item
• List item</td>
</tr>
<tr>
<td>> Block of quoted text</td>
<td><blockquote>Block of quoted text</blockquote></td>
</tr>
<tr>
<td> Use four spaces at the beginning of each line to indicate
a block of preformatted text, such as code samples</td>
<td>
`Use four spaces at the beginning of each line to indicate a block of preformatted text, such as code samples.`</td>
</tr>
</table>Avoiding common problems
- Add a blank line before and after paragraphs, lists, quotes or blocks of preformatted text.
- A single Enter ↵ should be used between list items.
- To force a line break put two spaces at the end of the line or press Enter ↵ twice to start a new paragraph.
- You may have to escape characters that have special meaning to Markdown by adding a backslash. See the backslash escapes section of Daring Fireball for more information.
More details
Links
Add basic links by enclosing the URLs in angle brackets
<>:`<http://example.com/>`It will display as:
<table>
<tr>
<td>http://example.com/</td>
</tr>
</table>Note: Using angle brackets is not always necessary but it avoids problems with URLs getting corrupted by the formatting options.
You can create embedded links like this:
This is an [example link](http://example.com/)It will display as:
<table>
<tr>
<td>This is an example link</td>
</tr>
</table>HTML equivalent
Use the
<a>anchor (link) tag.
Emphasis
You can make text bold by enclosing the text in double asterisks:
The last word in this sentence is **bold**It will display as:
<table>
<tr>
<td>The last word in this sentence is bold</td>
</tr>
</table>HTML equivalent
Use the
<strong>important text tag.
Lists
You can make unordered (bulleted) lists by starting your lines with dashes, followed by a space:
- List item - List itemIt will display as:
<table>
<tr>
<td><ul><li>List item</li><li>List item</li></ul></td>
</tr>
</table>You can make an ordered (numbered) lists by starting your lines with 1., followed by a space:
1. Item 1 2. Item 2It will display as:
<table>
<tr>
<td><ol><li>Item 1</li><li>Item 2</li></ol></td>
</tr>
</table>Note: Lists should start with an extra blank line before the begining of the list and an extra blank line after the end of the list. There should be no additional blank lines between list items.
HTML equivalent
Use the
<ul>,<ol>and<li>list tags.
Quoting
You can quote another individual by starting the line with a right angle bracket
>:> I think Opera is the best browserIt will display as:
<table>
<tr>
<td><blockquote>I think Opera is the best browser</blockquote></td>
</tr>
</table>Note: Quotes should start with an extra blank line before the start of the quote and end with an extra blank line.
HTML equivalent
Use the
<blockquote>blockquote tag.
Computer code
You can provide example computer code (monospaced) by enclosing the text in grave accents (backticks):
You need to enter the command: `opera-developer`It will display as:
<table>
<tr>
<td>You need to enter the command:opera-developer</td>
</tr>
</table>If want to provide a block of code spanning multiple lines, start each new line with four spaces:
` $ echo hello world hello world`It will display as:
<table>
<tr>
<td>`$ echo hello world hello world`</td>
</tr>
</table>Note: Multiline blocks of code should start with an extra blank line before you begin indenting with spaces and an extra blank line after your code block has ended.
HTML equivalent
Use the
<code>code and<pre>preformatted text tags.
Images
You can insert images like this:
It will display as:
<table>
<tr>
<td></td>
</tr>
</table>HTML equivalent
Use the
<img>image tag.
Headings
You can insert headings by underling text with an equals symbol
=or a dash-:Major Heading ============= Sub Heading -----------It will display as:
<table>
<tr>
<td><h1>Major Heading<h2>Sub Heading</td>
</tr>
</table>Note: Headings should start with an extra blank line before they begin and an extra blank line after they end.
HTML equivalent
Use the
<h1>,<h2>,<h3>,<h4>,<h5>and<h6>heading tags.
Horizontal rules
You can insert horizontal rules with three dashes on a line of their own line:
---It will display as:
<table>
<tr>
<td><hr></td>
</tr>
</table>Note: Horizontal rules should start with an extra blank line before they begin and an extra blank line after they end.
HTML equivalent
Use the
<hr>horizontal rule tag.
Additional HTML tags
<i>Italic text<s>Incorrect (strikethrough) text<u>Underlined text<table>Table layout
The above all currently work but should generally be avoided since they have no Markdown equivalents and hence could be removed from the forum. Further tags may also work but are largely untested and unneeded. They should also be avoided.
Further reading
For even more detail, refer to the Markdown syntax guide.
P.S. This post was formatted using only Markdown and HTML options that are available to everyone on the forum.
-
davehawley last edited by
Thanks ruario, that's very useful indeed, but I do still have to ask the obvious question.
Why on earth can't we have a forum where you just type what you want into your posts, and there are buttons at the top of the text input field for doing things like inserting links or images and formatting text, just like every other forum I use on the web has?!
The average non-technical user of this forum would have little or no idea about how to do all this, and more to the point would have no idea why they should have to!
Still in mourning for Opera 12.........
-
ruario last edited by
The average non-technical user of this forum would have little or no idea about how to do all this, and more to the point would have no idea why they should have to!
More often than not they don't have to. You can almost always just get away with typing your question with no formatting.
Additionally, one of the nice things about Markdown is that many common plain conventions naturally translate. For example, most people who try to make lists, bullet them with * and it just works.
-
joshl last edited by
You can provide example computer code (monospaced) by enclosing the text in grave accents (backticks):
...If anybody doesn't know where to find that on their keyboard,
. -
ruario last edited by
If anybody doesn't know where to find that on their keyboard
That very much depends on your keyboard layout. On a Norwegian PC layout for example it is to the left of backspace but you need to press ⇧ Shift and it acts as a dead key.
-
joshl last edited by
You can insert images like this:
The words in brackets won't be displayed as a tooltip - they only be displayed if the page has failed to load the image
(this stuff is used by screen readers). To make a tooltip, use this syntax:Heed the space you'll need between the link and the tooltip element.
The tooltip element is placed within the same parentheses as the link to your image.You can tooltip "texted" links the same way:
[your visible text](your_link "the tooltip that pops up on a hover") -
ruario last edited by
The words in brackets won't be displayed as a tooltip
Yep I know. I am intentionally providing only the most basic versions of everything to keep the guide simple. Someone, who knows Markdown (or HTML) can easily add them.
-
joshl last edited by
I am intentionally providing only the most basic...
...then the nerd fills in the gaps.
Show if it's possible to do quotes within quotes - with Markdown.
(It's quite frequent a situation here on the forums, isn't it?) -
ruario last edited by
I am intentionally providing only the most basic...
Show if it's possible to do quotes within quotes - with Markdown.
You mean like that?
> > I am intentionally providing only the most basic... > > Show if it's possible to do quotes within quotes - **with Markdown**. -
joshl last edited by
Yes, I checked - it worked as you showed.
So, to make a second (or further) level quote, you need to put a space between the angulars?
The autoquoting doesn't seem to do that*:rolleyes:*
Speaking of basics - you didn't even fancy to remember a simple linebreak. Right?
I saw a Markdown - or similar - being introduced on another site: the lines don't break there either*:D*
Unless...(your cue, sherlock;) -
ruario last edited by
If you want a line break you put two spaces and a carriage return and text will continue on the next lineOutputs
If you want a line break you put two spaces and a carriage return
and text will continue on the next line
This is all in the syntax guide by the way.
When you do want to insert a <br /> break tag using Markdown, you end a line with two or more spaces, then type return.
-
joshl last edited by
If you want a line break you put two spaces and a carriage return
and text will continue on the next lineIf you want a line break you put two spaces and a carriage return
and text will continue on the next line<abbr title="Something's wrong with your punctuation, by the way.">What is the output difference between that two spaces on one hand and twice clicking "Enter" on the other?</abbr>
None? -
ruario last edited by
What is the output difference between that two spaces on one hand and twice clicking "Enter" on the other? None?
Click enter twice would have given you an extra blank line in the output, i.e.
<p>instead of a
If you want a line break you put two spaces and a carriage return and text will continue on the next line.Outputs
If you want a line break you put two spaces and a carriage return
and text will continue on the next line.
If you want to start a new paragraph, use two carriage returns. The second paragraph begins here.Outputs
If you want to start a new paragraph, use two carriage returns.
The second paragraph begins here.
-
-
joshl last edited by
Click enter twice would have given you an extra blank line in the output, i.e.
<p>instead of aIt looks more like a 1.5 interval*:P*
-
davehawley last edited by
If you want a line break you put two spaces and a carriage return
and text will continue on the next lineOutputs
If you want a line break you put two spaces and a carriage return
and text will continue on the next lineThis is all in the syntax guide by the way.
When you do want to insert a <br /> break tag using Markdown, you end a line with two or more spaces, then type return.
A prime example of what I was saying earlier.
An average user will not know that, and will just type away, putting carriage returns in when they want a new paragraph, and instead will end up with a terrible mess and won't know why!
The carriage returns show OK in the input box.
Whatever happened to WYSIWYG!
Still in mourning for Opera 12.........
-
ruario last edited by
Actually most people do not do that. How many people actually aim for output like yours? For clarity, people generally enter two lines when they want a new paragraph (to give a little spacing). So it is WYSIWYG for most people.
I honestly don't believe this is the problem you are making it out to be. Sure, there are a fair number of posts with some "mistakes" but it doesn't look any worse than any other random forum, despite the lack of formatting buttons. This is because those who care about formatting will notice and click on the "You may use Markdown in your reply." link. Those who don't care don't need such buttons.
Why on earth can't we have a forum where you just type what you want into your posts, and there are buttons at the top of the text input field for doing things like inserting links or images and formatting text, just like every other forum I use on the web has?!
Have you ever heard of Reddit? I would guess so, given they have 174 million users. Their comment box also uses Markdown and only includes a simple link to formatting help. Is it chaos? Yes! But not because of the formatting!
-
ruario last edited by
I decided to make this even simpler by adding a summary to the top (with tips). I expect most people could get by with just this and never need to scroll down into the details section.
-
ruario last edited by
Let me see if I have this right.
In order to make things italic, I need to do this
To put in a link to the Opera blogs, I could do this: http://blogs.opera.com/news/
or
I could do it like this: blogs
- it's easy
- it's clean
- it makes sense
-
joshl last edited by
Leushino, the thread is about formatting with the Markdown on these forums these days. HTML analogies are given for the reference. As long as everybody knows it's not executable to do italics with Markdown on these forums these days, today in this board you seem to be a bit off the topic.
