I do kind of like the idea of automatically reformatting the code based on the media size, but the devil seems to be in the details. In my experience, code formatters can sometimes backfire and make the code harder to read. There's usually an escape hatch via special comments in the code, but those would appear in the final rendering and add noise to the presentation, which is unacceptable. Thus, I didn't pursue that idea, and instead I ended up manually breaking my code samples at 64 columns or so. There can still be some horizontal scrolling on very small screens, but hopefully it's tolerable. I also made sure each individual code block gets its own scroll bar and not the whole page, so you wouldn't need to constantly scroll the whole page back and forth to check for overflowed content.
I have other thoughts on this, but I don't want to go too far afield. Anyway, I think it's an interesting problem and one that's worth solving.
I do kind of like the idea of automatically reformatting the code based on the media size, but the devil seems to be in the details. In my experience, code formatters can sometimes backfire and make the code harder to read. There's usually an escape hatch via special comments in the code, but those would appear in the final rendering and add noise to the presentation, which is unacceptable. Thus, I didn't pursue that idea, and instead I ended up manually breaking my code samples at 64 columns or so. There can still be some horizontal scrolling on very small screens, but hopefully it's tolerable. I also made sure each individual code block gets its own scroll bar and not the whole page, so you wouldn't need to constantly scroll the whole page back and forth to check for overflowed content.
I have other thoughts on this, but I don't want to go too far afield. Anyway, I think it's an interesting problem and one that's worth solving.