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: