Nuxt.js의 웹 서비스에 marked + highlightjs로 Markdown에서 작성한 독서 메모를 볼 수 있도록 시도했습니다.
Markdown에서 쓸 수 있는 독서 메모를 추가했으므로, 그 때의 비망록.
✅독서 중 메모를 남길 수 있는 독서 메모 기능 ✨독서 메모를 남길 수 있는 기능을 추가했습니다‼ ️마크다운으로 쓸 수 있어, 모든 메모를 클립보드에 카피할 수 버립니다 😊하테나 블로그 등 마크다운을 사용할 수 있으면, 코피페로 기사도 쓰는 것도 😍(계속 피 c. 라고 r. 이 m / K3pjr4의 ぉ — 메모라바@공식 (@MemoryLoverz)
전체 흐름
방법으로는 이런 느낌
1. Markdown 문자열을 September 1, 2019 으로 HTML화
2. <pre>
부분은 marked에서 marked을 사용하도록 설정
3. Markdown용 CSS를 추가하여 외형 조정
Vue의 SFC로 쓰면 이런 느낌
<template>
<div class="marked" v-html="markedHtml"></div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "nuxt-property-decorator";
import marked from "marked";
import hljs from "highlightjs";
@Component({ components: {} })
export default class NoteItem extends Vue {
// マークダウンで書かれたテキスト
@Prop({ required: true }) memo!: string;
created() {
// markedでhighlightjsを利用するように設定
marked.setOptions({
langPrefix: "",
highlight: function(code, lang) {
return hljs.highlightAuto(code, [lang]).value;
}
});
}
private get markedHtml() {
// markedを実行した結果を返す
return marked(this.memo);
}
}
</script>
포인트로서는 이런 느낌.
created()
내에서 marked 설정. 하이라이트 처리에 highlightjs를 사용하도록.- computed
markedHtml()
에서 marked 실행 <div v-html="markedHtml">
에서 HTML 표시
마크다운용 CSS 추가
위의 내용이라면 웹사이트에 적용된 CSS가 그대로 적용되므로
이렇게 되어 버리고, 별로 좋은 느낌은 아니다...
이므로 .marked
이라는 클래스는 다음 요소에 마크다운용 CSS를 설정하여 조정한다.
0에서 만들면 힘들기 때문에, 에 써 있다,
@ skkzsh 님의 Qiita 기사 이나 simonlc/Markdown-CSS 을 참고로 설정해 간다.
할 수 있었던 것이 이런 느낌.
나머지는 사이트 디자인과 함께 조금씩 조정 ~
// ****************************
// * Marked
// ****************************
.marked {
p {
margin: 1em 0;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
line-height: 1em;
}
h4, h5, h6 {
font-weight: bold;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.9em;
}
ol {
margin: 1em 0;
padding: 0 0 0 2em;
}
ul {
margin: 1em 0;
padding: 0 0 0 2em;
list-style: disc;
}
dd {
margin: 0 0 0 2em;
}
table {
margin: 10px 0 15px 0;
border-collapse: collapse;
}
td, th {
border: 2px solid #ccb8a3;
padding: 3px 10px;
}
th {
padding: 5px 10px;
}
blockquote {
padding-left: 1em;
margin: 0;
color: #666666;
border-left: 0.3em #f6f0e5 solid;
}
}
이 CSS를 적용하면 이런 느낌에!!
좋은 느낌이 들었다(´ω`)
여러가지 편리한 라이브러리가 있기 때문에 바삭바삭할 수 있어 멋진♪
이런것을 만들고 있습니다! !
위의 독서 메모 기능을 추가한, 적독용의 독서 관리 앱 「적독 하우 매치」!
은 Nuxt.js+Firebase에서 개발 중입니다!
만약 좋으면 놀아보세요 ヽ(=´▽`=)노
요망·감상·어드바이스 등 있으면,
공식 계정( )과 개발자( @MemoryLoverz )까지♪
참고로 한 사이트
- @kira_puka
- 대량의 텍스트를 먹어도 빠른 Markdown Editor 만들었다 - mizchi's blog
- React+marked+highlight.js로 마크다운 에디터 만들기 - Qiita
- 코드의 하이라이트 표시 JS 라이브러리 3종 - Qiita
- JavaScript - Markdown 파서의 showdown.js, markdown-js, marked를 쉽게 비교
Reference
이 문제에 관하여(Nuxt.js의 웹 서비스에 marked + highlightjs로 Markdown에서 작성한 독서 메모를 볼 수 있도록 시도했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kira_puka/items/8b5bc56a78fbb98d3df9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Nuxt.js의 웹 서비스에 marked + highlightjs로 Markdown에서 작성한 독서 메모를 볼 수 있도록 시도했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kira_puka/items/8b5bc56a78fbb98d3df9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)