Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

先日、開発中の積読用の書籍管理アプリの新機能として、
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)まで♪

参考にしたサイト

kira_puka
フリーのエンジニア / 今はNuxt.jsが多め / いつかFlutterをやりたい 受託開発をしながら、アプリ・Webサービス・ゲームを個人開発 Kotlin/Python/Swift/Unity/Java/Haskell/DDD
https://memory-lovers.com
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away