Executable Code Snippets

Glitch Feature Ideas
1

Hey there! :wave:

I was browsing around and helping people with coding issues, and I was embedding code in codeblocks like below as a visual and textual support.

"main": "file.js",

And just a few minutes ago I was also browsing around on StackOverflow to see if there are anything HTML/CSS/JS related I could help with, and it hit me that we don’t have code snippets here! It would help with newbies and beginners to just paste a bit of code and have them be able to execute there and then without having to copy and paste that code into their project to test it!

My idea was to have it similar to codeblocks were you’re still enclosing the code with some starting and ending element with [html], [css], and [js] or [javascript] and in the preview of actual post, they all combine into one code snippet. And maybe also include [package.json] for Node previews?

[html]
<html>
  <head>
    <title>Hello!</title>
  </head>
  <body>
    <h1>
      Welcome!
    </h1>
  </body>
</html>
[/html]
[css]
h1 {
  color: fuchsia
}
[/css]

I hope I was clear enough, and I really think this would be a great add-on to the Glitch Support website! :smile:

Thanks!
~ Crazy

1 Like
2

Hey Crazy,

It’s super cool you’re helping out - we just released a Glitch embeds feature so that you can put a live glitch project anywhere.

3
3.gif710×539 408 KB

I just tried it for the first time on discourse, this is a live example. You can edit it too:

It looks like there’s some css on this forum that I’ll need to override here to make iframes the right size

1 Like
3

update: turns out discourse strips out inline styles from html snippets, but it was easy enough to override in our theme with:

iframe {
border: 0;
height: 420px;
width: 100%; 
}
4

Wow, that is really cool! I’m glad they were able to be added and I’ll definitely use them in the near future.

As for the iframe thing, I don’t know a whole lot about them other than they can be really annoying :smile:

6

As a forum feature that’d have to be something discourse offers, but as far as I know SO snippets work because they have a secondary domain (stacksnippets dot net) that they use to host and run content from, so that untrusted code doesn’t get access to things like stackoveflow cookies etc.

That makes it much less likely that discourse offers a similar feature (at least one that I’d trust to enable) but if you know of options there, throw them in the thread and we can see if any of those might be something we can add.