Syntax highlighting in <pre> block?

Question

So I've discovered that I can make code blocks with <pre> tag. Great ! Now I can write markup in vim and copy the resulting text into answer text box (instead of pasting answer and script separately,and running a script on a script which indents the scrip...you get the idea). Problem is it lacks syntax high lighting. Here's an example:

#!/usr/bin/env python
import os;

for r,s,f in os.walk("."):
    for i in f:
        if "postgis-2.0.0" in i:
            print(os.path.join(r,i))

Placing <!-- language: python --> before and after has no effect. So how do I get colors in <pre> block if that's even possible ?

Answer 1

Just use this userscript:

Better handling of indentation and the TAB key when editing posts.

This user script changes the behavior of a few keys (most notably the Tab key) within the post editor to behave more like it does in IDEs or text editors:

• When multiple lines are selected, Tab and Shift-Tab indent and dedent these lines

• When nothing is selected, Tab and Shift-Tab insert or remove whitespace to align the cursor on a tab boundary

• When the cursor is within the left margin of a line, Backspace removes whitespace to align the cursor on a tab boundary (in other words, it may delete more than just one space character)

• On indented lines, the Home key toggles the cursor between the actual beginning of the line and the beginning of the real content (in other words, it jumps back and forth to before and after the leading whitespace). This only happens on lines that are indented by at least four spaces or a tab, since it can be confusing for the following reason: When you press Home in the text editor, you expect the cursor to jump to the beginning of the line as it is displayed, which (due to wrapping) may be different from the actual previous newline character.

• So you don't have to reach for the mouse to tab out of the editor you can press and release the Ctrl key, and the next key press will not be intercepted; thus Tab takes you out of the editor. Pressing and releasing Ctrl will grey out the text editor until the next keystroke to clarify this. If you think this is too awkward, I'm open to other suggestions, but there should be some way to tab out of the editor .

Note that this will never insert TAB characters, only spaces. It does however handle already-present TABs, and it handles them the same way the Markdown converter does.

This means you can write your script in an external editor, paste it into the answer box and then just select it, hit tab and it's indented correctly. Hitting tab multiple times indents the selection multiple times, so this also works great for putting code in lists.

Answer 2

Many people who find this post by searching will want to know how to format text as a block of code easily. To do that, select the text in the visual editor (i.e., the text box on Ask Ubuntu where you are writing or pasting it) and press Ctrl+K or click the button that looks like {}. This indents each line by four spaces, causing it to be rendered as a code block. With that said...

You probably still don't want to use <pre> (or even <pre><code>) for this.

I advise against using HTML tags to format code on Ask Ubuntu, outside of special situations where you really need them (which, for a complete Python program, is probably never). The reason is that, when you make a code block that way, HTML is still treated specially inside it. This includes the < and > characters, which often appear in source code.

This happens because Markdown code formatting does more than just adding tags. It also performs any necessary escaping in the text that is to be treated as code. As the Markdown help page says:

Indent four spaces to create an escaped <pre> <code> block

^{(emphasis mine)}

But if you really must do it, it seems like you can.

There may be bugs, though.

The first problem you're running into is that, although <pre> </pre> displays like code on Stack Exchange sites, and is in general usually rendered in monospace, but it does not actually mean code.

As the editing guide (see above) and muru say, the HTML markup for a preformatted code block is <pre><code> </code></pre>.

<!-- language: lang-python -->

<pre><code>#!/usr/bin/env python
import os;

for r,s,f in os.walk("."):
    for i in f:
        if "postgis-2.0.0" in i:
            print(os.path.join(r,i))</code></pre>

This answer on Code Review Meta claims it works.

I recommend placing two newlines between the HTML comment and <pre>, as shown above. This corresponds to the way a <!-- language: lang-something --> comment is usually used with four-space indenting (i.e., the comment isn't indented, and a separate indented block follows it).

This works for me in the visual editor on the main site, sometimes, and it seem to recall that code like this is rendered properly after submission. If you're doing it like that, then I'm not sure what the problem is. When writing or editing posts, I have noticed that it often takes a few seconds--and sometimes much longer--for syntax highlighting to be applied. I imagine this is a browser rendering issue, but I have not noticed a problem in submitted posts, only in the visual editor's preview. I suspect a bug in the visual editor.

Another possibility is that perhaps syntax highlighting does not work the same (or at all?) here on meta. For example, I applied code highlighting to the HTML above (see the Markdown for this answer), which is formatted through the usual technique of indentation, but it's not rendering in HTML.

This is what the code shown above looks like (i.e, this is that, unindented). It seems to work on the main site, though I don't know if it's reliable. It does not seem to highlight here on meta.

#!/usr/bin/env python
import os;

for r,s,f in os.walk("."):
    for i in f:
        if "postgis-2.0.0" in i:
            print(os.path.join(r,i))

Here it is with four-space indentation:

#!/usr/bin/env python
import os;

for r,s,f in os.walk("."):
    for i in f:
        if "postgis-2.0.0" in i:
            print(os.path.join(r,i))

Unless something else in my post is getting in the way, it looks like meta doesn't support this. I have tested this from multiple browsers on Ubuntu and Windows, as well as the Stack Exchange app for Android, and syntax highlighting does not appear--not in this post, at least.