7

I'm having a lot of trouble with code snippets. I like codepen.io, but here's me trying to paste the 'embed' code:

What I paste into the editor

<p data-height="265" data-theme-id="0" data-slug-hash="XdwpNa" data-default-tab="css,result" data-user="regan-ryan" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/regan-ryan/pen/XdwpNa/">Fancy text inputs</a> by Regan Ryan (<a href="http://codepen.io/regan-ryan">@regan-ryan</a>) on <a href="http://codepen.io">CodePen</a>.</p>

Only the following shows up in the question:

See the Pen Fancy text inputs by Regan Ryan (@regan-ryan) on CodePen.

Instead of just a link, can't I get the actual snippet to appear, with source-code and output?

More importantly, can someone make/is there a nice HOW TO that explains adding snippets to StackOverflow?

NB I don't want SO's native snippet, because that doesn't have the same functionality as CodePen (such as .slim syntax).

3
  • 2
    This is not possible. You might be able to write your own engine to run in Stack Snippets, but that's the closest you will get. Things that run automatically like that are a huge source of vulnerabilities and there have been a number of security upsets recently.
    – Laurel
    Commented May 18, 2016 at 0:11
  • 1
    You don't get the choice of what snippets get used, or what markup language you get to use. You get to use what's supported here. Content relevant to the code needs to be here, in the question itself, and not somewhere off-site. Off-site content tends to disappear, which means that posts that depend on that off-site content lose all value to future readers.
    – Ken White
    Commented May 18, 2016 at 1:57
  • These comments contain good information, do you want to post them as answers? Then people like me wont waste hours trying to figure out how it works ;)
    – Mirror318
    Commented May 18, 2016 at 2:26

1 Answer 1

4

The only way to do what you want to do would be to use the Stack Snippet editor (irony), like this:

<p data-height="265" data-theme-id="0" data-slug-hash="XdwpNa" data-default-tab="css,result" data-user="regan-ryan" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/regan-ryan/pen/XdwpNa/">Fancy text inputs</a> by Regan Ryan (<a href="http://codepen.io/regan-ryan">@regan-ryan</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

(You forgot the script tag in your question, so that was never going to work anyway.)

Please do not do this, even if you can.

It will cause several issues:

  1. Broken links. As someone who has gone through a lot of posts trying to fix this stuff, I do not appreciate seeing things like this. Your code must be in the body of the post, no exceptions.

  2. Security. It's impossible to tell what exactly is getting run, so at best you annoy security-minded people, and at worst you have introduced a hole for malicious behavior. This is actually a combination of two separate issues that have come up recently (will add links later).

  3. There's not really any benefit, especially to others. While you may think that this stuff is the Coolest Thing Ever, most people just don't care, or may even just prefer a Stack Snippet. (There might be more of an argument to make if you were discussing embedding something else, like Python, which currently will not work in Stack Snippets.)

2
  • Any chance Python will be added ? Commented May 2, 2017 at 23:58
  • 1
    @SherylHohman Were you looking for my other answer, which is like this, but with Python?
    – Laurel
    Commented May 3, 2017 at 1:06

You must log in to answer this question.

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