From e228e9903b872c437f2a1d3dac54b392995ff639 Mon Sep 17 00:00:00 2001
From: Yoav Weiss <yoav@yoav.ws>
Date: Sat, 29 Sep 2012 23:09:59 +0200
Subject: [PATCH] Code blocks should now be blocks

---
 UseCaseComparisons.md | 44 +++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/UseCaseComparisons.md b/UseCaseComparisons.md
index 9f3c0f73..015cef19 100644
--- a/UseCaseComparisons.md
+++ b/UseCaseComparisons.md
@@ -4,27 +4,27 @@ This document is indended to address the use cases addressed by both the `pictur
 Assuming three image “breakpoints” based on maximum widths, using pixel-based values: 400px, 600px, and 800px. The smallest image source has been designated as fallback content.
 
 **`picture` Element*
-`<picture>
+```<picture>
     <source media="max-width: 400px" src="image1.jpg">
     <source media="max-width: 600px" src="image2.jpg">
     <source media="max-width: 800px" src="image3.jpg">
     <img src="image1.jpg" alt="">
-</picture>`
+</picture>```
 
 **Extended `srcset`**
-`<img src="image1.jpg" srcset="image1.jpg, image1.jpg 400w, image2.jpg 600w" alt="">`
+```<img src="image1.jpg" srcset="image1.jpg, image1.jpg 400w, image2.jpg 600w" alt="">```
 
 
 ### Using min-width ###
 Assuming three image “breakpoints” intended to remain in sync with a media-query-based CSS layout making use of `min-width` media queries.
 
 **`picture` Element**
-`<picture>
+```<picture>
     <source media="min-width: 400px" src="image1.jpg">
     <source media="min-width: 600px" src="image2.jpg">
     <source media="min-width: 800px" src="image3.jpg">
     <img src="image1.jpg" alt="">
-</picture>`
+</picture>```
 
 **Extended `srcset`**
 N/A
@@ -34,19 +34,19 @@ N/A
 Assuming three image “breakpoints” intended to remain in sync with a media-query-based layout specced in `em` units.
 
 **`picture` Element**
-`<picture>
+```<picture>
     <source media="max-width: 20em" src="image1.jpg">
     <source media="max-width: 40em" src="image2.jpg">
     <source media="max-width: 60em" src="image3.jpg">
     <img src="image1.jpg" alt="">
-</picture>`
+</picture>```
 
 **Extended `srcset`**
 N/A
 
 Note: the `em` values above could be manually converted to `px` by the author to ensure that the image breakpoints are within a few pixels of the `em`-based layout media queries, resulting in:
 
-`<img src="image1.jpg" srcset="image1.jpg 320w, image1.jpg 640w, image2.jpg 960w" alt="">`
+```<img src="image1.jpg" srcset="image1.jpg 320w, image1.jpg 640w, image2.jpg 960w" alt="">```
 
 While the `em`-based CSS layout will be reevaulated based on user zoom in all modern browsers (see http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ for a description and functional example) and we can assume the same for the `em`-based image breakpoints, the `px`-based image breakpoints will fall out of sync with the layout when the user zooms in or out.
 
@@ -54,11 +54,11 @@ While the `em`-based CSS layout will be reevaulated based on user zoom in all mo
 [ … ]
 
 **`picture` Element**
-`<picture>
+```<picture>
     <source media="device-orientation: portrait" src="image1.jpg">
     <source media="device-orientation: landscape" src="image2.jpg">
     <img src="image1.jpg" alt="">
-</picture>`
+</picture>```
 
 **Extended `srcset`**
 N/A
@@ -68,40 +68,40 @@ N/A
 The two proposals are functionally identical in terms of dealing with display density when independent of the “Viewport Sizes” use case:
 
 **`picture` Element**
-`<picture>
+```<picture>
     <source srcset="image1.jpg, image2.jpg 2x">
     <img src="image1.jpg" alt="">
-</picture>`
+</picture>```
 
 **Extended `srcset`**
-`<img src="image1.jpg" srcset="image2.jpg 2x">`
+```<img src="image1.jpg" srcset="image2.jpg 2x">```
 
 
 ## Display density in conjunction with viewport sizing ##
 Assuming three image “breakpoints” based on maximum widths, using pixel-based values: 400px, 600px, and 800px. The smallest standard resolution image source has been designated as fallback content.
 
 **`picture` Element**
-`<picture>
+```<picture>
     <source media="max-width: 400px" srcset="image1.jpg, image1-hd.jpg 2x">
     <source media="max-width: 600px" srcset="image2.jpg, image2-hd.jpg 2x">
     <source media="max-width: 800px" srcset="image3.jpg, image3-hd.jpg 2x">
     <img src="image1.jpg" alt="">
-</picture>`
+</picture>```
 
 **Extended `srcset`**
-`<img src="image1.jpg" srcset="image1.jpg 400w, image1-hd.jpg 400w 2x, image2.jpg 600w, image2-hd.jpg 600w 2x, image3.jpg 800w, image3-hd.jpg 800w 2x" alt="">`
+```<img src="image1.jpg" srcset="image1.jpg 400w, image1-hd.jpg 400w 2x, image2.jpg 600w, image2-hd.jpg 600w 2x, image3.jpg 800w, image3-hd.jpg 800w 2x" alt="">```
 
 
 ## Print sources
 Assuming two image sources indended for display on screen depending on window size, each with a standard and high-definition source, and a single image source intended for printing.
 
 **`picture` Element**
-`<picture>
+```<picture>
     <source media="(screen and min-width: 20em)" srcset="image1.jpg, image1-hd.jpg 2x">
     <source media="(screen and min-width: 40em)" srcset="image2.jpg, image2-hd.jpg 2x">
     <source media="print" src="image3.jpg">
     <img src="image1.jpg" alt="">
-</picture>`
+</picture>```
 
 **Extended `srcset`**
 N/A
@@ -110,11 +110,11 @@ N/A
 This is based on the high-contrast mode and ambient light media queries currently being proposed in the CSS WG.
 
 **`picture` Element**
-`<picture>
+```<picture>
     <source media="" srcset="image1.jpg">
     <source media="" srcset="image2.jpg">
     <img src="image1.jpg" alt="">
-</picture>`
+</picture>```
 
 **Extended `srcset`**
 N/A
@@ -129,11 +129,11 @@ N/A
 ## Potential for addressing new image formats
 
 **`picture` Element**
-`<picture>
+```<picture>
     <source src="image2.webp" type="image/webp">
     <source src="image1.jpg">
     <img src="image1.jpg" alt="">
-</picture>`
+</picture>```
 
 **Extended `srcset`**
 N/A