Formatting .md to correctly use html escaping

BlancosWay · Oct 12, 2015 · 06a79bd · 06a79bd
1 parent 0f8e70a
commit 06a79bd
Show file tree

Hide file tree

Showing 16 changed files with 72 additions and 52 deletions.
diff --git a/builtins/amp-ad.md b/builtins/amp-ad.md
@@ -30,14 +30,14 @@ AMP documents only support ads served via HTTPS.
 
 The `<amp-ad>` requires width and height values to be specified like all
 resources in AMP. It requires a `type` argument that select what ad network is displayed. All `data-*` attributes on the tag are automatically passed as arguments to the code that eventually renders the ad. What `data-` attributes are required for a given type of network depends and must be documented with the ad network.
-
+```html
     <amp-ad width=300 height=250
         type="a9"
         data-aax_size="300x250"
         data-aax_pubname="test123"
         data-aax_src="302">
     </amp-ad>
-
+```
 #### Attributes
 
 **type**
@@ -59,12 +59,12 @@ Optional attribute to pass configuration to the ad as an arbitrarily complex JSO
 #### Placeholder
 
 Optionally `amp-ad` supports a child element with the `placeholder` attribute. If supported by the ad network, this element if shown if no ad is available for this slot.
-
+```html
     <amp-ad width=300 height=250
         type="foo">
       <div placeholder>Have a great day!</div>
     </amp-ad>
-
+```
 #### Supported ad networks
 
 - [A9](../ads/a9.md)

diff --git a/builtins/amp-img.md b/builtins/amp-img.md
@@ -54,7 +54,8 @@ A string that indicates the attribution of the image. E.g. `attribution=“CC co
 
 `amp-img` can be styled directly via CSS properties. Setting a grey background
 placeholder for example could be achieved via:
-
+```css
     amp-img {
       background-color: grey;
     }
+```
diff --git a/builtins/amp-pixel.md b/builtins/amp-pixel.md
@@ -37,69 +37,69 @@ The variables listed under the Substitutions paragraph can be used to interpolat
 Use the special string `$RANDOM` to add a random number to the URL if required.
 
 For instance:
-
+```html
     <amp-pixel src="https://foo.com/pixel?$RANDOM"></amp-pixel>
-
+```
 may make a request to something like `https://foo.com/pixel?0.8390278471201` where the $RANDOM value is randomly generated upon each impression.
 
 **$CANONICAL_URL**
 
 Use the special string `$CANONICAL_URL` to add the canonical URL of the current document to the URL
 
 For instance:
-
+```html
      <amp-pixel src="https://foo.com/pixel?href=$CANONICAL_URL"></amp-pixel>
-
+```
 may make a request to something like `https://foo.com/pixel?href=https%3A%2F%2Fpinterest.com%2F`.
 
 **$CANONICAL_HOST**
 
 Use the special string `$CANONICAL_HOST` to add the canonical URL's host of the current document to the URL
 
 For instance:
-
+```html
      <amp-pixel src="https://foo.com/pixel?host=$CANONICAL_HOST"></amp-pixel>
-
+```
 may make a request to something like `https://foo.com/pixel?host=pinterest.com`.
 
 **$CANONICAL_PATH**
 
 Use the special string `$CANONICAL_PATH` to add the canonical URL's path of the current document to the URL
 
 For instance:
-
+```html
      <amp-pixel src="https://foo.com/pixel?path=$CANONICAL_PATH"></amp-pixel>
-
+```
 may make a request to something like `https://foo.com/pixel?path=%2Fpage1.html`.
 
 **$TITLE**
 
 Use the special string `$TITLE` to add the title of the current document to the URL
 
 For instance:
-
+```html
      <amp-pixel src="https://foo.com/pixel?title=$TITLE"></amp-pixel>
-
+```
 may make a request to something like `https://foo.com/pixel?title=Breaking%20News`.
 
 **$AMPDOC_URL**
 
 Use the special string `$AMPDOC_URL` to add the AMP document's URL.
 
 For instance:
-
+```html
      <amp-pixel src="https://foo.com/pixel?ref=$AMPDOC_URL"></amp-pixel>
-
+```
 may make a request to something like `https://foo.com/pixel?ref=https%3A%2F%2Fexample.com%2F`.
 
 **$AMPDOC_HOST**
 
 Use the special string `$AMPDOC_HOST` to add the AMP document's URL host.
 
 For instance:
-
+```html
      <amp-pixel src="https://foo.com/pixel?host=$AMPDOC_HOST"></amp-pixel>
-
+```
 may make a request to something like `https://foo.com/pixel?host=example.com`.
 
 #### Styling

diff --git a/builtins/amp-video.md b/builtins/amp-video.md
@@ -33,7 +33,7 @@ One or zero immediate child nodes can have the `placeholder` attribute. If prese
 One or zero immediate child nodes can have the `fallback` attribute. If present, this node and its children form the content that will be displayed if HTML5 video is not supported on the user’s browser.
 
 For example:
-
+```html
     <amp-video width=400 height=300 src=”https://yourhost.com/videos/myvideo.mp4”>
       <amp-img placeholder width=400 height=300 src=”myvideo-poster.jpg”></amp-img>
       <div fallback>
@@ -42,7 +42,7 @@ For example:
       <source type="video/mp4" src="foo.mp4">
       <source type="video/webm" src="foo.webm">
     </amp-video>
-
+```
 #### Attributes
 
 **src**

diff --git a/docs/include_features.md b/docs/include_features.md
@@ -52,17 +52,17 @@ using the [`amp-img`](../builtins/amp-img.md) element.
 * Recommended: include a placeholder in case the image resource fails to load.
 
 Responsive image example:
-
+```html
     <amp-img src="responsive.jpg" width=527 height=193 layout="responsive" ></amp-img>
-
+```
 Fixed-size image example:
-
+```html
     <amp-img id="img1" src="fixed.jpg" width=264 height=96></amp-img>
-
+```
 Hidden image example:
-
+```html
     <amp-img id="img2" src="hidden.jpg" width=527 height=193 layout="nodisplay"></amp-img>
-
+```
 The AMP HTML runtime can effectively manage image resources,
 choosing to delay or prioritize resource loading
 based on the viewport position, system resources, connection bandwidth, or other factors.
@@ -71,11 +71,11 @@ If the resource requested by the `amp-img` component fails to load,
 the space will be blank.
 Set a placeholder background color or other visual
 using a CSS selector and style on the element itself:
-
+```css
     amp-img {
       background-color: grey;
     }
-
+```
 ## Include an animated image
 
 Include an animated image in your page
@@ -95,12 +95,12 @@ first include the following script to the `<head>`:
 The `amp-anim` component can also have an optional placeholder child
 to display while the `src` file is loading.
 The placeholder is specified via the `placeholder` attribute:
-
+```html
     <amp-anim width=400 height=300 src=”my-gif.gif”>
       <amp-img placeholder width=400 height=300 src=”my-gif-screencap.jpg”>
       </amp-img>
     </amp-anim>
-
+```
 ## Embed a Tweet
 
 Embed a Twitter Tweet in your page
@@ -121,12 +121,12 @@ to select the aspect ratio based on screen width.
 
 Example `amp-twitter` from the
 [twitter.amp example](../examples/twitter.amp.html):
-
+```html
     <amp-twitter width=390 height=50
         layout="responsive"
         data-tweetid="638793490521001985">
     </amp-twitter>
-
+```
 
 <!--## Embed an Instagram
 
@@ -162,15 +162,15 @@ at a time determined by the AMP HTML runtime.
 
 Include a placeholder before the video starts, and a fallback,
 if the browser doesn't support HTML5 video, for example:
-
+```html
     <amp-video width=400 height=300 src=”https://yourhost.com/videos/myvideo.mp4”>
 
       <amp-img placeholder width=400 height=300 src=”myvideo-poster.jpg”></amp-img>
 	  <div fallback>
 		<p>Your browser doesn’t support HTML5 video</p>
 	  </div>
     </amp-video>
-
+```
 ## Include a youtube video
 
 Include a youtube video in your page
@@ -187,13 +187,13 @@ For example, in https://www.youtube.com/watch?v=Z1q71gFeRqM,
 Z1q71gFeRqM is the video id.
 
 Use `layout="responsive"` to yield correct layouts for 16:9 aspect ratio videos:
-
+```html
     <amp-youtube
         video-id="mGENRKrdoGY"
         layout="responsive"
         width="480" height="270">
     </amp-youtube>
-
+```
 ## Include an audio resource
 
 Include an audio resource in your page,
@@ -212,15 +212,15 @@ at a time determined by the AMP HTML runtime.
 
 Include a placeholder before the audio starts, and a fallback,
 if the browser doesn't support HTML5 audio, for example:
-
+```html
     <amp-audio width=400 height=300 src=”https://yourhost.com/audios/myaudio.mp3”>
       <div fallback>
         <p>Your browser doesn’t support HTML5 audio</p>
       </div>
       <source type="audio/mpeg" src="foo.mp3">
       <source type="audio/ogg" src="foo.ogg">
     </amp-audio>
-
+```
 # Count user page views
 
 Count user page views
@@ -238,9 +238,9 @@ where the $RANDOM value is randomly generated upon each impression.
 
 An example `amp-pixel` from the
 [everything.amp example](https://github.com/ampproject/amphtml/blob/master/examples/everything.amp.html):
-
+```html
     <amp-pixel src="https://pubads.g.doubleclick.net/activity;dc_iu=/12344/pixel;ord=$RANDOM?"></amp-pixel>
-
+```
 # Monetization through ads
 
 The following ad networks are supported in AMP HTML pages:
@@ -265,22 +265,23 @@ and executes the ad network’s JS inside that iframe sandbox.
 You must specify the ad width and height, and the ad network type.
 The `type` identifies the ad network's template.
 Different ad types require different `data-*` attributes.
-
+```html
     <amp-ad width=300 height=250
         type="a9"
         data-aax_size="300x250"
         data-aax_pubname="test123"
         data-aax_src="302">
     </amp-ad>
-
+```
 If supported by the ad network,
 include a `placeholder`
 to be shown if no ad is available:
-
+```html
     <amp-ad width=300 height=250
         type="a9"
         data-aax_size="300x250"
         data-aax_pubname="test123"
         data-aax_src="302">
         <div placeholder>Have a great day!</div>
     </amp-ad>
+```
diff --git a/extensions/amp-anim/amp-anim.md b/extensions/amp-anim/amp-anim.md
@@ -23,12 +23,12 @@ A runtime-managed animated image - most typically a GIF.
 The `amp-anim` component is very similar to the `amp-image` element, and provides additional functionality to manage loading and playing of animated images such as GIFs.
 
 The `amp-anim` component can also have an optional placeholder child, to display while the `src` file is loading. The placeholder is specified via the `placeholder` attribute:
-
+```html
     <amp-anim width=400 height=300 src=”my-gif.gif”>
       <amp-img placeholder width=400 height=300 src=”my-gif-screencap.jpg”>
       </amp-img>
     </amp-anim>
-
+```
 #### Attributes
 
 **src**
@@ -54,7 +54,8 @@ A string that indicates the attribution of the image. E.g. `attribution=“CC co
 
 `amp-img` can be styled directly via CSS properties. Setting a grey background
 placeholder for example could be achieved via:
-
+```css
     amp-anim {
       background-color: grey;
     }
+```
diff --git a/extensions/amp-audio/amp-audio.md b/extensions/amp-audio/amp-audio.md
@@ -33,14 +33,15 @@ One or zero immediate child nodes can have the `placeholder` attribute. If prese
 One or zero immediate child nodes can have the `fallback` attribute. If present, this node and its children form the content that will be displayed if HTML5 audio is not supported on the user’s browser.
 
 For example:
-
+```html
     <amp-audio width=400 height=300 src=”https://yourhost.com/audios/myaudio.mp3”>
       <div fallback>
         <p>Your browser doesn’t support HTML5 audio</p>
       </div>
       <source type="audio/mpeg" src="foo.mp3">
       <source type="audio/ogg" src="foo.ogg">
     </amp-audio>
+```
 
 #### Attributes
 

diff --git a/extensions/amp-carousel/amp-carousel.md b/extensions/amp-carousel/amp-carousel.md
@@ -25,12 +25,13 @@ Each of the `amp-carousel` component’s immediate children is considered an ite
 The carousel consists of an arbitrary number of items, as well as optional navigational arrows to go forward or backwards a single item.
 
 The carousel advances between items if the user swipes, uses arrow keys, clicks an optional navigation arrow.
-
+```html
     <amp-carousel width=300 height=400>
       <amp-img src=”my-img1.png” width=300 height=400></amp-img>
       <amp-img src=”my-img2.png” width=300 height=400></amp-img>
       <amp-img src=”my-img3.png” width=300 height=400></amp-img>
     </amp-carousel>
+```
 
 Note, that while the example shows a carousel of images `amp-carousel` support arbitrary children.
 

diff --git a/extensions/amp-fit-text/amp-fit-text.md b/extensions/amp-fit-text/amp-fit-text.md
@@ -34,12 +34,13 @@ The `amp-fit-text` accepts one of the following `layout` values: `fixed`,
 `fixed-height`, `responsive` or `fill`.
 
 For example:
-
+```html
     <amp-fit-text width="300" height="200" layout="responsive"
         max-font-size="52">
       Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
       inermis reprehendunt.
     </amp-fit-text>
+```
 
 
 #### Attributes

diff --git a/extensions/amp-iframe/amp-iframe.md b/extensions/amp-iframe/amp-iframe.md
@@ -26,12 +26,14 @@ Displays an iframe.
 - They must not be in the same origin as the container unless they do not allow `allow-same-origin` in the sandbox attribute.
 
 Example:
+```html
     <amp-iframe width=300 height=300
         sandbox="allow-scripts"
         layout="responsive"
         frameborder="0"
         src="https://foo.com/iframe">
     </amp-iframe>
+```
 
 #### Attributes