376

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

0
387

Inline code (for code that does not contain newlines)

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

Blocks of code (preserves newlines)

  • When the cursor is on an empty line, or you've selected code including a newline, click the {} code button above the editor (pictured below) or hit Ctrl+K (Cmd+K on macOS)
  • Create code fences with three backticks ``` or tildes ~~~, one on a line before the code, and one on a line after
  • Indent the code by four 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.

Formatting code in the editor

Using the four-space method inside another block

Inside a blockquote

Add one more space following the greater-than sign >

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

renders as

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

for(;;)
  echo 'badger ';

Inside a List

Indent a further four spaces for every level of nesting.

- First bullet

        for(;;)
          echo 'ow ';

- Second bullet

renders as

  • First bullet

      for(;;)
        echo 'ow ';
    
  • Second bullet

Syntax highlighting

Highlight.js is used to add color 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 on the same line after the opening code fence, or in HTML comments:

```lang-or-tag-here
code goes here
```

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

    code goes here

You can also specify the syntax for all code blocks 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:

  • When using a tag to specify language, the tag name is case-sensitive
  • 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

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 needs 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>`. In comments, the additional space in the delimiters is not supported. Instead, escape the backtick: `\`<html>\`` to get `<html>` in a comment.

Code snippet (added 2014-09-16)

Add a code snippet 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, saying edit the above snippet) .

Please click TIDY before inserting the code into the answer/question

NOTE If the snippet does not actually run, you can remove the comment with begin snippet to still produce a nicely formatted set of HTML/JavaScript/CSS

<!-- 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 -->
15
  • 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 '18 at 15:41
  • @Dreadbot why would you need to do such a thing?
    – eis
    Feb 13 '18 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 '18 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. Feb 15 '18 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 '18 at 14:59
  • @Dreadbot You can't just write in blue and other colors. There is no way to do it. Feb 15 '18 at 15:07
  • How would we do back ticks in comments while preserving structure?
    – CyberMew
    Mar 29 '18 at 4:09
  • 2
    Ctrl-K doesn't always work. Jun 6 '18 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 '18 at 18:50
  • 5
    TAB doesn't work...I don't remember if it ever worked
    – mihai
    Nov 5 '18 at 17:02
  • @mihai you can paste tab characters into the textbox, but... ewww. Nov 5 '18 at 17:04
  • @Joel mihai's talking about pressing Tab to increase the indent. And he's right, it doesn't work.
    – wjandrea
    Jun 22 '19 at 21:08
  • No support for powershell in that list?
    – js2010
    Aug 17 '19 at 0:55
  • It uses prettify.js, or did. I don't think powershell existed yet when this answer was first written. Aug 17 '19 at 3:32
  • Is it possible to add multiline code blocks to list items without indenting every code line? I tried to use triple backticks and just indent them, but no luck. Jun 26 at 17:11

You must log in to answer this question.