Easy way to change preformatted text (code) button?

On forums that are pretty software intensive, i.e., people posting lots of code… the preformatted text ctrl+k thing doesn’t cut it. I’m constantly having to edit posts and do this technique:

Is there an easy way to just change this button to be the CODE button and default it to whatever makes sense for your community?

There is no amount of tutorials that can fix this problem… the problem is people look at the tools in front of them and the pick the one with CODE in it. Which turns out to be terrible for code unless you use it in a non-intuitive way.

For example… here’s some code using preformatted text. Well, I say using it because the way people use it is they go and copy their code… then they click the preformatted text button. Then they paste their code. And it blows up like this:

// virtual members

#include
using namespace std;

class Polygon {
protected:
int width, height;
public:
void set_values (int a, int b)
{ width=a; height=b; }
virtual int area ()
{ return 0; }
};

class Rectangle: public Polygon {
public:
int area ()
{ return width * height; }
};

class Triangle: public Polygon {
public:
int area ()
{ return (width * height / 2); }
};

int main () {
Rectangle rect;
Triangle trgl;
Polygon poly;
Polygon * ppoly1 = ▭
Polygon * ppoly2 = &trgl;
Polygon * ppoly3 = &poly;
ppoly1->set_values (4,5);
ppoly2->set_values (4,5);
ppoly3->set_values (4,5);
cout << ppoly1->area() << ‘\n’;
cout << ppoly2->area() << ‘\n’;
cout << ppoly3->area() << ‘\n’;
return 0;
}


Now if you paste your code first… highlight it, and then click the preformatted text button it’s much nicer:

// virtual members
#include <iostream>
using namespace std;

class Polygon {
  protected:
    int width, height;
  public:
    void set_values (int a, int b)
      { width=a; height=b; }
    virtual int area ()
      { return 0; }
};

class Rectangle: public Polygon {
  public:
    int area ()
      { return width * height; }
};

class Triangle: public Polygon {
  public:
    int area ()
      { return (width * height / 2); }
};

int main () {
  Rectangle rect;
  Triangle trgl;
  Polygon poly;
  Polygon * ppoly1 = &rect;
  Polygon * ppoly2 = &trgl;
  Polygon * ppoly3 = &poly;
  ppoly1->set_values (4,5);
  ppoly2->set_values (4,5);
  ppoly3->set_values (4,5);
  cout << ppoly1->area() << '\n';
  cout << ppoly2->area() << '\n';
  cout << ppoly3->area() << '\n';
  return 0;
}

However that’s not intuitive either… so if you click the code button and get:

```cpp
// paste code here
```

Then it will look like this:

// virtual members
#include <iostream>
using namespace std;

class Polygon {
  protected:
    int width, height;
  public:
    void set_values (int a, int b)
      { width=a; height=b; }
    virtual int area ()
      { return 0; }
};

class Rectangle: public Polygon {
  public:
    int area ()
      { return width * height; }
};

class Triangle: public Polygon {
  public:
    int area ()
      { return (width * height / 2); }
};

int main () {
  Rectangle rect;
  Triangle trgl;
  Polygon poly;
  Polygon * ppoly1 = &rect;
  Polygon * ppoly2 = &trgl;
  Polygon * ppoly3 = &poly;
  ppoly1->set_values (4,5);
  ppoly2->set_values (4,5);
  ppoly3->set_values (4,5);
  cout << ppoly1->area() << '\n';
  cout << ppoly2->area() << '\n';
  cout << ppoly3->area() << '\n';
  return 0;
}

Ahh, so nice.

How can we make life easier for coders ? :slight_smile: Thanks!!

6 Likes

There’s a site setting for that:

Admin > Settings > Posting

scroll to the bottom

1 Like

I just tried this, and I don’t see any difference in the operation of syntax highlighting.

The problem still remains that if you press the preformatted text buttom

You get some highlighted text like this:

And if you just hit CTRL+V to paste in your code… it blows up like I’ve shown above.

Stack Overflow, arguably one of the largest and most important code sites on the Internet, works exactly this way. Indent code 4 spaces. So I find your claim that this is a huge unresolvable problem kind of unconvincing.

1 Like

@codinghorror thank you for stepping into the conversation :smile:

I’m not complaining for complaining sake… I truly believe this is an issue that can be resolved in a created way. I honestly don’t think stating Stack Overflow’s process for posting code is even valid. People that post code their are typically coders, so they are SMART about how to post code… or at least can figure it out quickly. I am a coder, and it took me quite a while to even figure out how to use the preformatted text option in Discourse effectively. Now think about all of the noobs that are just starting to program. They are copy/pasting most of their code to get started… they don’t even probably have a preference for indentation in their code yet. They don’t know they need to put 4 spaces in front of every line to make it recognized by the forum as preformatted text. That’s a pain anyway… it’s much easier to paste your code, highlight your code, then press ctrl+k. But that’s not intuitive so no one does it. All I’m asking for is an open discussion on this feature and how we can make it better. Discourse is super customizable already, why not allow a tweak here for the benefit of all?

Let me just ask you how do you put code into a post?

How do you use the Preformatted Text feature to put code into a post? (if not the same as above)

Also, go ask 3 people that have never seen discourse to take a large amount of code from a website and put it in a new post for you. See what happens :slight_smile: I already know this answer though by reading over 15608 posts read on https://community.spark.io most people do not even know about the markdown technique, and so many people can’t figure out how to make preformatted text work. 3 people are probably not going to be a fair sample set, but would be easy enough to get some feedback.

2 Likes

I usually stuff the code in between two sets of three backticks:

```
your code here
```

When copying code from an editor its easier than indenting by four spaces anyway.

Many other sites including GitHub, Trello and SO use similar markdown for delineating code within a post. It’s something worth learning.

So I think the best question here is “what is the best way to teach new users how to format their code?”

If much of your content is code, this is kind of a community matter. I would add a “Please format your code, here’s how” section to the FAQ that goes out new new users for starters.

Simply editing their post is another way. They should get a notification when their post is edited and then be able to go see what change was made and infer why.

You could also post a short topic specifically on the matter and link to it in topics or PMs to users that aren’t catching on.

Finally, you can also encourage people to flag posts for editing that contain improperly formatted code.

2 Likes

Thanks for your feedback. I hope it helps to show not everyone prefers or knows how to use preformatted text for code.

I’ve done all of those steps but, 1) people don’t read them, 2) we can’t sticky them forever so new users will not see them.

When people see their post was edited, I don’t even know if they take the extra steps to find out why. I do get tired of repeating myself HOW to use the Grave marks to format code… so now I just edit the post and be done. It’s the easiest thing at this point.

I don’t want to be an overbearing moderator who shouts at people for code formatting either… that’s just silly.

This is why I believe just changing the default behavior of the “code” button will be the most valuable thing. Give a user the tools that we prefer to use by default… whatever they are. Maybe it’s spacing your code with 4 spaces on every single line… or maybe it’s the simple wrapping of your code in grave marks. or grave marks with cpp or javascript

And/or if there was a way to edit the tooltip for the those buttons, a few extra things could be said in there to help out.

Pinned topics should stay sticky for new users until they unpin them.

And if you link back to them occasionally, you’ll leave some links for new users to find as the read the rest of the content.

I hear you. At least having a post to link to will make you have to repeat yourself less…

No need to shout!

Definitely good to keep the right tone for your community and engage them to help. You can set that tone in the post you refer to and cover things like:

  • why we value properly formatted code in posts
    legibility, best practice, help others with similar questions or answers
  • how to format your code
    code button, backticks, etc
    common practice on other sites you will use
  • how you can help
    set a good example for others
    format your own code
    refer other users to this topic when they need help or flag a post for moderation so it can be edited

The sort of people who do not read anything are not going to magically discover the code formatting button. These people will not see anything you put on the screen.

We typically like to un-pin the topics after a week to 4 weeks… because I think partly it’s unclear how to un-sticky a topic yourself as a regular user.

Some of that might be the mindset that it’s a stickied topic and not a pinned topic… so it persists until you un-sticky it. You know that’s not how it works, but I still think that’s part of why we do what we do.

We can force the forum to look beautiful, instead of relying upon everyone to know how to use the forum. Some people don’t even post, they just come in and read stuff… and might not even take the time to fill out their profiles or really know how things work in Discourse. That’s why things need to be super intuitive, IMO.


Just curious… if an experienced user of Discourse such as myself comes to you with a problem and feature request, what is the logic involved with processing my request? I’m just trying to help here. So far I haven’t seen anyone say HOW the preformatted text BUTTON is supposed to work. You obviously can’t paste code in where it says to paste code in… and no one is going to know to put 4 spaces in front of every line of code. It just doesn’t make any sense to me why you wouldn’t consider improving it.

My logic is… build it, and they will come. Make it intuitive and make it work, and they will find it and use it.

You don’t understand the nature of the problem you are dealing with. As a co-founder of Stack Overflow, I do. The sort of users you are referring to will not see or use anything you put on the screen.

The only thing you could do that would work is to auto detect code when pasted in, and auto format it. This is a fairly hard problem if you want to do it reliably.

1 Like

How is this supposed to work?

You click the preformatted text button:

You get some highlighted text like this:

What are you supposed to do there? I’m assuming there is some method that was designed, right?


What if when you clicked the Code button, you were presented with this?

Then you just paste your code in and everything looks great. Obviously it doesn’t have to have cpp by default, but that could be an option.

4 Likes

We could do that, and that’s fine, but then you will return complaining that users can’t “find” the code button. Because they won’t be able to, the sort of users you’re referring to literally do not look at anything you put on the screen.

Basically you are treating the symptom and not the disease. The only really workable solution here is to auto-detect code and format it on behalf of the user.

1 Like

The users aren’t that bad really. If the button was called code that might help too. I’d love to at least give it a try and see how it goes.

If the only kind of preformatted text you expect is source code, you should be enabling the autohighlight all option as @mcwumbly already indicated.

I just feel like you aren’t listening to me when I tell you that changing the text this button inserts, based on years of experience as a co founder of one of the world’s largest programming sites, will do virtually nothing to reach the users you are trying to reach.

I am not opposed to the change, but I think you have some deeply held misconceptions about what this is going to do for you. It just isn’t going to solve the underlying problem you are attempting to address at all.

If you really want to fix this you must autodetect source code and insert the formatting automatically on the user’s behalf. And unfortunately that is sort of hard.

Edit: ok, it is probably a fair point to say that

insert preformatted text here

Could be changed to

indent preformatted text by 4 spaces

And, if you do want to assume that 100% of the preformatted text on a given discussion site will be code, then a site level switch could support that.

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. Sure, its no silver bullet, but it will help some users. Especially all those new users that seem to be perfectly capable of discovering the current “insert pre-formatted code” thingy and add:

real_ugly++
source_code
2 Likes

I hear you, but I don’t believe what you are saying applies in my use case.

Deep misconceptions or not, preformatted text is pretty hard to actually use even if you know how.

You can’t just copy/paste code using that button the way it is right now… you have to manually space each line. Please acknowledge this issue.

My idea is much easier to use and looks good too. You can also copy code from a post and use it without having to delete 4 spaces in front of every line.

I think we’ve both repeated ourselves a couple times now… so I’ll leave this as an idea you can build on, or not. Thanks for your time :smile:

We will definitely not knock back a PR that allows you to add an extra button to the toolbar (provided its default off), if anyone feels like adding a PR it would be totally welcome.

1 Like

Incorrect. Select the code, click the toolbar button, or press ctrl+k. That either adds 4 spaces or removes, depending on what is selected.

Also most source code in anything but a very trivial app will tend to be “naturally” indented by 4 spaces when pasted. At least, that is what I saw in 4 years of working on Stack Overflow for 40 to 80 hours a week, with thousands of programmers working in dozens of languages. Your mileage may vary.

And just to be clear, the above toolbar behavior I describe is exactly how SO worked from day one and today, too. Not that it can’t be improved, but seems to me programmers were able to figure it out.

Here’s a screenshot of how it works on Stack Overflow right now

@bdub after some introspection, I agree with your criticism that the help text doesn’t actually tell you how to do this, and since we are talking about invisible characters (leading spaces) it could probably use a bit more literal explanation.

So, here’s me pasting in the section I just edited in our client.en.yml file

  code_title: "Preformatted text"
  code_text: "indent preformatted text by 4 spaces"

Note how many spaces this contains – well over the 4 space indent needed to get preformatted text. And all I did was copy and paste it in here. I did not press ctrl+k or click the preformatted text toolbar at all.

There’s a bit more work we plan to do with the editor (what happens when you select 3 lines and click bulleted list is pretty lame, too) and convert it to full-on Ember, but that will have to suffice for now.

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.

You could certainly edit the welcome PM that is sent to every user to make it clear how to format code, but users don’t ever read anything you put on the screen. Particularly the sort of not-mindful users who will post code with zero formatting in their posts and not care.

Your best long term solution remains the same: automatically detect unformatted code and auto-format it for the user.

1 Like