# 做一個簡單的markdown editor
## 做一個簡單的markdown editor
放入package.json後使用npm install
package.json
```
{
"name": "RealtimeMarkdownViewer",
"description": "Realtime Markdown Viewer",
"main": "server.js",
"version": "1.0.0",
"repository": {
"type": "git",
"url": "git@github.com:sifxtreme/realtime-markdown.git"
},
"keywords": [
"markdown",
"realtime",
"sharejs"
],
"author": "Asif Ahmed",
"dependencies": {
"express": "^4.12.4",
"ejs": "^2.3.1",
"redis": "^0.10.3",
"share": "0.6.3"
},
"engines": {
"node": "0.10.x",
"npm": "1.3.x"
}
}
```
server.js
```
var express = require('express');
var app = express();
// set the view engine to ejs
app.set('view engine', 'ejs');
// public folder to store assets
app.use(express.static(__dirname + '/public'));
// routes for app
app.get('/', function(req, res) {
res.render('pad');
});
// listen on port 8000 (for localhost) or the port defined for heroku
var port = process.env.PORT || 8000;
app.listen(port,function(){console.log("listen 8000")});
```
建造views資料夾，裡面存放模板
在views內創造pad.ejs
```
Realtime Markdown Viewer
```
建造public資料夾在根目錄，即為我們的static folder
裡面放入style.css
```
html, body, section, .full-height {
height: 100%;
}
#pad{
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
border: none;
overflow: auto;
outline: none;
resize: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#markdown {
overflow: auto;
border-left: 1px solid black;
}
```
public裡面放入script.js
```
window.onload = function() {
var converter = new showdown.Converter();
var pad = document.getElementById('pad');
var markdownArea = document.getElementById('markdown');
var convertTextAreaToMarkdown = function(){
var markdownText = pad.value;
html = converter.makeHtml(markdownText);
markdownArea.innerHTML = html;
};
pad.addEventListener('input', convertTextAreaToMarkdown);
convertTextAreaToMarkdown();
};
```
此時輸入 node server 可看到兩個框框，在左邊那個框輸入markdown試試
## 讓他成為共筆的markdown
```
npm install --save share@0.6.3
npm install --save redis
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://easonwang.gitbook.io/web_advance/zuo-yi-ge-jian-dan-de-markdown-editor.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.