18

In many cases, a sample input/output data is given alongside the code, which shares the syntax highlighting (deduced from question tags), like this:

How does this code

#include <stdio.h>
int main() {
    printf("Hello int 123456 double \"a\". // haha");
    return 0;
}

Generate the following output?

Hello int 123456 double "a". // haha

IMHO, the second block would look better without highlighting:

Hello int 123456 double "a". // haha

I'm not sure if I edit such posts, I should add something like this:

<!-- language: none -->

     Hello int 123456 double "a". // haha
5
  • 7
    Why not using the quotation syntax for output? Using > instead of four spaces at the beginning of a line.
    – Cœur
    Commented Dec 17, 2017 at 5:23
  • 10
    @Cœur I personally dislike it, as it's not mono spaced.
    – Rob Mod
    Commented Dec 18, 2017 at 4:32
  • @Rob search terms are also affected, as it's harder to find an exact error message (like "word1 word2") using the internal search when it's inside code syntax (they aren't indexed the same way). To illustrate this, try finding "Hello int".
    – Cœur
    Commented Dec 18, 2017 at 4:36
  • 7
    @Cœur: Depending the output, having a proportional-width font isn't always desired, not necessarily because it looks bad, but because it's not how the output was intended to be formatted.
    – BoltClock
    Commented Dec 18, 2017 at 4:44
  • @Cœur also it alters the formatting. Some symbols may be interpreted as Markdown syntax, and it's nontrivial to escape them. /// Use code: in search.
    – user202729
    Commented Sep 13, 2018 at 7:00

3 Answers 3

18

For data, input text, output text, and errors, use code formatting with no syntax highlighting. Syntax highlighting is only intended for use on the specific code language which it's highlighting. If the syntax highlighting language being used isn't correct for any particular code block, then you should add syntax highlighting hints to have the text correctly highlighted (including removing syntax highlighting where it's not appropriate).

Some people suggest using other markdown-formatting styles, in particular quote formatting. IMO, using other formatting types can lead to confusion. For instance, quote format removes line-breaks, both in how it's displayed and how it's stored in the post's source. Removing line-breaks can result in not actually representing the output which is being performed by the code, or make error-text hard to read.

Ideally, there would be another formatting style that provides a monospaced font and preformatted text. Unfortunately, there's only code format. So, for code, data (input and output), and errors put them in code format, but clearly label them.

How to apply no syntax highlighting to a code block

You will need to add a syntax highlighting hint to have the text correctly highlighted with the appropriate language. In this case, that is lang-none.

Using code fences (current recommended method)

Use code fences to add the syntax highlighting hint at the start of the code block.

Example Markdown text (code fences)
```lang-none
Your text (errors, data, input, output, etc.)
```
Results in
Your text (errors, data, input, output, etc.)

Use a <!-- language: lang-none --> HTML comment to apply the syntax highlighting hint to the immediately following code block.

Using an HTML comment based language hint is deprecated, but still functional for all methods of displaying text in a code block.

Put/leave the errors/data/input/output in code format (using any of A) code fences, B) 4 space indent, or C) wrapped in HTML <pre><code>) and, on a separate line prior to the that code block (and for 4 space indent with a blank line between the comment and the code), just add:

<!-- language: none -->
Example Markdown text (code fences)
<!-- language: none -->
```
Your text (errors, data, input, output, etc.)
```
Results in
Your text (errors, data, input, output, etc.)
Example Markdown text (4 space indent)
<!-- language: none -->
    
    Your text (errors, data, input, output, etc.)
Results in
Your text (errors, data, input, output, etc.)
Example Markdown text (<pre><code>)
<!-- language: none -->
<pre><code>Your text (errors, data, input, output, etc.)</pre></code>
Results in
Your text (errors, data, input, output, etc.)
Example code block without specifying lang-none (to verify there is a difference)
Your text (errors, data, input, output, etc.)

Testing to verify that the HTML comment based syntax highlighting hint was still working was performed in this answer to: Formatting Sandbox.

1
  • 1
    The other quirk with 'quote formatting' is in some languages like python, certain structures like __init__ (which comes up as init instead). I often see block quotes used for tracebacks mislead people in this way...
    – Shadow
    Commented Dec 19, 2017 at 4:42
5

If removing the code formation from the output helps better describing/understanding the problem, do it. Otherwise, leave it as is.

I don't think the formation of small blocks that are output of a program really matters, as long as everybody understand that this is an output and not a program.

1

If you're editing it as per the example you provided, you can use the inline-code option using the ` back-tick:

`Hello int 123456 double "a". // haha`

Will result in un-highlighted, monospaced text:

How does this code

#include <stdio.h>
int main() {
    printf("Hello int 123456 double \"a\". // haha");
    return 0;
}

Generate the following output?

Hello int 123456 double "a". // haha

This also allows the text to wrap, which may or may not be appropriate for what you are attempting to show:

The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.

You must log in to answer this question.

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