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

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

参考にしたサイト

Originally published at qiita.com

きらぷか@i18n補助ツール『トランスノート』開発者

フリーエンジニア/今はNuxt.js/いつかFlutter 受託&アプリ/Webサービス/ゲームを #個人開発 CS修士→SIer/R&D→フリー #paiza はAランクで満足/AtCoderしたい 仕事依頼やご相談はDMまで Kotlin/Python/Swift/Unity/Java/Haskell/DDD

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント