current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
up vote 67 down vote favorite
28

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

share
up vote 87 down vote accepted

For inline code (that does not hold newlines), any of the following will work:

  • 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 (CtrlK, or ⌘K on OS X) or click the {} code button above the editor (pictured below)

For blocks of code, to preserve newlines, use one of the following methods:

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

code blocking icon properly highlighted

Code within a blockquote

To include code within a blockquote, make sure to include the space after the > as well as the four spaces before the code.

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

>     for(;;) 
        echo 'badger ';

Or, put the blockquote character (and its following space) at the beginning of every blank line, including the one immediately before the code.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> 
    for(;;) 
        echo 'badger ';

Code within a list

If your code appears 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.

Using 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.
share
1  
This sintax is not explained in the guidelines. Is it possible to add it? <kbd>Alt Gr</kbd> – Revious Apr 25 '14 at 9:16
2  
@Revious That's for user input, nothing else. That's not mentioned here because it has nothing to do with code, though. – animuson♦ May 24 '14 at 15:07
1  
Clicking the {} button removes the newlines, it doesn't preserve them. Mac OS X 9.4, Chrome 36.0.1985.125. – jaepage Aug 12 '14 at 7:26
    
One annoying thing about using backticks is that they're handled a bit differently in comments than in answers. In both place the text is displayed in a monospaced font with a extra whitespace added on either side -- which I don't like, so in answers I just leave the whitespace I would have put in out and run things together, which generally works (although it can mess up word-wrapping). In comments leaving the spaces out to compensate doesn't work, so there's no way to workaround having to much whitespace around any code delimited with backtick characters. – martineau Sep 25 '14 at 23:05
1  
Thanks, but that's too much--will simply avoid putting code blocks in lists. – sss4r Jun 4 '15 at 14:57
    
If something looks like a html-tag and is not in a markdown code-block (indented), it is either interpreted as HTML (a very limited subset is allowed) or silently dropped. Please block posts containing unsupported HTML – Deduplicator Feb 23 at 18:38

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .