15

Title pretty much says it. My current choices are either to show the snippet and have a run button, or to hide it and not have a run button. Sometimes, you're just changing a single line of code but providing a snippet so the reader can see that line in action. In that case, just showing the changed line, with a run button (and the option to see the whole thing in context) would be great.

Example: In this answer, I really just wanted to focus on the one or two lines I was changing. So I used a hidden snippet and just quoted the code I want to highlight, but then the reader has to expand it to run it, which is jarring. (An effect might make it less jarring, but I still want a run button. :-) )

Here's that complete answer, for context:


Why is the pre DOM not getting appended?

Because wrap creates a copy of the element(s) you give it, it doesn't use the originals. From the docs:

A copy of this structure will be wrapped around each of the elements in the set of matched elements.

You can readily fix it by using t.parent() instead of container:

pre.appendTo(t.parent());

var t = $('#t');
var container = $('<div>');
container.css('position', 'relative');
t.wrap(container);
var pre = $('<pre>');
pre.appendTo(t.parent()); // <== Change is here
textarea {
    border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="t" row="1" style="resize:none;"></textarea>

Alternately, use insert the container before the textarea and then use append:

container.insertBefore(t);
t.appendTo(container);

var t = $('#t');
var container = $('<div>');
container.css('position', 'relative');
container.insertBefore(t); // <== Change is here
t.appendTo(container);     // <== and here
var pre = $('<pre>');
pre.appendTo(container);
textarea {
    border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="t" row="1" style="resize:none;"></textarea>

7
  • 6
    I'd quite like to see this for cases where the actual HTML,JS,CSS is not at all relevant to the answer but the functionality is being repurposed for some other reason. Such as using the HTML canvas element or video to demonstrate something. Commented Sep 20, 2014 at 12:08
  • Ahah! This is what I was looking for when I asked this question about markdown to hide extra information Commented Sep 22, 2014 at 4:51
  • 1
    I think some of the concern with that is that you don't actually know what the snippet is without showing it. That means you could be running code that actually has nothing to do with what you posted. At least if they force you to show the snippet before running it then you don't have an excuse when a user puts some malicious code in the snippet to run. Commented Sep 22, 2014 at 15:18
  • 6
    @MatthewGreen: I think we have other, much better ways of dealing with malicious code in answers than hoping people notice it in a wall of code before clicking Run. Commented Sep 22, 2014 at 15:38
  • I completely agree. Though I still feel there is merit in seeing the code before you run it. Even if that merit is avoiding potential abuse. Commented Sep 22, 2014 at 15:44
  • Interesting, i had raised a similar request on the same day here :)
    – T J
    Commented Oct 2, 2014 at 13:42
  • This one is a blocker. Hide is useless without showing the run button: no one will ever run it. I'm reverting my answer back to jsfiddle for now... Commented Jul 3, 2015 at 6:33

0

You must log in to answer this question.

Browse other questions tagged .