先日、開発中の積読用の書籍管理アプリの新機能として、
Markdownで書ける読書メモを追加したので、その時の備忘録。
✅読書中のメモが残せる読書メモ機能✨読書メモを残せる機能を追加しました‼️マークダウンで書けて、全メモをクリップボードにコピーできちゃいます😊はてなブログなどマークダウンが使えるなら、コピペで記事も書くことも😍(続く pic.twitter.com/K3pjr4noVo
— めもらば@公式 (@MemoryLoverz) September 1, 2019
やりかたとしては、こんな感じ
1. Markdownの文字列をmarkedを使ってHTML化
2. <pre>
の部分は、markedでhighlightjsを使うように設定
3. Markdown用のCSSを追加して見た目を調整
<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を使うように。markedHtml()
内でmarkedを実行<div v-html="markedHtml">
でHTMLを表示上記のままだと、Webサイトに適用しているCSSがそのまま適用されてしまうので、
こんなになってしまい、あまりよい感じではない...
なので、.marked
というクラスは以下の要素にマークダウン用のCSSを設定して調整する。
0から作ると大変なので、@skkzshさんのQiita記事に書いてある、
simonlc/Markdown-CSSやkottkrig/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)まで♪
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント