How to add Blocks to a HTML page

[stritti]

Is ist possible to add source examples in Block-style to a web page?
I would prefer this instead of creating unchangeable screenshots.

[pelikhan]

See https://makecode.microbit.org/blocks-embed .

[stritti]

Great, haven't saw it. THX!

[stritti]

I was not able to understand the mentioned docu. I have reverse engineered the rendering in of the documentation itself and created a gist: https://gist.github.com/stritti/e47d780cedc0146e9c3b7e7c0e8eee68

[pelikhan]

Right this one is invasive as it injects css and js in the page. The documented approach uses iframe a to avoid that

[stritti]

You are right, @pelikhan. But I was not really able to follow the documentation you provided.
Maybe a small vanilla JS example could really help.

[pelikhan]

Let me see if i can fiddle one.

[pelikhan]

See https://jsfiddle.net/ndyz1d57/1/

[stritti]

Awesome, many thanks @pelikhan! This helped me a lot! Really simple solution.
I thought far too complicated. A simple example is often better than a lot words :)

[pelikhan]

Which web site are you instrumenting ? :)

[stritti]

I am currently set up a HTML5-presentation for the "GirlsDay" in Germany: https://github.com/stritti/girlsday-einfuehrung-informatik

It is currently very basic, I just wanted to see, that I need not to screenshot the Blocks first :)

[stritti]

Now I updated rendering successfully and could start in the next days adding the useful content. The frame is ready.

[dnowba]

Now I updated rendering successfully and could start in the next days adding the useful content. The frame is ready.
But how if I just want to show one block? for example, a "input.lightLevel()" block ???

[stritti]

But how if I just want to show one block? for example, a "input.lightLevel()" block ???

Have a look at https://github.com/stritti/girlsday-einfuehrung-informatik there are some examples.

[dnowba]

I've test it, but it is not working when rendering single Circle Shape Block, or a boolean Block.
Sometimes I just output a single block for inline purpose.

[stritti]

in my environment it works fin. Have a look on this (German) slide: https://stritti.github.io/girlsday-einfuehrung-informatik/#/Blocks-Variablen
associated sources: https://github.com/stritti/girlsday-einfuehrung-informatik/blob/a65e4e2460b1e09ad24e05c339d464175bf5985f/src/index.html#L483

Maybe you could provide a source example.