arturadib · jackiect · Apr 30, 2015 · Apr 30, 2015 · Apr 30, 2015
diff --git a/index.html b/index.html
@@ -20,85 +20,7 @@
 </head>
 
 <body>
-<textarea theme="united" style="display:none;">
-# Strapdown.js
-
-Strapdown.js makes it embarrassingly simple to create elegant Markdown documents. **No server-side compilation required.** Use it to quickly document your projects, create tutorials, home pages, etc. (For example, the page you are reading was generated by Strapdown).
-
-**Simply copy the HTML template below and drop it on any static file server**:
-
-```html
-<!DOCTYPE html>
-<html>
-<title>Hello Strapdown</title>
-
-<xmp theme="united" style="display:none;">
-# Markdown text goes in here
-
-## Chapter 1
-
-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-et dolore magna aliqua. 
-
-## Chapter 2
-
-Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-culpa qui officia deserunt mollit anim id est laborum.
-</xmp>
-
-<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
-</html>
-```
-
-### Features
-
-+ Search-engine friendly
-+ Cross-browser compatible (tested with mobile Safari, IE 8/9, Firefox, Chrome)
-+ Github-flavored Markdown (tables, syntax highlighting, etc)
-+ Themeable
-
-
-### Themes
-
-Bootstrap themes from [Bootswatch.com](http://bootswatch.com) are included for your convenience. Simply include the attribute `theme` in your `<xmp>` tag with one of the following theme names (default is vanilla Bootstrap):
-
-![Bootswatch](bootswatch.png)
-
-
-### Self-hosting
-
-For convenience the library is hosted at `strapdownjs.com` (as in the source above), but if you prefer to host it yourself make sure to save *all* files contained in `/v/<version_number>`, as the library dynamically loads all necessary stylesheets, etc.
-
-
-### Limitations
-
-It's an unlikely scenario, but since Strapdown uses the `<xmp>` tag to wrap your Markdown (so that users don't have to escape special HTML characters), your text can't contain the string `</xmp>`.
-
-
-### Credits
-
-All credit goes to the projects below that make up most of Strapdown.js:
-
-+ [Marked](https://github.com/chjj/marked/) - Fast Markdown parser in JavaScript
-+ [Google Code Prettify](http://code.google.com/p/google-code-prettify/) - Syntax highlighting in JavaScript
-+ [Twitter Bootstrap](http://twitter.github.com/bootstrap/) - Beautiful, responsive CSS framework
-+ [Bootswatch](http://bootswatch.com) - Additional Bootstrap themes
-
-<hr/>
-<div style="background:#fafaff; min-height:50px; padding:0 5px; margin:0">
-  <div style="float:left;">
-    <img style="width:40px; margin:0; padding-top:5px; margin-right:10px;" src="https://g.twimg.com/Twitter_logo_blue.png"/>
-  </div>
-  <div style="padding-top:15px; padding-bottom:10px;">
-    Follow the author <a href="http://twitter.com/r2r">@r2r</a> on Twitter
-  </div>
-</div>
-
-<a href="https://github.com/arturadib/strapdown"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1000; margin: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-
-</textarea>
-<script src="v/0.2/strapdown.js"></script>
+<xmp src="index.md" theme="united" style="display:none;"></xmp>
+<script src="v/1.0/strapdown.js"></script>
 </body>
 </html>
diff --git a/index.md b/index.md
@@ -0,0 +1,76 @@
+# Strapdown.js
+
+Strapdown.js makes it embarrassingly simple to create elegant Markdown documents. **No server-side compilation required.** Use it to quickly document your projects, create tutorials, home pages, etc. (For example, the page you are reading was generated by Strapdown).
+
+**Simply copy the HTML template below and drop it on any static file server**:
+
+```html
+<!DOCTYPE html>
+<html>
+<title>Hello Strapdown</title>
+
+<xmp theme="united" style="display:none;">
+# Markdown text goes in here
+
+## Chapter 1
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+et dolore magna aliqua. 
+
+## Chapter 2
+
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+culpa qui officia deserunt mollit anim id est laborum.
+</xmp>
+
+<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
+</html>
+```
+
+### Features
+
++ Search-engine friendly
++ Cross-browser compatible (tested with mobile Safari, IE 8/9, Firefox, Chrome)
++ Github-flavored Markdown (tables, syntax highlighting, etc)
++ Themeable
+
+
+### Themes
+
+Bootstrap themes from [Bootswatch.com](http://bootswatch.com) are included for your convenience. Simply include the attribute `theme` in your `<xmp>` tag with one of the following theme names (default is vanilla Bootstrap):
+
+![Bootswatch](bootswatch.png)
+
+
+### Self-hosting
+
+For convenience the library is hosted at `strapdownjs.com` (as in the source above), but if you prefer to host it yourself make sure to save *all* files contained in `/v/<version_number>`, as the library dynamically loads all necessary stylesheets, etc.
+
+
+### Limitations
+
+It's an unlikely scenario, but since Strapdown uses the `<xmp>` tag to wrap your Markdown (so that users don't have to escape special HTML characters), your text can't contain the string `</xmp>`.
+
+
+### Credits
+
+All credit goes to the projects below that make up most of Strapdown.js:
+
++ [Marked](https://github.com/chjj/marked/) - Fast Markdown parser in JavaScript
++ [Google Code Prettify](http://code.google.com/p/google-code-prettify/) - Syntax highlighting in JavaScript
++ [Twitter Bootstrap](http://twitter.github.com/bootstrap/) - Beautiful, responsive CSS framework
++ [Bootswatch](http://bootswatch.com) - Additional Bootstrap themes
+
+<hr/>
+<div style="background:#fafaff; min-height:50px; padding:0 5px; margin:0">
+  <div style="float:left;">
+    <img style="width:40px; margin:0; padding-top:5px; margin-right:10px;" src="https://g.twimg.com/Twitter_logo_blue.png"/>
+  </div>
+  <div style="padding-top:15px; padding-bottom:10px;">
+    Follow the author <a href="http://twitter.com/r2r">@r2r</a> on Twitter
+  </div>
+</div>
+
+<a href="https://github.com/arturadib/strapdown"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1000; margin: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
diff --git a/src/strapdown.js b/src/strapdown.js
@@ -88,7 +88,17 @@
   //
 
   var markdown = markdownEl.textContent || markdownEl.innerText;
-
+
+  var outter_md_src;
+  if (!markdown) {
+    outter_md_src = markdownEl.getAttribute("src");
+    if (!outter_md_src) {
+      console.warn('Embedded Markdown found in this document is invalid! Visit http://strapdownjs.com/ to learn more.');
+    }
+
+    markdown = loadOutterMD(outter_md_src);
+  }
+
   var newNode = document.createElement('div');
   newNode.className = 'container';
   newNode.id = 'content';
@@ -135,3 +145,18 @@
   document.body.style.display = '';
 
 })(window, document);
+
+/*
+ * load Markdown file in synchronized way
+*/
+function loadOutterMD(src){
+  var xhr;
+  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
+  xhr=new XMLHttpRequest();
+  } else {// code for IE6, IE5
+  xhr=new ActiveXObject("Microsoft.XMLHTTP");
+  }
+  xhr.open('GET', src, false);
+  xhr.send();
+  return xhr.responseText;
+}
diff --git a/v/1.0/strapdown.css b/v/1.0/strapdown.css
@@ -0,0 +1,99 @@
+
+/*******************************************************************
+
+This chunk is to fix Bootstrap so that the Markdown output looks good
+
+*******************************************************************/
+
+body {
+  padding-top: 60px;
+  padding-bottom: 40px;
+  font-size: 15px;
+  line-height: 150%;
+}
+
+xmp, textarea {
+  display: none;
+}
+
+h1,h2,h3,h4 {
+  margin: 15px 0;
+}
+
+pre {
+  margin: 20px 0;
+}
+
+img {
+  margin: 10px 0;
+}
+
+.navbar {
+  z-index: 1;
+}
+
+.table {
+  width: auto;
+}
+
+/*******************************************************************
+
+This chunk is for Google's Code Prettify:
+http://google-code-prettify.googlecode.com
+
+*******************************************************************/
+
+
+/* Pretty printing styles. Used with prettify.js. */
+
+/* SPAN elements with the classes below are added by prettyprint. */
+.pln { color: #000 }  /* plain text */
+
+@media screen {
+  .str { color: #080 }  /* string content */
+  .kwd { color: #008 }  /* a keyword */
+  .com { color: #800 }  /* a comment */
+  .typ { color: #606 }  /* a type name */
+  .lit { color: #066 }  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  .pun, .opn, .clo { color: #660 }
+  .tag { color: #008 }  /* a markup tag name */
+  .atn { color: #606 }  /* a markup attribute name */
+  .atv { color: #080 }  /* a markup attribute value */
+  .dec, .var { color: #606 }  /* a declaration; a variable name */
+  .fun { color: red }  /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+  .str { color: #060 }
+  .kwd { color: #006; font-weight: bold }
+  .com { color: #600; font-style: italic }
+  .typ { color: #404; font-weight: bold }
+  .lit { color: #044 }
+  .pun, .opn, .clo { color: #440 }
+  .tag { color: #006; font-weight: bold }
+  .atn { color: #404 }
+  .atv { color: #060 }
+}
+
+/* Put a border around prettyprinted code snippets. */
+pre.prettyprint { padding: 2px; border: 1px solid #888 }
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L5,
+li.L6,
+li.L7,
+li.L8 { list-style-type: none }
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 { background: #eee }
+