What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 129 Stack Exchange communities.

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|improve this question

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

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

6 Answers 6

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. However, you should remove tabs from the pasted code in case others have to apply additional formatting.

code blocking icon properly highlighted

Code within a blockquote or list

If your code appears inside a blockquote or a list, you must indent a further four spaces for every level of nesting.

E.g. - Blockquote:

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

>     for(;;) 
        echo 'badger ';

Within a list:

- 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|improve this answer
    
Should we add: Prettify syntax highlighting does not support some languages very well: e.g. Lisp, Perl, languages that use ' to start end-of-line comments. meta.stackexchange.com/questions/981/… –  MarkJ Aug 13 '10 at 12:40
1  
How did you get the back-ticks to show up in the code (first example)? O.o –  David Thomas Mar 4 '11 at 11:47
    
@David, see How do comment @replies work?. And by clicking the time after "edited" (like in "edited 1 day ago" you'll get to the revision history, which has "view source" links. The trick is: double/triple/... backticks. One could also escape them, see here. –  Arjan Mar 9 '11 at 11:08
    
@Arjan I feel like I should add the note that: part to the full specification (meta.stackexchange.com/questions/78363/…), but on the other hand there are any of such hints nor examples at all. Suggestions? –  Shegit Brahm Jun 7 '12 at 8:40
1  
Maybe useful to add that the language-all hint works until the next language hint (with or without all). So we can have a number of code blocks in one language, followed by a couple of code blocks in another language, all nicely displayed with only two hints! (Took me a while to discover this). –  Gert Arnold Mar 23 '13 at 23:46
    
When does SO implement a indenting/unintending feature (not simply codeblock, but per line)? I like this one idea: meta.stackexchange.com/a/8172/191122 –  metadings Jun 19 '13 at 13:51
    
ctrl K highlights my text before submission, - but with the purpose of inviting me to <enter query> in the google search bar. As for <html> enclosing with </html>, it seems I have not been successful yet. –  Barb Wire Jul 13 '13 at 19:02
    
I hate to say it but...this system is non intuitive. To beginning users, you feel like you have to click the "blockquote" button once first before entering a new line, since that's the behavior if you haven't pasted your code yet. Suggest the default be modified to insert <tag> style instead...or something that allows pasting afterward... –  rogerdpack Jul 19 '13 at 17:53
1  
-1, not enough jQuery. Oh, wait... –  Jefffrey Dec 9 '13 at 13:27

To select vertically in Visual Studio, use the Alt key while dragging. This lets you drag around just the text you're interested in, minus the indent, so should make it a one-step copy/paste.

share|improve this answer

Paste it in the edit field, select it and click the Code button (the one saying { }) above the edit field.

share|improve this answer

First off, it is important to always post a Short, Self Contained, Correct (Compilable), Example. Remove extraneous code and concentrate on the problem. Show enough code to explain the context but remove unrelated lines. Although whitespace is important for readability, consider trimming blank lines to make it more concise. Certainly a max of only 1 blank line between lines -- never more.

After you have cut your code sample down to an appropriate size, you need to format it. The following works with Eclipse.

  1. Select the code that you are posting.
  2. Pull down the "Source" menu to "Format". This is recommended since it gets the code into a standard format that most developers are used to. It also standardizes the spacing.
  3. Press the Tab button. In Eclipse this shifts the code over by 1 tab position to the right. SO treats lines with leading Tab character or 4 spaces as source code. Adding extra indenting is not necessary if all of your code is already indented.
  4. If you are pasting the code into a list, multiple tabs may be necessary and you should press Tab again.
  5. Now you can cut your code into the clipboard and paste it into your browser window.

Instead of using Tab to indent your code, you can paste it into your post and then press the {} button right above the editing window. This will add one level of intending but if you are inside of the list then you will have to add more indenting to get the code formatted correctly. That is easier to do using the Tab instructions above.

share|improve this answer
    
My code is nicely colored, but not indented, what the heck?> –  GGB667 Nov 6 '13 at 15:30

I have written a small desktop application, originally intended for pasting code onto my website. Essentially, it removes the leftmost indent, without actually harming the indent of the code. (When I copy/paste stuff out of Visual Studio, it is sometimes indented 16 or 20 spaces already, and I want to have 0 spaces indent.

So from that example, a "Stack Overflow friendly" function to remove the leftmost indent and then add 4 spaces could look like this (this is C# Code, and tbCode is a Multiline Textbox):

int removeIndent = 0;
foreach (string s in tbCode.Lines)
{
    if (string.IsNullOrEmpty(s)) continue;
    int tmp = 0;
    foreach (char c in s)
    {
        if (c != ' ')
        {
            break;
        }
        else
        {
            tmp++;
        }
    }
    if (removeIndent == 0 || tmp < removeIndent)
    {
        removeIndent = tmp;
    }
}
StringBuilder sb = new StringBuilder();
foreach (string s in tbCode.Lines)
{
    sb.Append("    ");  // 4 Spaces "Stack Overflow Indent"
    sb.AppendLine(s.Length >= removeIndent ? s.Remove(0, removeIndent) : s);
}
tbCode.Text = sb.ToString();

This may be a little bit inefficient, but since we are not using it on millions line of code, it performs good enough.

share|improve this answer
8  
I use Shift-Tab, Ctrl-C, Ctrl-V, and Ctrl-Z :) –  Benjol Aug 13 '10 at 12:41

If a block of text is indented (I think, 4 spaces), it will automatically be formatted as code.

share|improve this answer

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 answers, posting an answer now requires 10 reputation on this site.

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