Navigation

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Users
    • Groups
    • Rules
    • Help

    Do more on the web, with a fast and secure browser!

    Download Opera browser with:

    • built-in ad blocker
    • battery saver
    • free VPN
    Download Opera

    Formatting with Markdown

    Forum feedback
    7
    62
    10799
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ruario
      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 &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

      Reply Quote 0
        1 Reply Last reply
      • davehawley
        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.........

        Reply Quote 0
          1 Reply Last reply
        • ruario
          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.

          Reply Quote 0
            1 Reply Last reply
          • joshl
            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, Ё.

            Reply Quote 0
              1 Reply Last reply
            • ruario
              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.

              Reply Quote 0
                1 Reply Last reply
              • joshl
                joshl last edited by

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

                Reply Quote 0
                  1 Reply Last reply
                • ruario
                  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.

                  Reply Quote 0
                    1 Reply Last reply
                  • joshl
                    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?)

                    Reply Quote 0
                      1 Reply Last reply
                    • ruario
                      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**.
                      
                      Reply Quote 0
                        1 Reply Last reply
                      • joshl
                        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;)

                        Reply Quote 0
                          1 Reply Last reply
                        • ruario
                          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 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.

                          Reply Quote 0
                            1 Reply Last reply
                          • joshl
                            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 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?

                            Reply Quote 0
                              1 Reply Last reply
                            • ruario
                              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.

                              Reply Quote 0
                                1 Reply Last reply
                              • ruario
                                ruario last edited by

                                If you want to test stuff play with the dingus.

                                Reply Quote 0
                                  1 Reply Last reply
                                • joshl
                                  joshl last edited by

                                  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*

                                  Reply Quote 0
                                    1 Reply Last reply
                                  • davehawley
                                    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 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!
                                    🙂

                                    Still in mourning for Opera 12.........

                                    Reply Quote 0
                                      1 Reply Last reply
                                    • ruario
                                      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! 😉

                                      Reply Quote 0
                                        1 Reply Last reply
                                      • ruario
                                        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.

                                        Reply Quote 0
                                          1 Reply Last reply
                                        • ruario
                                          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
                                          Reply Quote 0
                                            1 Reply Last reply
                                          • joshl
                                            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.

                                            Reply Quote 0
                                              1 Reply Last reply
                                            • First post
                                              Last post

                                            Computer browsers

                                            • Opera for Windows
                                            • Opera for Mac
                                            • Opera for Linux
                                            • Opera beta version
                                            • Opera USB

                                            Mobile browsers

                                            • Opera for Android
                                            • Opera Mini
                                            • Opera Touch
                                            • Opera for basic phones

                                            • Add-ons
                                            • Opera account
                                            • Wallpapers
                                            • Opera Ads

                                            • Help & support
                                            • Opera blogs
                                            • Opera forums
                                            • Dev.Opera

                                            • Security
                                            • Privacy
                                            • Cookies Policy
                                            • EULA
                                            • Terms of Service

                                            • About Opera
                                            • Press info
                                            • Jobs
                                            • Investors
                                            • Become a partner
                                            • Contact us

                                            Follow Opera

                                            • Opera - Facebook
                                            • Opera - Twitter
                                            • Opera - YouTube
                                            • Opera - LinkedIn
                                            • Opera - Instagram

                                            © Opera Software 1995-