Easy way to change preformatted text (code) button?

[BDub]

+1 to change the button graphic to match SO’s { }

I think I’ll make a little screengrab video of how I copy/paste code and it blows up the preformatted text … seems like this doesn’t happen to you?

[mcwumbly (Dave McClure)]

I really hate that setting cause it leaves you with absolutely no way to have non-highlighted preformatted text, even <PRE> don’t work.

I also very much think we should have an optional “code” toolbar widget thingy. Optional, default off.

Seems like in the long run, it’d be best to:

1. Remove the existing site setting to treat all preformatted text as code.
2. Add a site setting to have an ‘insert code’ button on the editor.
3. Code button would surround selected text with backticks, or if no text is selected add the following:

Like so:

```
type or paste code here
```

Maybe this could be done sometime after the editor gets converted to ‘full-on ember’?

[BDub]

I would totally code this up and submit a PR if I had the toolchain set up to do this and test it properly… unfortunately I’m more of a consumer of Discourse at the moment.

[codinghorror (Jeff Atwood)]

@BDub

+1 to change the button graphic to match SO’s

We can only use Font Awesome glyphs, if you think one says “code” better, let us know what it is, here is the complete list of glyphs:

Font Awesome

As for how you’re “supposed” to paste code, generally most source code is already natively indented by 4 spaces in anything but a Hello, World type program…

1. Picking the top project on Trending repositories on GitHub today · GitHub
2. Randomly pick a file within NodeBB/update.js at master · NodeBB/NodeBB · GitHub
3. Randomly pick code within
4. Paste it in

I get this:

	function updateCategory(cid, next) {
		var category = modified[cid];
		var fields = Object.keys(category);

		async.each(fields, function(key, next) {
			updateCategoryField(cid, key, category[key], next);
		}, next);
	}

But yes, you can also paste in code with any formatting

10 PRINT "I rock at BASIC"
20 GOTO 10

Then select the code you just pasted, and click the toolbar button or press ctrl+k.

Again, all of that is how Stack Overflow has worked for well on 5 years now. Not saying it is perfect or cannot be improved but to argue “the sky is falling, nobody can figure out how to paste code” just doesn’t ring true to me.

[BDub]

We can only use Font Awesome glyphs, if you think one says “code” better, let us know what it is

:trollface:

Sorry, had to… don’t me , I Discourse.

Seriously though, I looked at all of those icons. If you are limited to those, then the one you have there is the best for code.

I don’t even know about the copy/paste thing anymore… I guess I’m wrong? I’ll just go back to editing posts.

Here’s a video of how I think people are using it…

[codinghorror (Jeff Atwood)]

I agree with you that a source code button might make sense vs. the preformatted text button as @sam noted, it will just take us a little bit to get there as we want @eviltrout to eventually rewrite the editor in Ember. It is a post-v1 thing.

[BDub]

More evidence that this needs to be easier

[erlend_sh (Erlend Sogge Heggen)]

I really hope this gets adopted, with some additions:

Default the language parameter to something like plaintext (dunno if that’s a real option) and let admins change that default if they’d like, which in the case of my forum would be java.

You’d also get this result when you highlight a multiline code snippet and click the code button. However, for one-liners, you’d get the 4-space indent instead, effectively teaching users code markdown through discovery.

Auto-detection of code would just teach my users to be sloppy, I don’t want that.

---

Edit: Here’s another suggestion for the Ember do-over. Autocompletion similar to the super handy @mentions helper. Maybe just as a plugin for the code communities, but I’d sure want this.

[codinghorror (Jeff Atwood)]

Right, but the only “easy” thing is to auto detect code and format it, as I have said repeatedly. Nothing else is remotely as easy as that.

You are dealing with the sizable subset of users that don’t care what their content looks like and are not interested in learning or trying beyond “gimme the codez”.

[Mittineague]

Exactly. We have a Sticky explaining how the code tags work both by using the buttons on the editor and “hand coding” them.
The Sticky is pointed to in the FAQ.
Several of us have “How to use code tags” pointing to the Sticky in our Signatures
Moderators and some members frequently ask “newbies” to put their code inside tags.

Yet one of the most frequent whines from Moderators is how often we have to edit posts to the correct format.

Some members don’t get it right away and way too many never do.

[Greg_Swallow]

Right, but the only “easy” thing is to auto detect code and format it, as I have said repeatedly. Nothing else is remotely as easy as that.

Integrating something like http://highlightjs.org/ would be cool.

[sam (Sam Saffron)]

@Greg_Swallow

Integrating something like http://highlightjs.org/ would be cool.

while(true) {
  face_palm += 1;
}

[BDub]

So I’m at least assuming you have the ability to detect something has been Pasted into the editor right?

I think it could be easy to add some keywords in the admin panel that get used in a regex against the pasted code. That way the admins of each forum can decide what to look for…

In my case it would be:

setup()
loop()
pinMode(
digitalWrite(
to start out with…

It might not be bad to give us the power of a regex expression to work with as well, for cases like
if( vs. if (.

Then instead of just formatting it for them… it could pop up a helper modal that asks, “Shall I format this code for you?” in case it’s wrongly detecting things or maybe someone just really wants to NOT format code. This modal could also be optionally disabled by admins.

[clay (Clay Heaton)]

Is there a way to turn off line wrap on embedded code blocks? Some code example:

var maptip = d3.tip()
                   .attr('class', 'd3-tip')
                   .offset([-10, 0])
                   .html(function (d) { 
                        var visits = d.value;
                        var outstr = "";
                        if(visits == 0) {
                            outstr = "No website visits";
                        } else {
                            outstr = d3.round(visits,0) + " website visits";
                        }
                        return "<span><strong>Zipcode: " + d.key + "</strong></br />" + outstr + "</span>";
                    });

[codinghorror (Jeff Atwood)]

It looks like you want these CSS attributes on pre code

word-wrap: normal;
overflow-x: auto;
white-space: pre;

[clay (Clay Heaton)]

Awesome. Thank you very much! My team is loving Discourse.

[zystvan (Zeke Y)]

(I’m sorry for digging up an old post, but I really want the code button to get changed to triple backticks (`)as well)

---

@codinghorror

generally most source code is already natively indented by 4 spaces in anything but a Hello, World type program

Yes, from programmers with at least some experience. Here’s some example (but real) code from a learner that I saw earlier:

var main = function() {
$('.article').click(function() {
$('.article').removeClass('current');
$('.description').hide();

$(this).addClass('current');
$(this).children('.description').show();
});
$(document).keypress(function(event) {
if(event.which===111) {
$('.current').children('.description').toggle();
}
});
}
$(document).keypress(function(even) {
$(document).ready(main);

I have no idea why the learner put it that way, but that code - which is more complex than a “Hello, World!” program - has zero indents, so even if they had bothered to press the “Preformatted Text” button and then copy/paste their code in, it still wouldn’t have shown up properly.
(What’s especially interesting about that code to me is that the code editor Codecademy uses automatically indents you when you open a function and all that, just like a normal code editor. So this learner (like a large number of others) had to go out of their way to de-indent their code)

If the code formatting button would use triple backticks instead of four spaces, we could just tell learners to press the button, instead of giving them a short lesson on how Markdown works.

[codinghorror (Jeff Atwood)]

There is something similar to this in the way it works now:

single line highlighted and I press code button

multiple lines
highlighted and I
press the
code button

However, there could indeed be a preference for the multiple line code button that uses the triple backtick instead of indent, when multiple lines are selected. @eviltrout can you maybe add this to your list for 1.6?

[john_mardlin (John)]

I’ve long wondered why the composer favored indented/preformatted text over fenced/code blocks.

Realize that programming related discussion is a tiny subset of the audience that Discourse targets. So excellent support for basic preformatted text is much more important to us than specialized support for programmers and coding. It is true that the fenced code block method is largely hidden – you’d have to infer that exists based on the fact that this is Markdown and GitHub uses fenced code blocks in Markdown too.

Now I know.

But does a general audience really use pre-formatted text much? It seems possible that Discourse has say 1,000,000 non-coding users, 1% of which care a little bit about pre-formatted text, and 50,000 coding users, 100% of which care quite a bit about having code blocks.

[codinghorror (Jeff Atwood)]

It tends to depend heavily on the audience. I object rather strongly to randomly colorized text, which is what happens when “code syntax highlighting” is applied to random preformatted text.

I definitely support a site setting to accommodate either kind of audience. Maybe we have time to do this in 1.5 @eviltrout? It feels low risk to me since it only affects the editor button behavior…