protocol: improved sniffing code blocks

docs/debugger-protocol.html

@@ -51,7 +51,7 @@
     The tip-of-tree protocol is more readable in the <a href="http://chromedevtools.github.io/debugger-protocol-viewer/">debugger protocol viewer</a>.
   
 <h4>Sniffing the protocol</h4>
-  <p>You can inspect how the Chrome DevTools uses the protocol. Especially handy when looking up newer features. First, run Chrome with the debugging port open: <code>/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --remote-debugging-port=9222 http://localhost:9222 http://chromium.org</code>.  Then, select the Chromium Projects item in the <em>Inspectable Pages</em> list. Now that DevTools is up and fullscreen, open DevTools to inspect it. Cmd-R in the new inspector to make the first restart. Now head to Network Panel, filter by Websocket, select the connection and click the Frames tab. Now you can easily see the frames of WebSocket activity as you use the first instance of the DevTools. </p>
+  <p>You can inspect how the Chrome DevTools uses the protocol. Especially handy when looking up newer features. First, run Chrome with the debugging port open: <pre><code>/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --remote-debugging-port=9222 http://localhost:9222 http://chromium.org</code></pre> Then, select the Chromium Projects item in the <em>Inspectable Pages</em> list. Now that DevTools is up and fullscreen, open DevTools to inspect it. Cmd-R in the new inspector to make the first restart. Now head to Network Panel, filter by Websocket, select the connection and click the Frames tab. Now you can easily see the frames of WebSocket activity as you use the first instance of the DevTools. </p>
 
   <figure class="screenshot"> <a href="debugger-protocol/debugger-protocol-sniffing-full.jpg"><img src="debugger-protocol/debugger-protocol-sniffing.jpg" alt="Sniffing the debugger protocol" /></a></figure>
 </div>
@@ -67,14 +67,12 @@
   </p>
 
   <pre class="summary">
-    chrome.exe --remote-debugging-port=9222
-  </pre>
+    chrome.exe --remote-debugging-port=9222</pre>
 
   <p>Then you can start a <i>client</i> Chrome instance, using a separate user profile:</p>
 
   <pre class="summary">
-    chrome.exe --user-data-dir=&lt;some directory&gt;
-  </pre>
+    chrome.exe --user-data-dir=&lt;some directory&gt;</pre>
 
   <p>And now you can navigate to the given port from your <i>client</i> and attach to
     any of the discovered tabs for debugging: <a href="http://localhost:9222">http://localhost:9222</a>