1775
No
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.4.0/marked.min.js"></script>
</head>
<body>
<h2>Markdown</h2>
<div id="app">
<div>
<textarea v-model="input" style="width: 500px; height: 500px;">
</textarea>
<div v-html="convertMarkdown"></div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
input:`
# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6
1. 순서가 필요한 목록
1. 순서가 필요한 목록
- 순서가 필요하지 않은 목록(서브)
- 순서가 필요하지 않은 목록(서브)
1. 순서가 필요한 목록
1. 순서가 필요한 목록(서브)
1. 순서가 필요한 목록(서브)
1. 순서가 필요한 목록
- 순서가 필요하지 않은 목록에 사용 가능한 기호
- 대쉬(hyphen)
* 별표(asterisks)
+ 더하기(plus sign)
`
},
computed : {
convertMarkdown(){
//input 이 변하면 convertMarkdown 실행
return marked(this.input);
}
},
})
</script>
</body>
</html>
댓글 ( 4)
댓글 남기기