18
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Nuxt.js製のWebサービスにmarked+highlightjsでMarkdownで書いた読書メモを表示できるようにしてみた

Posted at

先日、開発中の積読用の書籍管理アプリの新機能として、
Markdownで書ける読書メモを追加したので、その時の備忘録。

全体の流れ

やりかたとしては、こんな感じ

  1. Markdownの文字列をmarkedを使ってHTML化
  2. <pre>の部分は、markedでhighlightjsを使うように設定
  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を追加する

上記のままだと、Webサイトに適用しているCSSがそのまま適用されてしまうので、
こんなになってしまい、あまりよい感じではない...

スクリーンショット 2019-09-03 23.08.56.png

なので、.markedというクラスは以下の要素にマークダウン用のCSSを設定して調整する。

0から作ると大変なので、@skkzshさんのQiita記事に書いてある、
simonlc/Markdown-CSSkottkrig/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を適用するとこんな感じに!!
いい感じになった(´ω`)

スクリーンショット 2019-09-03 23.14.37.png

いろいろ便利なライブラリがあるのでサクッとできてステキ♪

こんなのつくってます!!

上記の読書メモ機能を追加した、積読用の読書管理アプリ「積読ハウマッチ」!
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ノ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト

18
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?