diff --git a/routes.go b/routes.go
index 6cbbb37..1d6b186 100644
--- a/routes.go
+++ b/routes.go
@@ -207,6 +207,19 @@ func newNote(c *gin.Context) {
 	c.Redirect(302, "/"+title)
 }
 
+func getCodeType(title string) string {
+	if strings.Contains(title, ".js") {
+		return "javascript"
+	} else if strings.Contains(title, ".py") {
+		return "python"
+	} else if strings.Contains(title, ".go") {
+		return "go"
+	} else if strings.Contains(title, ".html") {
+		return "htmlmixed"
+	}
+	return ""
+}
+
 func editNote(c *gin.Context) {
 	title := c.Param("title")
 	if title == "ws" {
@@ -240,16 +253,8 @@ func editNote(c *gin.Context) {
 		if totalTime.Seconds() < 1 {
 			totalTimeString = "< 1 s"
 		}
-		CodeType := ""
-		if strings.Contains(title, ".js") {
-			CodeType = "javascript"
-		} else if strings.Contains(title, ".py") {
-			CodeType = "python"
-		} else if strings.Contains(title, ".go") {
-			CodeType = "go"
-		} else if strings.Contains(title, ".html") {
-			CodeType = "htmlmixed"
-		}
+
+		CodeType := getCodeType(title)
 		c.HTML(http.StatusOK, "index.tmpl", gin.H{
 			"Title":       title,
 			"WikiName":    RuntimeArgs.WikiName,
@@ -305,6 +310,7 @@ func serveStaticFile(c *gin.Context, option string) {
 }
 
 func renderMarkdown(c *gin.Context, currentText string, title string, versions []versionsInfo, AdminKey string, totalTime time.Duration, encrypted bool, noprompt bool, locked bool) {
+	originalText := currentText
 	r, _ := regexp.Compile("\\[\\[(.*?)\\]\\]")
 	for _, s := range r.FindAllString(currentText, -1) {
 		currentText = strings.Replace(currentText, s, "["+s[2:len(s)-2]+"](/"+s[2:len(s)-2]+"/view)", 1)
@@ -337,10 +343,12 @@ func renderMarkdown(c *gin.Context, currentText string, title string, versions [
 	if totalTime.Seconds() < 1 {
 		totalTimeString = "< 1 s"
 	}
+	CodeType := getCodeType(title)
 	c.HTML(http.StatusOK, "view.tmpl", gin.H{
 		"Title":             title,
 		"WikiName":          RuntimeArgs.WikiName,
 		"Body":              template.HTML([]byte(html2)),
+		"CurrentText":       originalText,
 		"Versions":          versions,
 		"TotalTime":         totalTimeString,
 		"AdminKey":          AdminKey,
@@ -348,6 +356,8 @@ func renderMarkdown(c *gin.Context, currentText string, title string, versions [
 		"Locked":            locked,
 		"Prompt":            noprompt,
 		"LockedOrEncrypted": locked || encrypted,
+		"Coding":            len(CodeType) > 0,
+		"CodeType":          CodeType,
 	})
 
 }
diff --git a/templates/index.tmpl b/templates/index.tmpl
index ca0eabb..41b203e 100644
--- a/templates/index.tmpl
+++ b/templates/index.tmpl
@@ -6,11 +6,7 @@
 
   {{ template "header" }}
 
-{{ if .Coding }}
-<script src="/static/js/codemirror.js"></script>
-<link rel="stylesheet" href="/static/css/codemirror.css">
-<script src="/static/js/{{ .CodeType }}.js"></script>
-{{ end }}
+
 
   <script src="/static/js/jquery.autogrowtextarea.min.js"></script>
   {{if .NoEdit}} {{else}}
@@ -30,7 +26,7 @@
   .CodeMirror {
         border: 1px solid #eee;
         height: auto;
-      }
+  }
 
 
     textarea {
@@ -58,7 +54,6 @@
     @media (min-width: 1200px) {
       .container {
         max-width: 800px;
-        padding-bottom: 65px;
       }
     }
   </style>
@@ -305,6 +300,9 @@
 
 
       {{ if .Coding }}
+      <script src="/static/js/codemirror.js"></script>
+      <link rel="stylesheet" href="/static/css/codemirror.css">
+      <script src="/static/js/{{ .CodeType }}.js"></script>
       <script>
         var editor = CodeMirror.fromTextArea(document.getElementById("emit_data"), {
           lineNumbers: true,
@@ -318,11 +316,11 @@
       }
       </script>
 {{ else }}
-<script>
-function currentText() {
-  return $('#emit_data').val()
-}
-</script>
+    <script>
+    function currentText() {
+      return $('#emit_data').val()
+    }
+    </script>
 
     {{ end }}
 
diff --git a/templates/view.tmpl b/templates/view.tmpl
index 0f8abe6..2555cfa 100644
--- a/templates/view.tmpl
+++ b/templates/view.tmpl
@@ -15,6 +15,43 @@ a.deleteable {
     cursor: pointer;
 }
 </style>
+{{ if .Coding }}
+<style>
+.CodeMirror {
+      border: 1px solid #eee;
+      height: auto;
+}
+
+
+  textarea {
+    width: 100%;
+    margin: 5px 0;
+    padding: 10px;
+    border: none;
+    overflow: auto;
+    outline: none;
+    font-size: large;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    font-family: Tahoma, sans-serif;
+  }
+
+  body {
+    margin: 0;
+    background: #fff;
+    max-width: 800px;
+    margin: 0 auto;
+    padding-bottom: 65px;
+  }
+
+  @media (min-width: 1200px) {
+    .container {
+      max-width: 800px;
+    }
+  }
+  </style>
+{{ end }}
 <script src="/static/js/sweetalert-dev.js"></script>
 <link rel="stylesheet" href="/static/css/sweetalert.css">
 </head>
@@ -65,6 +102,13 @@ a.deleteable {
     </div>
   </nav>
 
+{{ if .Coding }}
+
+  <div>
+    <textarea autofocus rows={{ .NumRows }} class='auto_submit_item' id="emit_data" name="emit_data" placeholder="Start typing, it will save automatically.">{{ .CurrentText }}</textarea>
+  </div>
+
+{{ else }}
   <div class="yue">
 {{ if .Encrypted }}
 <pre>
@@ -74,6 +118,7 @@ a.deleteable {
     {{ .Body }}
 {{ end }}
 </div>
+{{ end }}
 
 <script>
 $( document ).ready(function() {
@@ -250,6 +295,23 @@ $(document).keydown(function(e){
   });
 {{ end }}
 </script>
+
+
+      {{ if .Coding }}
+      <script src="/static/js/codemirror.js"></script>
+      <link rel="stylesheet" href="/static/css/codemirror.css">
+      <script src="/static/js/{{ .CodeType }}.js"></script>
+      <script>
+        var editor = CodeMirror.fromTextArea(document.getElementById("emit_data"), {
+          lineNumbers: true,
+          mode:  "{{ .CodeType }}",
+          matchBrackets: true,
+          viewportMargin: Infinity,
+          readOnly: true
+        });
+      editor.setSize("100%", "100%")
+      </script>
+    {{ end }}
 </body>
 
 </html>