Formatting with Markdown

  • 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 &lt;code&gt; </td>
    <td>monospaced &lt;code&gt; </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 &lt;&gt;:

    `&lt;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 &lt;a&gt; 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 &lt;strong&gt; important text tag.


    Lists

    You can make unordered (bulleted) lists by starting your lines with dashes, followed by a space:

    - List item
    - List item
    

    It 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 2
    

    It 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 &lt;ul&gt;, &lt;ol&gt; and &lt;li&gt; list tags.


    Quoting

    You can quote another individual by starting the line with a right angle bracket &gt;:

    > I think Opera is the best browser
    

    It 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 &lt;blockquote&gt; 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 &lt;code&gt; code and &lt;pre&gt; preformatted text tags.


    Images

    You can insert images like this:

    ![opera logo](https://forums.opera.com/themes/opera/design/static/css/img/opera-software-logo.png)
    

    It will display as:

    <table>
    <tr>
    <td></td>
    </tr>
    </table>

    HTML equivalent

    Use the &lt;img&gt; 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 &lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt; and &lt;h6&gt; 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 &lt;hr&gt; horizontal rule tag.


    Additional HTML tags

    • &lt;i&gt; Italic text
    • &lt;s&gt; Incorrect (strikethrough) text
    • &lt;u&gt; Underlined text
    • &lt;table&gt; 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.

    Back to Tips and FAQs

  • 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!
    :)

  • 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.

  • 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, Ё.

  • 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.

  • You can insert images like this:
    ![opera logo](https://d2jc9zwbrclgz3.cloudfront.net/forums/7ac1a402f7/themes/opera/design/static/css/img/opera-software-logo.png)

    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:

    ![screenreader text](the_link "your tooltip text")

    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")

  • 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.

  • 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?)

  • 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**.
  • 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;)

  • 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


    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.

  • 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 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?

  • 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.

  • If you want to test stuff play with the dingus.

  • Click enter twice would have given you an extra blank line in the output, i.e. <p> instead of a .

    It looks more like a 1.5 interval*:P*

  • 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

    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.

    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!
    :)

  • 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! ;)

  • 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.

  • 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
  • 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.

Log in to reply
 

Looks like your connection to Opera forums was lost, please wait while we try to reconnect.