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>


포인트로서는 이런 느낌.



  1. created() 내에서 marked 설정. 하이라이트 처리에 highlightjs를 사용하도록.
  2. computed markedHtml() 에서 marked 실행
  3. <div v-html="markedHtml">에서 HTML 표시


마크다운용 CSS 추가



위의 내용이라면 웹사이트에 적용된 CSS가 그대로 적용되므로

이렇게 되어 버리고, 별로 좋은 느낌은 아니다...



highlightjs



이므로 .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를 적용하면 이런 느낌에!!

좋은 느낌이 들었다(´ω`)



kottkrig/Markdown-CSS



여러가지 편리한 라이브러리가 있기 때문에 바삭바삭할 수 있어 멋진♪



이런것을 만들고 있습니다! !



위의 독서 메모 기능을 추가한, 적독용의 독서 관리 앱 「적독 하우 매치」!

은 Nuxt.js+Firebase에서 개발 중입니다!



적독 하우 매치



만약 좋으면 놀아보세요 ヽ(=´▽`=)노



요망·감상·어드바이스 등 있으면,

공식 계정( )과 개발자( @MemoryLoverz )까지♪



참고로 한 사이트




좋은 웹페이지 즐겨찾기