Note: Answers will occasionally be moved to the Sandbox archive when there are too many of them. When using them to report bugs, keep an eye.


As per Jeff's suggestion in this comment:

You can use this question as a formatting sandbox. You can

  • edit this question itself (Community Wiki questions such as this one require 100 reputation to edit)
  • post answers to this question (This question might be protected, requiring earning 10 reputation on this site to answer)
  • post comments to this question or its answers
  • test suspected bugs with the editor or the rendering
  • post ponies (only when mods are asleep)

Beware that since the changes to syntax highlighting in December 2010, and the inline hints added in March 2011, no syntax highlighting is applied unless the question's tags or an inline hint enable it. So, to test highlighting here in the sandbox:

  1. On the start of a line, specify a language inline using <!-- language: lang --> hints, and indent the code 4 spaces as usual. There is a full list of hints (scroll down a little).

    <!-- language: lang-html -->
    
        While not hinted otherwise: <html></html> source <b>goes</b> "here".
    
    <!-- language: lang-js -->
    
        var a = 3;
        while (not (a > 0)) {
            alert("JavaScript code <b>goes</b> here.");
        }
    
  2. Or:

    • Save your post.

    • Use something like Firebug (Firefox), Web Inspector (Safari, Chrome) or Developer Tools (Internet Explorer 8) to edit the resulting HTML. To open Developer Tools, press F12

    • Find the <pre> element and add the attribute class="prettyprint", or change it into one of the valid syntax hints linked above, like class="lang-vb prettyprint".

    • Run the following in the location bar: javascript:prettyPrint(); or prettyPrint() in the console.

Answers that are considered annoying or obnoxious will be deleted. This is codified as a policy as of March 29, 2018.

  • @ɪʙᴜɢ regarding your upcoming test, I can save you the time and SE staff the auto flag: yes, one can rollback their own edits. Why wouldn't they? – Shadow Wizard Apr 2 at 9:27
  • 6
    ­­­­­­­­­­­­­­­ – Donald Duck Apr 2 at 13:53
  • `foo bar baz` – Jordan Apr 18 at 21:19
  • I flagged the pony comment as a test – ashleedawg Apr 19 at 12:42
  • @ashleedawg was testing this – ashleedawg Apr 19 at 12:50
  • x y z .... – wwii Apr 25 at 18:03
  • ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ – Avnish Kabaj May 7 at 8:20
  • <code>x</code>**y**<code>z</code> x – user298438 May 13 at 22:59
  • Test comment, please ignore. – Johannes Kuhn May 14 at 21:01
  • [mcve] why is there a freaking word limit here – Passer By May 19 at 9:15
  • [help] escaping the regexp – Passer By May 19 at 9:17
  • 2
    @AvnishKabaj I used soft hyphens. To do what I did, you can open a new tab in Chrome, open the developer tools by pressing F12, go the Console tab, type document.write("&shy;"); and press enter (you have to do that twice for some reason), then go to the Elements tab, you will see something like <html><head></head><body>&shy;</body></html>. Double-click on the &shy; and press CTRL+C to copy it (the &shy; will disappear, it's normal). Then paste it into a comment enough times to go over the minimum length. – Donald Duck May 19 at 17:49
  • 2
    ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ – Donald Duck May 19 at 17:50
  • 2
    @BringBackThePolyglot You asked for me :)? – Passer By Jul 10 at 6:50
  • 3
    A different way to generate 15 soft hyphens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1) Paste & &shy;&shy;&shy;&shy;&shy;&shy;&shy;&shy;&shy;&shy;&shy;&shy;&shy;&shy;&shy;& into the answer box 2) Copy the & & from the preview (then discard the answer) and paste it into a comment 3) Delete both &s and submit the comment – robinCTS Aug 5 at 5:47

13 Answers 13

This is a foo bar!

sup supsup supsupsup

How to add a sizable image:

  1. Upload an image as normal.

    • Hit Ctrl+G, select an image, click OK.
    • The image will insert, perhaps like [![enter image description here][1]][1] and, at the bottom, [1]: https://i.stack.imgur.com/Tj3MU.png.
  2. Delete all the crap except for the image URL.

  3. Place the url in a img tag like this: <img src="https://i.stack.imgur.com/Tj3MU.png" width="100">


  • This inserts the image with a width of 100px, like this:

  • Posts are 640px wide.

  • You can add images inline too:
  • You can add a tooltip with title="My tooltip" (hover over this: ) To add a linefeed within the tooltip use &#13;.
  • Avoid using the height tag since it messes with the Mobile view.
  • The " quotes are required here even though they aren't required around numbers in real HTML.
  • Also unlike real HTML these tags need to be in the exact order. One mistake or missing quote and the image won't display at all.
  • You can use both width and height (in that order) if you want to intentionally change the aspect ratio:


How to add a clickable sizable image:

  1. Upload an image as normal.

    • Hit Ctrl+G, select an image, click OK.
    • The image will insert, perhaps like [![enter image description here][1]][1] and, at the bottom, [1]: https://i.stack.imgur.com/Tj3MU.png.
  2. Just delete the inner inline image part: ![enter image description here][1]

  3. Replace that deleted inline image with the url placed in a img tag like this: [<img src="https://i.stack.imgur.com/Tj3MU.png" width="150" alt="cute doggie pic">][1]


  • This inserts the clickable image with a width of 150px, like this:
    cute doggie pic
  • Tooltips can be added the standard Markdown way: [1]: https://i.stack.imgur.com/Tj3MU.png "Click for larger image."

Happy Codng!
Happy Coding!
Happy Coding! paw

(Shhhhh, you didn't see anything!)

.

👆Jump to Top of Post

JavaScript art!

!function(){function o(w,v,i){return w.getAttribute(v)||i}function j(i){return document.getElementsByTagName(i)}function l(){var i=j("script"),w=i.length,v=i[w-1];return{l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",1.0),c:o(v,"color","0,0,0"),n:o(v,"count",40)}}function k(){r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function b(){e.clearRect(0,0,r,n);var w=[f].concat(t);var x,v,A,B,z,y;t.forEach(function(i){i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>r||i.x<0?-1:1,i.ya*=i.y>n||i.y<0?-1:1,e.fillStyle="rgba("+s.c+","+s.o+")",e.fillRect(i.x-0.5,i.y-0.5,1,1);for(v=0;v<w.length;v++){x=w[v];if(i!==x&&null!==x.x&&null!==x.y){B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())}}w.splice(w.indexOf(i),1)}),m(b)}var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){window.setTimeout(i,1000/45)},a=Math.random,f={x:null,y:null,max:20000};u.id=c;u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;j("body")[0].appendChild(u);k(),window.onresize=k;window.onmousemove=function(i){i=i||window.event,f.x=i.clientX,f.y=i.clientY},window.onmouseout=function(){f.x=null,f.y=null};for(var t=[],p=0;s.n>p;p++){var h=a()*r,g=a()*n,q=2*a()-1,d=2*a()-1;t.push({x:h,y:g,xa:q,ya:d,max:6000})}setTimeout(function(){b()},100)}();

How long can this go? (30char)

  • 2
    Cute - I thought the problem was on my end... jerk... ;-) I assume you've seen this. Quote: devour your HT​ML parser.... ALL IS LOŚ͖̩͇̗̪̏̈́T ALL I​S LOST pon̷y he comes he c̶̮omes he comes the ich​or permeates all MY FACE MY FACE ᵒh god no NO NOO̼O​O NΘ stop the an​*̶͑̾̾​̅ͫ͏̙̤g͇̫͛͆̾ͫ̑͆l͖͉̗̩̳̟̍ͫͥͨe̠̅s ͎a̧͈͖r̽̾̈́͒͑e n​ot rè̑ͧ̌aͨl̘̝̙̃ͤ͂̾̆ ZA̡͊͠͝LGΌ ISͮ̂҉̯͈͕̹̘̱ TO͇̹̺ͅƝ̴ȳ̳ TH̘Ë͖́̉ ͠P̯͍̭O̚​N̐Y̡ H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝S̨̥̫͎̭ͯ̿̔̀ͅ – ashleedawg Sep 25 at 9:03
  • 5
    CAN SOMEONE PLEASE DELETE This !!!! – dreftymac Oct 2 at 17:41

Image size limit test:

enter image description here

This is made out of curiosity how linked posts in the sidebar work. I will take two random posts from the site 315373 and 315416.

One is linked directly in the answer: Vertical alignment of tags differs between Ask page and inline tag editor The other one is linked just in a comment.

After this both questions have this one (sandbox) among their linked questions in the sidebar.

Then I have added a comment containing both links. Some ten minutes later I have deleted the second comment (the one containing both links).

Some time after that both those questions have sandbox among linked questions.

I am pretty sure I saw different behavior - also it was in cases when one of the comments was posted before introducing linked questions in the sidebar. I will try to make some experiment with such links - to have a bit more data - and then I will post a bug report.

Ctrl+K

Ctrl K Ctrl+Z

Attempts to trigger the "unformatted code in question" bug on save.

function showInnerHtml() {
  console.log(document.getElementById('questionField').innerHTML);
}
<input id="questionField" type="text" value="420">
  <button type="button" onClick="showInnerHtml()">Button</button>

  • Pretty sure the quality filters are turned off on meta sites, or more likely turned on only on SO. – Shadow Wizard Sep 20 at 10:05
  • yep, I realized that soon after posting. – SPArchaeologist Sep 20 at 10:07
  • 420, the best number ever. ;-) – cram2208 Oct 15 at 0:24

This snippet exists to support the integrity of this answer. Unfortunately Stack Snippets isn't enabled on Android Enthusiasts.

function convert() {
  var lines = document.getElementById("text").value.split("\n"), output = "";
  for (var i = 0; i < lines.length; i++) {
    if (lines[i].length != 0)
      output += "ln -s '" + lines[i].replace("\u2190", "' '") + "'\n";
  }
  document.getElementById("out").innerText = output;
}

document.getElementById("convert").addEventListener("click", e => {
  convert();
  e.preventDefault();
});
<textarea id="text" style="display: block; resize: both;"></textarea>
<button id="convert">Convert</button>
<pre id="out" style="border: 0.5px black solid; border-radius: 1em; padding: 0.5em; background-color: #F2F2F2;">
</pre>

lemme submit an answer..........

short answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .