using marked.js

EFN · Aug 12, 2012 · 48816b7 · 48816b7
1 parent 218f7ed
commit 48816b7
Show file tree

Hide file tree

Showing 10 changed files with 384 additions and 252 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,16 @@
+# Strapdown - Beautifully simple Markdown documentation
+
+Strapdown provides conveninent CSS and JavaScript to generate Bootstrap-beautiful Markdown documents directly in the browser. You write one simple HTML file, and you're done.
+
+For a user guide, please visit:
+
++ http://strapdownnow.com
+
+## Contributor guide
+
+You will need Node.js (>0.6.x) and CoffeeScript to generate the bundles:
+
+```
+$ npm install
+$ coffee bundle
+```
diff --git a/assets/strapdown.css b/assets/strapdown.css
@@ -69,6 +69,7 @@ This chunk is to fix Bootstrap so that Markdown looks good
 
 body {
   margin-top: 60px;
+  margin-bottom: 30px;
   font-size: 15px;
 }
 
@@ -82,3 +83,11 @@ pre {
   margin-bottom: 20px;
 }
 
+#markdown {
+  display: none;
+}
+
+img {
+  margin-top:10px;
+  margin-bottom:10px;
+}
diff --git a/assets/strapdown.js b/assets/strapdown.js
diff --git a/bootswatch.png b/bootswatch.png
diff --git a/bundle.coffee b/bundle.coffee
@@ -8,14 +8,9 @@ if not test '-d', buildDir
 
 # JS
 bundle = ''
-bundle += (cat 'vendor/showdown.min.js') + '\n'
+bundle += (cat 'vendor/marked.min.js') + '\n'
 bundle += (cat 'vendor/prettify.min.js') + '\n'
 bundle += (cat 'src/strapdown.js') + '\n'
 bundle.to buildDir + '/strapdown.js'
 
-# CSS
-bundle = ''
-bundle += (cat 'src/strapdown.css') + '\n'
-bundle.to buildDir + '/strapdown.css'
-
 console.log "Bundles generated in #{buildDir}/"
diff --git a/index.html b/index.html
@@ -1,51 +1,69 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="utf-8">
-
-  <!--====================================================================
-    Step 1: Change the title 
-  ====================================================================== -->
-  <title>Strapdown - Beautifully simple Markdown documentation</title>
-
-  <!--====================================================================
-    Step 2: Choose the theme
-  ====================================================================== -->
-  <link href="assets/themes/united.min.css" rel="stylesheet">
-
-  <link href="assets/strapdown.css" rel="stylesheet">
+<meta charset="utf-8">
+<title>Strapdown - Hassle-free Markdown documentation</title>
+<link href="assets/themes/united.min.css" rel="stylesheet">  
+<link href="assets/strapdown.css" rel="stylesheet">
 </head>
 <body>
 
-<!--====================================================================
-  Step 3: Write your Markdown
-====================================================================== -->
-<textarea id="markdown" style="display:none;">
+<textarea id="markdown">
 # Strapdown
 
-This is something else
+Strapdown lets you instantly create Bootstrap-themed Markdown documents that are rendered directly in the browser - no server-side compilation necessary. Use it to document your projects, create tutorials, home pages, etc. (This very page was written with Strapdown).
+
+### Using it
+
+Simply copy and paste the HTML code below and modify the three indicated steps - can't get any easier than this:
 
 ```html
- <script>alert('hi')</script>
-```
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
 
-```coffeescript
-class Animal
-  constructor: (@name) ->
-  move: (meters, loc) ->
-    alert @name + " moved " + meters + "m."
-  travel: (path...) ->
-    for place in path
-      @move place.distance, place.location
+<!-- Step 1: Change title -->
+<title>Hello Strapdown</title>
 
+<!-- Step 2: Choose a theme -->
+<link href="assets/themes/united.min.css" rel="stylesheet">
+
+<link href="assets/strapdown.css" rel="stylesheet">
+</head>
+<body>
+
+<!-- Step 3: Write your Markdown! -->
+<xmp id="markdown">
+# Hello, from Strapdown
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+et dolore magna aliqua. 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="assets/strapdown.js"></script>
+</body>
 ```
 
-And this too
+### Themes
+
+Themes from [Bootswatch.com](http://bootswatch.com) are included in `assets/` for your convenience. Simply replace the appropriate CSS `<link>` to point to one of the included themes:
+
+![Bootswatch](bootswatch.png)
+
+### Features
+
++ Search-engine friendly
++ Zero installs
++ Github-style syntax highlighting
++ Themeable
 
-## Features
+### Caveats
 
-+ Content is search-engine friendly
-+ Easily skinnable: Choose from several provided themes
+Because Strapdown uses an `<xmp>` element to wrap your Markdown, your Markdown can't contain the closing tag `</xmp>`. That's the only tag that needs to be avoided.
 
 </textarea>
 <script src="assets/strapdown.js"></script>

diff --git a/src/strapdown.css b/src/strapdown.css
diff --git a/src/strapdown.js b/src/strapdown.js
@@ -10,9 +10,8 @@ var title = titleEl.innerHTML;
 
 document.getElementById('headline').innerHTML = title;
 
-// Generate Markdown
-var converter = new Showdown.converter();
-var html = converter.makeHtml(markdown);
+// // Generate Markdown
+var html = marked(markdown);
 document.getElementById('content').innerHTML = html;
 
 // Prettify