We're considering a new way to post snippets. One shortcoming we have right now is that there is only one block of code. One option is to have a single entry box where you can post text and [code ] blocks interchangeably. Another option is to add an append button to append another code box, but that complicates the matter of description text between code blocks. And finally another option is a wysiwyg editor that adds the [code ] tags for you. Any thoughts or suggestions?
I would suggest to avoid making the user use tags to format their own submissions. However, since this is a site for programmers, I suppose that shouldn't be too much of an issue.
I like the idea of appending new textboxes. I'm not sure if there's an eloquent way for this to work for all languages, though. I know for Java, the file name need to match the class name, or it won't compile. So you'd need to maybe include a textbox for file names for Java.
Personally I don't like wysiwyg editors. I always end up fighting with it more often than working with it, so I would rather using codes manually over that.
@BlueThen Yes, I'd like to avoid using tags as well. I agree with you about wysiwyg editors as well. I was just struggling with the one over at Stackoverflow the other day. I think rather than append textareas I'm going to try to append contenteditable divs within a primary contenteditable div. Each time you append one that's a new code box within description text. I need to experiment with it a bit to see how possible it even is. I see a potential issue with throwing a div between text and moving it around within the text.
I was able to come up with a proof of concept and it seems to work pretty well. Have a look:
http://jsfiddle.net/Hawkee/gSd2p/2/
I think this would would great.
There are some issues with contenteditable divs which may be difficult to overcome. Firstly there's an issue with pasting rich text. Only Safari and Chrome support plaintext pasting, so if you copy something from a website it'll paste with all the same formatting. Textareas are great because they automatically remove all the styling.
So now what I'm considering is a textarea solution that mimics the demo I made yesterday. I found a nice web based code editor that should work quite well for the code blocks, it's called CodeMirror.
@Wader That's more for comments, but I'll see about working something in like that later. I'm playing with CodeMirror right now and it seems very powerful. It could be used as a nice universal solution for the site, thus eliminating the need for
blocks entirely. Imagine a button at the bottom of this box that appends a highlighted code editor.
yeh i meant to put for comments >.<
I've used MarkItUp many times for a wysiwug editor. Though CodeMirror looks quite alot better functionality wise. http://markitup.jaysalvat.com
@Wader That one looks pretty nice, but I'm not so concerned about the basics like bold, italic, underline, etc. What I'd really like is a way to type your instructions and embed code blocks within. But I'd like the code blocks to show up as they would on the final page. I think CodeMirror will do exactly this.
The only issue I see is inserting a code block within a block of text. I'll have to divide a textarea into two and split the text. I was going to use a contenteditable div for the instructions, but there's a major limitation when it comes to pasting rich text. Only Chrome supports plaintext contenteditable divs, so it's a bit of a hack to strip the rich text on Mozilla, IE or Opera. Now if there were a contenteditable wysiwyg editor that handled plaintext pastes and custom elements we might be in business..
We might just need to roll our own solution. I was looking at WMD editor which Stackoverflow uses, but it's poorly supported and the URL doesn't even work right now. What I'm considering is a contenteditable div where you can add contenteditable code divs within. That way the code is in a separate area from the description text thus allowing something like this.