First commit

slhck · Jun 26, 2011 · 9390914 · 9390914
commit 9390914
Show file tree

Hide file tree

Showing 9 changed files with 1,537 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,67 @@
+body {
+
+  font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
+  font-size: 13px;
+  margin-left: 20px;
+  color: #333;
+
+}
+
+#container {
+  margin-top:30px;
+  width:1200px;
+}
+
+#editor {
+  float:left;
+}
+
+#tools {
+  margin-top:20px;
+}
+
+#tools .toolbutton {
+  border: 1px solid #999;
+  background-color: #eee;
+  display:block;
+  width: auto;
+  float:left;
+  border-radius:8px;
+}
+
+#preview {
+  float: left;
+  min-height:400px;
+  margin-left:50px;
+  padding: 20px;
+  width:500px;
+  border-left:1px solid #999;
+}
+
+preview p {
+  text-align:justify;
+  width:500px;
+  overflow: scroll;
+}
+
+blockquote {
+  margin-left:5px;
+  background-color:#eee;
+  padding:1px;
+  padding-left:5px;
+  border-left:1px solid #999;
+  text-align:justify;
+}
+
+code, pre {
+	font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
+  background-color:#eee;
+}
+
+pre {
+  padding:3px;
+  display:block;
+}
+
+
+
diff --git a/css/theme-balupton.css b/css/theme-balupton.css
@@ -0,0 +1,44 @@
+.prettyprint.theme-balupton {
+	font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
+}
+.prettyprint.theme-balupton .com {
+	color: #008200; /* balupton green */
+}
+.prettyprint.theme-balupton .lit {
+	color: #066; /* google green */
+}
+.prettyprint.theme-balupton.lang-html .lit {
+	/* CSS Property Value */
+	color: #066; /* google green */
+}
+.prettyprint.theme-balupton.lang-html .kwd {
+	/* CSS Property Value Keyword */
+	color: #066; /* google green */
+	font-weight:bold;
+}
+.prettyprint.theme-balupton.lang-html .atv + .pln,
+.prettyprint.theme-balupton.lang-html .pun + .pln {
+	/* CSS Property Name */
+	color: blue;
+}
+.prettyprint.theme-balupton .atv,
+.prettyprint.theme-balupton .str {
+	color: blue;
+}
+.prettyprint.theme-balupton .atn {
+	color: gray;
+}
+.prettyprint.theme-balupton .pln {
+	color: black;
+}
+.prettyprint.theme-balupton .pun {
+	color: #666;
+}
+.prettyprint.theme-balupton .typ {
+	color: #606;
+}
+.prettyprint.theme-balupton .tag,
+.prettyprint.theme-balupton .kwd {
+	color: #006699;
+	font-weight: bold;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+  <head>
+    <title>online markdown editor</title>
+    <!-- Styles -->
+    <link type="text/css" rel="stylesheet" href="wmd/wmd.css"/>
+    <link type="text/css" rel="stylesheet" href="css/style.css"/>
+    <link type="text/css" rel="stylesheet" href="css/theme-balupton.css"/>
+
+    <!-- jQuery and Syntax Highlight -->
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+    <script type="text/javascript" src="http://github.com/balupton/jquery-syntaxhighlighter/raw/master/scripts/jquery.syntaxhighlighter.min.js"></script>
+    <script type="text/javascript">
+
+    </script>
+
+    <!-- WMD -->
+    <script type="text/javascript" src="wmd/showdown.js"></script>
+    <script type="text/javascript" src="wmd/wmd.js"></script>
+
+    <!-- Additional scripts -->
+    <script type="text/javascript" src="js/select.js"></script>
+
+    <!-- jQuery listener for syntax highlight -->
+    <script type="text/javascript">
+    $(document).ready(function() {
+      $("#highlightCode").click(function(){
+        $.SyntaxHighlighter.init({
+        'lineNumbers': false,
+        'debug': true
+        });
+      });
+    });
+    </script>
+
+    <!-- Initialize WMD -->
+    <script type="text/javascript">
+    window.onload = function() {
+      new WMD("input", "toolbar", { preview: "preview" });
+    };
+    </script>
+
+  </head>
+  <body>
+
+    <h1>online markdown editor</h1>
+    <div id="intro">based on <a href="http://github.com/innocead/wmd">wmd</a> // uses <a href="http://balupton.com/projects/jquery-syntaxhighlighter">jQuery syntax highlighter</a> // current <a href="issues.html">issues</a></div>
+
+    <div id="container">
+      <div id="editor">
+        <div id="toolbar" class="wmd-toolbar"></div>
+        <textarea id="input" class="wmd-input" rows="30" cols="80"></textarea>
+        <div id="tools">
+          <button id="highlightCode" class="toolbutton">Highlight Code</button>
+          <button id="selectall" class="toolbutton" onclick="selectAll();">Select all preview text</button>
+        </div>
+      </div>
+      <div id="preview" class="wmd-preview">
+      </div>
+    </div>
+
+  </body>
+</html>
+
diff --git a/issues.html b/issues.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+  <head>
+    <title>online markdown editor - issues</title>
+    <!-- Styles -->
+    <link type="text/css" rel="stylesheet" href="css/style.css"/>
+  </head>
+  <body>
+
+    <h1>issues</h1>
+    <ul>
+      <li>wrapping of lines that are too long doesn't work</li>
+    </ul>
+
+  </body>
+</html>
+
diff --git a/js/select.js b/js/select.js
@@ -0,0 +1,22 @@
+// Selects all the preview text
+function selectAll() {
+  selectElementText(document.getElementById("preview"));
+}
+
+// http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse/2838358#2838358
+function selectElementText(el, win) {
+    win = win || window;
+    var doc = win.document, sel, range;
+    if (win.getSelection && doc.createRange) {
+        sel = win.getSelection();
+        range = doc.createRange();
+        range.selectNodeContents(el);
+        sel.removeAllRanges();
+        sel.addRange(range);
+    } else if (doc.body.createTextRange) {
+        range = doc.body.createTextRange();
+        range.moveToElementText(el);
+        range.select();
+        range.execCommand("Copy");
+    }
+}