728x90
반응형
1. Markdown 에디터란?
▷ 문장/문서를 가볍게 작성할 수있는 '문장 작성법' 중 하나입니다.
▷ 간단한 기호를 사용해서 표제나 강조 등을 표시하고 이를 HTML로 변경하는 것도 가능합니다.
Markdown을 사용할 때, 아래의 코드를 하나 추가해야 합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.4.0/marked.min.js"></script>
Markdown은 표준이 없다는 단점이 있고 모든 HTML을 대신하지 못합니다.
| NO | 항목 | Markdown | HTML |
| 1 | 표제1 | # text | <h1>text</h1> |
| 2 | 표제2 | ## text | <h2>text</h2> |
| 3 | 표제3 | ### text | <h3>text</h3> |
| 4 | 표제4 | #### text | <h4>text</h4> |
| 5 | 표제5 | ##### text | <h5>text</h5> |
| 6 | 번호 없는 리스트 | - text | <ul><li>text</li></ul> |
| 7 | 번호 없는 리스트 | * text | <ul><li>text</li></ul> |
| 8 | 강조(기울임) | *text* | <em>text</em> |
| 9 | 강한 강조(진하게) | **text** | <strong>text</strong> |
| 10 | 취소선 | ~~aa~ | <del>text</del> |
| 11 | 수평선 | --- | <hr> |
| 12 | 링크 | [text](url) | <a href="url">text</a> |
교재에 나와 있는 항목들만 확인했을 때 이 정도의 예제가 있고 검색을 하면 더 많은 결과가 나옵니다.
◎ Markdown을 사용하는 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<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>
<div id="app">
<textarea v-model="input"></textarea>
<div v-html="convertMarkdown"></div>
</div>
<script>
new Vue({
el:'#app',
data: {
input:''
},
computed: {
convertMarkdown: function(){
return marked(this.input);
// input의 값을 Markdown 형식으로 변환 시켜 줍니다.
}
}
})
</script>
</body>
</html>위의 코드를 사용하면 textarea에 있는 값들이 HTML이 적용되어서 결과가 나타나게 됩니다.
다음 글에는 제가 찾아본 몇 가지를 추가해서 올려보겠습니다!
728x90
반응형
'FrontEnd > java script' 카테고리의 다른 글
| [java script] Vue.js 컴포넌트 (0) | 2022.12.29 |
|---|---|
| [java script] Vue.js 애니메이션 효과 적용(transition) (0) | 2022.12.28 |
| [java script] Vue.js 데이터 변화(computed, watch)를 이용한 마무리 예 (0) | 2022.12.28 |
| [java script] Vue.js 데이터 변화 감지 프로퍼티(watch 2) (0) | 2022.12.27 |
| [java script] Vue.js 데이터 변화 감지 프로퍼티(watch 1) (2) | 2022.12.27 |
