首頁 探索 說明
註冊 登入
vuejs
/
vue
镜像来自 https://github.com/vuejs/vue.git
2
0
複刻 0
檔案 問題管理 0 Wiki
瀏覽代碼

add markdown example

Evan You 11 年之前
父節點
fd2674f985
當前提交
c410fcb068
共有 3 個文件被更改，包括 63 次插入 和 1 次删除
統一視圖 顯示文件統計
  1. 1 1
      examples/firebase/index.html
  2. 30 0
      examples/markdown/index.html
  3. 32 0
      examples/markdown/style.css

+ 1 - 1
examples/firebase/index.html
查看文件 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
   <head>
 
   <head>
 
-    <title></title>
 
+    <title>Vue.js Firebase example</title>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <link rel="stylesheet" type="text/css" href="style.css">
 
     <link rel="stylesheet" type="text/css" href="style.css">
 
     <script src='https://cdn.firebase.com/js/client/1.0.23/firebase.js'></script>
 
     <script src='https://cdn.firebase.com/js/client/1.0.23/firebase.js'></script>

+ 30 - 0
examples/markdown/index.html
查看文件 

@@ -0,0 +1,30 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <title>Vue.js markdown editor example</title>
 
+    <link rel="stylesheet" href="style.css">
 
+    <script src="../../dist/vue.js"></script>
 
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
 
+  </head>
 
+  <body>
 
+
 
+    <div id="editor">
 
+      <textarea v-model="input"></textarea>
 
+      <div v-html="input | marked"></div>
 
+    </div>
 
+
 
+    <script>
 
+      new Vue({
 
+        el: '#editor',
 
+        data: {
 
+          input: '# hello'
 
+        },
 
+        filters: {
 
+          marked: marked
 
+        }
 
+      })
 
+    </script>
 
+
 
+  </body>
 
+</html>

+ 32 - 0
examples/markdown/style.css
查看文件 

@@ -0,0 +1,32 @@
 
+html, body, #editor {
 
+  margin: 0;
 
+  height: 100%;
 
+  font-family: 'Helvetica Neue', Arial, sans-serif;
 
+  color: #333;
 
+}
 
+
 
+textarea, #editor div {
 
+  display: inline-block;
 
+  width: 49%;
 
+  height: 100%;
 
+  vertical-align: top;
 
+  -webkit-box-sizing: border-box;
 
+  -moz-box-sizing: border-box;
 
+  box-sizing: border-box;
 
+  padding: 0 20px;
 
+}
 
+
 
+textarea {
 
+  border: none;
 
+  border-right: 1px solid #ccc;
 
+  resize: none;
 
+  outline: none;
 
+  background-color: #f6f6f6;
 
+  font-size: 14px;
 
+  font-family: 'Monaco', courier, monospace;
 
+  padding: 20px;
 
+}
 
+
 
+code {
 
+  color: #f66;
 
+}