### Author:  [@BDub](https://meta.discourse.org/u/BDub)
#### Post date: [Juin 23, 2014, 3:11 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/22 "2014-06-23T15:11:54Z")
+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?
---
### Author:  [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [Juin 23, 2014, 3:27 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/23 "2014-06-23T15:27:04Z")
> [@sam](#):
>
> I really hate that setting cause it leaves you with absolutely no way to have non-highlighted preformatted text, even \ 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’?
---
### Author:  [@BDub](https://meta.discourse.org/u/BDub)
#### Post date: [Juin 23, 2014, 3:37 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/24 "2014-06-23T15:37:05Z")
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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [Juin 23, 2014, 11:39 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/25 "2014-06-23T23:39:34Z")
> [@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:
[http://fortawesome.github.io/Font-Awesome/icons/](http://fortawesome.github.io/Font-Awesome/icons/)
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](https://github.com/trending)
2. Randomly pick a file within [NodeBB/src/categories/update.js at master · NodeBB/NodeBB · GitHub](https://github.com/NodeBB/NodeBB/blob/master/src/categories/update.js)
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.
---
### Author:  [@BDub](https://meta.discourse.org/u/BDub)
#### Post date: [Juin 25, 2014, 4:30 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/26 "2014-06-25T04:30:31Z")
> [@codinghorror](#):
>
> 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…
https://www.youtube.com/embed/_Hgk8emfdqs?feature=oembed&wmode=opaque
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [Juin 25, 2014, 7:07 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/27 "2014-06-25T07:07:03Z")
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.
---
### Author:  [@BDub](https://meta.discourse.org/u/BDub)
#### Post date: [Juin 29, 2014, 6:33 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/28 "2014-06-29T18:33:22Z")
More evidence that this needs to be easier 😄
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [Juin 29, 2014, 7:00 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/29 "2014-06-29T19:00:00Z")
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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [Juin 29, 2014, 7:26 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/30 "2014-06-29T19:26:28Z")
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”.
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [Juin 30, 2014, 12:24 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/31 "2014-06-30T00:24:23Z")
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.
---
### Author:  [@Greg\_Swallow](https://meta.discourse.org/u/Greg_Swallow)
#### Post date: [Juin 30, 2014, 6:33 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/32 "2014-06-30T06:33:42Z")
> [@codinghorror](#):
>
> 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/](http://highlightjs.org/) would be cool.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [Juin 30, 2014, 6:42 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/33 "2014-06-30T06:42:56Z")
> [@Greg\_Swallow](#):
>
> Integrating something like [http://highlightjs.org/](http://highlightjs.org/) would be cool.
```plaintext
while(true) {
face_palm += 1;
}
```
---
### Author:  [@BDub](https://meta.discourse.org/u/BDub)
#### Post date: [Juin 30, 2014, 1:58 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/34 "2014-06-30T13:58:49Z")
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.
---
### Author:  [@clay](https://meta.discourse.org/u/clay)
#### Post date: [Septembre 24, 2014, 4:49 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/35 "2014-09-24T16:49:27Z")
Is there a way to turn off line wrap on embedded code blocks? Some code example:
```javascript
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 "Zipcode: " + d.key + "" + outstr + "";
});
```
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [Septembre 24, 2014, 5:44 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/36 "2014-09-24T17:44:00Z")
It looks like you want these CSS attributes on `pre code`
```
word-wrap: normal;
overflow-x: auto;
white-space: pre;
```
---
### Author:  [@clay](https://meta.discourse.org/u/clay)
#### Post date: [Septembre 24, 2014, 6:07 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/37 "2014-09-24T18:07:51Z")
Awesome. Thank you very much! My team is loving Discourse. 😄
---
### Author:  [@zystvan](https://meta.discourse.org/u/zystvan)
#### Post date: [Mars 9, 2016, 12:46 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/38 "2016-03-09T00:46:25Z")
(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
> [@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:
```javascript
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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [Mars 9, 2016, 12:48 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/39 "2016-03-09T00:48:54Z")
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?
---
### Author:  [@john\_mardlin](https://meta.discourse.org/u/john_mardlin)
#### Post date: [Mars 22, 2016, 5:13 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/40 "2016-03-22T17:13:22Z")
I’ve long wondered why the composer favored indented/preformatted text over fenced/code blocks.
> [@codinghorror](#):
>
> 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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [Mars 22, 2016, 9:04 UTC](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760/41 "2016-03-22T21:04:16Z")
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..
[Previous page](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760.md?page=1)
[Next page](https://meta.discourse.org/t/easy-way-to-change-preformatted-text-code-button/16760.md?page=3)