How do I post text so that it is formatted as code?

What do I need to do so that my code shows up properly — not escaped or removed — when posted? And how to get the correct syntax highlighting?

For more information, see "How do I format my posts in HTML or Markdown?" in the Help Center.

Return to FAQ index

migrated from stackoverflow.com Sep 16 '09 at 16:40

This question came from our site for professional and enthusiast programmers.

  • 1
    @Star we don't want to see an faq post tagged with discussion because it is not for discussion – Optimus Prime Oct 20 '17 at 13:55

Inline Code (For Code That Does Not Contain Newlines)

  • When the cursor is not in the first column, or you've selected text that does not hold newlines, use the {} code button above the editor (pictured below)
  • Enclose with backticks: `<html>`
  • Embed within <code> tags, and manually encode HTML entities: <code>&lt;html&gt;</code>
  • Select the partial text and hit CtrlK (CommandK, or K on OS X) or click the {} code button above the editor (pictured below)

Blocks of Code (Preserves Newlines)

  • When the cursor is in the first column, or you've selected text including a newline, use the {} code button above the editor (pictured below)
  • Paste your code, select the full lines, and hit CtrlK (CtrlK, or K on OS X)
  • Indent everything four (4) spaces
  • Increase indentation on selected line(s) with TAB, decrease with SHIFT+TAB
  • Encase in <pre> or <pre><code> tags (in that order; using <code><pre> is invalid), and encode HTML entities (like &lt; for <) yourself

Code copy/pasted from an IDE is often already tabbed. When rendering, tabs are replaced with spaces. However, you should remove tabs from the pasted code in case others have to apply additional formatting.

Code blocking icon properly highlighted

Inside a Blockquote

You must indent a further four spaces for every level of nesting.

> Lorem ipsum dolor sit amet, consectetur adipiscing elit.

>     for(;;)
        echo 'badger ';

Inside a List

You must indent a further four spaces for every level of nesting.

- First bullet (is the deepest)

        for(;;)
          echo 'ow ';

- Second bullet

Syntax Highlighting

Prettify is used to add colour to the code, but only if the language can be uniquely determined given the tags of the question, or if manual hints have been provided in HTML comments, using:

<!-- language: lang-or-tag-here -->

    code goes here

<!-- language: lang-or-tag-here -->

    code goes here

You can also specify the syntax for all codeblocks in your post with the language-all hint:

<!-- language-all: lang-or-tag-here -->

    code goes here

More text not in code blocks

    code goes here

See the full specification and list of languages hints.

Note that:

  • The HTML comments must not be indented
  • The blank line between <!-- language: ... --> and the indented code block is required
  • The space between language: and the language is required
  • When using a tag to specify language, the tag name is case-sensitive

If no language is defined then no highlighting occurs at all. But in the preview, or if multiple language tags define very different languages and no manual definition is used, a default highlighting is used in which Prettify makes a best guess.

There is a delay before the preview text highlighting is applied after you stop editing your markdown source, of around 5 seconds.

On Mobile Devices

  • One sometimes need to press and hold the regular single quote to get the backtick.

Backticks in Text

  • To include a backtick without accidentally starting some inline code, escape it: \`
    • like \` so yields: like ` so
    • <kbd>Alt Gr</kbd>+<kbd>\`</kbd> gets `|` yields: Alt Gr+` gets |

Backticks within Backticks

  • To use literal backticks within a code span, use any unique number of multiple backticks as the opening and closing delimiters: both ``literal backtick (`) here`` and, for example, ``````literal backtick (`) here`````` yield literal backtick (`) here. This works in comments too.
  • To use literal backticks at the start and/or end, add one space to both the opening and closing delimiters: `` `<html>` `` yields `<html>`, and `` $` `` yields the Perl $` operator. In comments, the additional space in the delimiters is not supported. Instead, escape the backtick: `\`<html>\`` and `$\`` to get `<html>` or $` in a comment.

Code Snippet (added 2014-09-16)

Add a codesnippet by clicking the JavaScript/HTML/CSS toolbar button or CTRL+M. This will insert the following boilerplate which can be edited with the Snippet editor (a link will appear in the preview edit the above snippet) .

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
//javascript goes here
<!-- language: lang-css -->
.css .goes .here {background-color: blue;}
<!-- language: lang-html -->
<div>html goes here</div>
<!-- end snippet -->
  • How can I write with blue or red color? Is it possible to do this also on iPhone? Because, right now I’m using only iPhone. And I tried many times to do as others did, but it did not worked to write with blue color. So how can I write with blue, red, green etc...? – Dreadbot Jan 31 at 15:41
  • @Dreadbot why would you need to do such a thing? – eis Feb 13 at 1:31
  • @eis Because, there are many users who know how to do this but me I don’t know. And I wish I can know how to do that. – Dreadbot Feb 14 at 22:09
  • 1
    @Dreadbot There is no way to use specific colors. You can do a code block, and the code block will do syntax highlighting/formatting, or you can add a link to another page, and the link is colored blue because it's a link. That's it. – Joel Coehoorn Feb 15 at 14:56
  • @JoelCoehoorn Can you tell me what are the code blocks? And what is the link for blue and other colors? – Dreadbot Feb 15 at 14:59
  • @Dreadbot You can't just write in blue and other colors. There is no way to do it. – Joel Coehoorn Feb 15 at 15:07
  • How would we do back ticks in comments while preserving structure? – CyberMew Mar 29 at 4:09
  • 1
    Ctrl-K doesn't always work. – ThomasMcLeod Jun 6 at 15:29
  • Another thing -- if your code is being interrupted by line breaks (e.g. when it reaches the end of the line) in places that you don't want it to, you can add &nbsp; elements inside the <code> block to fix it. – Jwosty Aug 2 at 18:50
  • 1
    TAB doesn't work...I don't remember if it ever worked – mihai Nov 5 at 17:02
  • @mihai you can paste tab characters into the textbox, but... ewww. – Joel Coehoorn Nov 5 at 17:04

You must log in to answer this question.

protected by Shadow Wizard Oct 27 '13 at 11:07

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?