Reduce width and show scrollbar

Please see this page: you can see the same code snippet twice: once embedded via GitHub Gist and in the second part via Jekyll’s internal syntax highlighter Rouge.

I’m trying to style the second code snippet similar to the GitHub Gist. I’m making progress, but I don’t know how to reduce the width of the second code snippet via CSS. It should have the same width as the surrounding blog content (like the GitHub Gist) and show a horizontal scroll bar.

How can I reduce the width of the code snippet via CSS and display a horizontal scroll bar?

Thx!

>Solution :

You can set the width to 100% to fill the surrounding blog content and use the overflow-x property to display a horizontal scroll bar.

.highlight {
    width: 100%;
    overflow-x: scroll;
}

You can use overflow-x: auto; instead of overflow-x: scroll; to let the browser decide when to display a horizontal scrollbar, e.g. when content is overflowing.