1 files changed, 20 insertions, 20 deletions
diff --git a/docs/content/guide/animations.ngdoc b/docs/content/guide/animations.ngdoc
index 1178d774..a9dd6ac6 100644
--- a/docs/content/guide/animations.ngdoc
+++ b/docs/content/guide/animations.ngdoc
@@ -64,11 +64,11 @@ You may also want to setup a separate CSS file for defining CSS-based animations
 Animations in AngularJS are completely based on CSS classes. As long as you have a CSS class attached to a HTML element within
 your website, you can apply animations to it. Lets say for example that we have an HTML template with a repeater in it like so:
 
-<pre>
+```html
 <div ng-repeat="item in items" class="repeated-item">
   {{ item.id }}
 </div>
-</pre>
+```
 
 As you can see, the `.repeated-item` class is present on the element that will be repeated and this class will be
 used as a reference within our application's CSS and/or JavaScript animation code to tell AngularJS to perform an animation.
@@ -80,13 +80,13 @@ it will apply a `ng-move` class name.
 Taking a look at the following CSS code, we can see some transition and keyframe animation code set for each of those events that
 occur when ngRepeat triggers them:
 
-<pre>
-&#47;&#42;
+```css
+/*
   We're using CSS transitions for when
   the enter and move events are triggered
   for the element that has the .repeated-item
   class
-&#42;&#47;
+*/
 .repeated-item.ng-enter, .repeated-item.ng-move {
   -webkit-transition:0.5s linear all;
   -moz-transition:0.5s linear all;
@@ -95,22 +95,22 @@ occur when ngRepeat triggers them:
   opacity:0;
 }
 
-&#47;&#42;
+/*
  The ng-enter-active and ng-move-active
  are where the transition destination properties
  are set so that the animation knows what to
  animate.
-&#42;&#47;
+*/
 .repeated-item.ng-enter.ng-enter-active,
 .repeated-item.ng-move.ng-move-active {
   opacity:1;
 }
 
-&#47;&#42;
+/*
   We're using CSS keyframe animations for when
   the leave event is triggered for the element
   that has the .repeated-item class
-&#42;&#47;
+*/
 .repeated-item.ng-leave {
   -webkit-animation:0.5s my_animation;
   -moz-animation:0.5s my_animation;
@@ -118,34 +118,34 @@ occur when ngRepeat triggers them:
   animation:0.5s my_animation;
 }
 
-&#64;keyframes my_animation {
+@keyframes my_animation {
   from { opacity:1; }
   to { opacity:0; }
 }
 
-&#47;&#42;
+/*
   Unfortunately each browser vendor requires
   its own definition of keyframe animation code...
-&#42;&#47;
-&#64;-webkit-keyframes my_animation {
+*/
+@-webkit-keyframes my_animation {
   from { opacity:1; }
   to { opacity:0; }
 }
 
-&#64;-moz-keyframes my_animation {
+@-moz-keyframes my_animation {
   from { opacity:1; }
   to { opacity:0; }
 }
 
-&#64;-o-keyframes my_animation {
+@-o-keyframes my_animation {
   from { opacity:1; }
   to { opacity:0; }
 }
-</pre>
+```
 
 The same approach to animation can be used using JavaScript code (**jQuery is used within to perform animations**):
 
-<pre>
+```js
 myModule.animation('.repeated-item', function() {
   return {
     enter : function(element, done) {
@@ -199,7 +199,7 @@ myModule.animation('.repeated-item', function() {
     removeClass : function(element, className, done) {}
   }
 });
-</pre>
+```
 
 With these generated CSS class names present on the element at the time, AngularJS automatically
 figures out whether to perform a CSS and/or JavaScript animation. If both CSS and JavaScript animation
@@ -268,7 +268,7 @@ For a full breakdown of the steps involved during each animation event, refer to
 Animations within custom directives can also be established by injecting `$animate` directly into your directive and
 making calls to it when needed.
 
-<pre>
+```js
 myModule.directive('my-directive', ['$animate', function($animate) {
   return function(element, scope, attrs) {
     element.bind('click', function() {
@@ -280,7 +280,7 @@ myModule.directive('my-directive', ['$animate', function($animate) {
     });
   };
 }]);
-</pre>
+```
 
 ## More about animations