alpacaaa/runelm.io

Embedding

Opened this issue · 2 comments

Very cool! Can you offer any tips on how you did the embedding on your blog?

http://alpacaaa.net/blog/post/elm-memory-game-from-scratch/

Thanks for making this useful resource!

Hey @clarkware!

I will need to write some proper documentation on embedding, but let me give you a couple of guidelines to get you started.

First of all, it's all done through boring and simple iframes. The code I'm using is the following:

<iframe
    src="https://runelm.io/c/whatevs"
    width="100%"
    height="500"
    frameBorder="0"
    sandbox="allow-forms allow-popups allow-scripts allow-same-origin allow-modals">
</iframe>

There are a few snippet variations available (and please do suggest if you'd like to see something else!)

runelm.io/c/:id – This is the canonical one, it will render both the editor and the preview. It will allow the user to edit the code and run it in place (it will create a fork of your snippet behind the scenes)

?pane=preview – This will only show the preview

The following are a bit experimental and might just be terrible ideas

?pane=editor – I'm not too sure about this one, but it's available nonetheless. The idea is to render the editor in readonly mode so that you can use runelm.io to embed little snippets of code and have syntax highlighting for free. As it is, the overhead of loading the whole app is quite noticeable.

?highlight=lineStart-lineFinish – Continuing with the code embed scenario, you might want to limit the snippet to only a portion of the whole code. So you could say ?pane=editor&highlight=10-20 and it would show only the code between line 10 and 20.

?lineNumbers=Bool – Again, if you're embedding little snippets of codes (just a few lines), hiding line numbers might just look better.

Let me know if the above makes sense! I'd also be interested in hearing your general thoughts on runelm.io so that it can be improved even further.

Thanks - this is super helpful! I'll kick the tires a bit and report back if I have any thoughts on improvement. I've only just begun looking at runelm.io but so far it seems very promising.

Thanks for taking the time to write this up!