Hawkee   -  Apr 03, 2012

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?

Hawkee  -  Apr 03, 2012

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.

BlueThen  -  Apr 03, 2012

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.

Hawkee  -  Apr 03, 2012

@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.

Hawkee  -  Apr 03, 2012

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.

BlueThen  -  Apr 03, 2012

Cool. Developers will need to somehow tell the user where to put each snippet of code though.

Hawkee  -  Apr 03, 2012

I updated it slightly to make it more clear how it will be used.

Hawkee  -  Apr 04, 2012

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.

Wade  -  Apr 04, 2012

The ability to add syntax highlighting to


 blocks would be nice. So you could do like [code language=mirc] etc.
Hawkee  -  Apr 04, 2012

@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.
Wade  -  Apr 04, 2012

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

Hawkee  -  Apr 04, 2012

@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..

Sign in to comment

Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.