Skip to content

Instantly share code, notes, and snippets.

@stephen-w-pracy

stephen-w-pracy/assignment.md

Created November 29, 2022 18:11
Show Gist options
  • Save stephen-w-pracy/0fc37e60d4b1e6477d41bb0489b96ef1 to your computer and use it in GitHub Desktop.
Save stephen-w-pracy/0fc37e60d4b1e6477d41bb0489b96ef1 to your computer and use it in GitHub Desktop.
Download ZIP
"light box" style pop-out images in Instruqt
Raw
assignment.md
slug id title etc
foo
bar
baz
etc

Here's an example of HTML you can put in your assignments file. The downside is that when you view the rendered markdown outside of Instruqt (for example, here in Github) images will be doubled, and the CSS code will display.

An example image An example image

It's helpful to keep the ids and image filename all the same. It's required to keep the ids the same as each other.

Then drop this CSS in the file. A good place is the very end:

<style> .lightbox { display: none; position: fixed; justify-content: center; align-items: center; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; padding: 1rem; background: rgba(0, 0, 0, 0.8); } .lightbox:target { display: flex; } .lightbox img { max-height: 100%; } </style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment