Prevent the program (source code) from extending beyond the display area with google-code-prettify

Hello, this is naouniverse ( @naouniverse708 ).

previous article,

Install google-code-prettify and post the program (source code) on your blog

google-code-prettify but after migrating my blog to WordPress, a situation occurred where the source code protruded.

To avoid this, we made some modifications.

<link rel="stylesheet" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" media="screen" /> <script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ prettyPrint(); }); </script> <style type="text/css"> pre.prettyprint { background-color: rgb(248, 248, 248); color: gray; padding: 0 0 0 3px; overflow: auto; } ol.linenums li { list-style: decimal outside; line-height: 1.5; border-left: solid 3px #6CE26C; padding-left: 3px; margin-left: .7em; background-color: rgb(248, 248, 248); } </style>

inside pre.prettyprint

overflow: auto;

Added.

I think this is a good display.