syntax highlighting

README.md

@@ -26,10 +26,12 @@ You can find the css and js files here: https://github.com/sezanzeb/Hippo/tree/m
 
 ### Minimal Working Example
 
+```html
  <link rel="stylesheet" href="hippo-gallery.css" type="text/css">
  <script src="hippo-gallery.js"></script> 
 
  <img zoom="full.jpg" src="thumbnail.jpg"/>
+```
 
 Just take care of setting the href, zoom and src attributes according to your project
 
@@ -39,40 +41,46 @@ Just take care of setting the href, zoom and src attributes according to your pr
 
 will display "click here" on your website. Clicking it will open an image (when the zoom attribute was set correctly)
 
+```html
  <link rel="stylesheet" href="hippo-gallery.css" type="text/css">
  <script src="hippo-gallery.js"></script> 
 
  <img zoom="full.jpg" alt="click here"/>
-
+```
 
 style it the way you like using the following css:
 
+```css
  img[zoom][alt]:not([src])
  {
  color: #ee3388;
  text-decoration: underline;
  cursor: pointer;
  }
+```
 
 <br/>
 
 ### Captions and Categories
 
 Activates navigation using arrow keys or the buttons on the top left and top right of the lightbox
 
+```html
  <link rel="stylesheet" href="hippo-gallery.css" type="text/css">
  <script src="hippo-gallery.js"></script>
 
  <img category="category1" zoom="pic1.jpg" src="preview1.jpeg" caption="caption1"/>
  <img category="category2" zoom="pic2.jpg" src="preview2.jpeg" caption="caption2"/>
  <img category="category2" caption="caption3" zoom="pic3.jpg" alt="click here"/>
+```
 
 <br/>
 
 ### Displaying HTML Content Inside the Lightbox 
 
 Displays text, tables, anything that fits into the div "hippo-zoomContent-content" as shown below inside the lightbox.
 
+```html
  <link rel="stylesheet" href="hippo-gallery.css" type="text/css">
  <script src="hippo-gallery.js"></script>
 
@@ -92,12 +100,15 @@ Displays text, tables, anything that fits into the div "hippo-zoomContent-conten
  </div>
 
 <br/>
+```
 
 #### Click on a Div to Open an Image
 
 Creates a clickable div that opens the lightbox and shows an image
 
+```html
  <link rel="stylesheet" href="hippo-gallery.css" type="text/css">
  <script src="hippo-gallery.js"></script>
 
  <div category="examplegroup" zoom="full.jpg" caption="Foo Bar"/>this is a div that will open an image</div>
+```