Microsoft MakeCode

Path for Images in Tutorial on github

More tutorials on github questions.

I would like to add some images to some of the hints in my tutorials. How should I embed the images in the hints? It seems like its looking in a docs/static directory however I’m not sure exactly where to place that in my project. I tried linking the absolute path but even that didn’t work.

Thanks!

I think if you put docs/static in the root of the repo it should work (but I have not tested it)

It still doesn’t work for me when I do that. It also doesn’t work if I just put in a URL that links to an image (e.g., https://github.com/schoolwidelabs/sensor-immersion/blob/master/docs/static/tutorials/co2.png). Do I need to update the pxt.json? If yes, how should I update it? I tried adding both the path to image file itself (error when trying to pull repo into makecode) and adding the docs directory as a dependency and neither worked. Any guidance would be appreciated. And potentially update the instructions on the https://makecode.com/writing-docs/tutorials.

Thanks!
Alex

Assuming your custom tutorial repository has github pages turned on, you would need to inline the full image url in the markdown, not just the relative path.

So in your case, you would want to use https://schoolwidelabs.github.io/sensor-immersion/static/images/co2.png

Oh okay that worked to use the github pages link. I could also link the raw image found at https://raw.githubusercontent.com/schoolwidelabs/sensor-immersion/master/static/images/co2.png. If I tried to just link the image from github using the URL: https://github.com/schoolwidelabs/sensor-immersion/blob/master/docs/static/tutorials/co2.png the Content-Type returned from github was text/html instead of image/png when I looked at the http requests from the tutorial. Weird. Thanks for the help.

We can probably do some magic when we render the tutorial to automatically patch the file paths. Could you file a bug in https://github.com/microsoft/pxt-microbit ?