carpentries-incubator / docker-introduction

Reproducible Computational Environments using Containers
https://carpentries-incubator.github.io/docker-introduction/
Other
42 stars 48 forks source link

Formatting suggestion #60

Open ChristinaLK opened 3 years ago

ChristinaLK commented 3 years ago

I suppose that this idea might not fit with the carpentries/git-hub-pages template without modifications, but my way of showing this was to use a different background color for when we are running the docker container from "outside" rather than "dive into it" so that we are actually looking inside the container file system. You can see how this looks in my Docker lessons from last year:

DOCKER – BEGINNER FOR BIOLOGISTS https://bcrf.biochem.wisc.edu/docker-beginner-for-biologists/

You can take a quick look at this slide for the idea with 3 colors: https://static-bcrf.biochem.wisc.edu/tutorials/docker/docker_ioslides_01.html#10

This slide with 4 colors (one for alternate Terminal) https://static-bcrf.biochem.wisc.edu/tutorials/docker/docker_ioslides_04.html#22

Originally posted by @jsgro in https://github.com/carpentries-incubator/docker-introduction/issues/53#issuecomment-742851236

ChristinaLK commented 3 years ago

I think it would be great to indicate a different term/callout/special box type with different colors for the container versus host terminal!

That might be a request for the lesson infrastructure/styles team...

tobyhodges commented 3 years ago

You could add custom CSS classes for codeblock-green, codeblock-yellow, etc. You would need to override the styling in the remote theme to do so, which means adding the assets directory back into this repository.

ChristinaLK commented 3 years ago

Thanks Toby!

tobyhodges commented 3 years ago

No problem. Feel free to ping me if you'd like more guidance on the specifics.

jsgro commented 3 years ago

I assume that there is a method to implement this specifically for the github-pages system used. I'll just mentioned that for my tutorials I had to struggle with figuring out how to create a relevant CSS (and in addition how to make the color "stick" if printing to PDF - hint: add important! in the CSS definition.) In these the code chuncks were defined by <div> which is OK but restrictive.

LATER I found that in fact this coloring option exists in RMarkdown so this is what I would use now. It is detailed on this link: https://bookdown.org/yihui/rmarkdown-cookbook/chunk-styling.html

Of course I realize that GitHub pages are not Rmd... but it could be of help (or not!) for this.

tobyhodges commented 3 years ago

I did not know this, thanks for the link @jsgro! The lesson template does support episodes written in RMarkdown but it would be some work to convert the existing material.

sstevens2 commented 3 years ago

I think we should wait to implement this change until after we've moved to the new theme.