FrontEnd

JQueryとmark.jsでマークダウンのリアルタイムプレビューをつくる

投稿日:2017年3月15日 更新日:

はじめに

マークダウンのリアルタイムプレビュー機能を作ってみたいと思い、こちらの方の記事を参考にさせていただきました。

Railsにマークダウンのリアルタイムプレビューを実装する

ただ、そもそも使用しているライブラリ、およびJSに対する知見がないため、メモとして残したいと思います。

記事の中では下記2つのライブラリを使用していらっしゃいます。

  • marked.js
  • vue.js

後述しますが、vue.jsはJavaScriptの軽量フレームワークのようなので、代わりにJQueryで実装しました。

環境

  • Ruby 2.3.1
  • Rails 5.0.0.1
  • JQuery 1.12.4

mark.js

公式ドキュメント

marked.js自体のドキュメントはこちら。
https://github.com/chjj/marked
marked.jsのGemのドキュメントはこちらです。
https://github.com/rosscooperman/marked-rails

インストール

Gemfileに追記し、インストールします。

application.jsに下記を追記します。
(Rails 3.1以上であれば、Asset Pipelineによって読み込めるので、個別インストールの必要はないようです。)

Railsへのインストールはこれで完了です。

実際に使用してみる

marked.jsの公式ドキュメントを参考に、実際に使用してみます。
適当なビューを作成し(今回はindexとします。)、下記を記載します。

すでにmarkedはGemでインストールしているので、 marked メソッドが使用できます。
ブラウザで表示した結果はこちらです。

逆に marked メソッドがない場合は下のようになります。

Markdownはきいておらず、単なる文字列として出力されています。
いくつかMarkdownを試してみましたが、基本的なところは普通に出力できました。
日本語Markdownユーザー会

オプションについて

いくつかオプションも設定できるようです。
詳しくは調べられていないので、設定のコードを記載します。
また、ハイライトについては公式ドキュメントの例では、node-pygmentize-bundledhighlight.jsと連携していました。

プレビュー機能

vue.jsに関して

参考にさせていただいた記事では、vue.jsでプレビュー部分を作成していました。

私自身に知識がなかっただけなのですが、vue.jsはフレームワークでした。
他のフレームワーク(ReactやAngular)と比べ、軽量で、View層にだけ焦点を当てている分導入コストが低い、とのことです。
詳しくはドキュメントをご参照ください。
vue.jsのドキュメント

とはいえ、フレームワークであるならば、ふつうにJavaScriptやJQueryを使ってできるだろうと思い、勉強がてら作成してみました。

JQueryで書いてみたコード

とはいえ、JQueryもそこまでゴリゴリ書けるわけではないので、下記サイト様を参考にさせていただきました。
jQueryで色々なフォーム入力値をリアルタイム取得する

まずはビューのHTMLです。
Railsのscaffoldで作成されるフォームを少し修正したくらいです。

続いて、Javascript(JQuery)側です。
最終的にはマークダウン出力したいので、関数名はreplaceMarkdownとなっています。

JSのコードに関して

まずは、対象のtextareaに関してkeyupイベントと関数をバインドさせます。
keyupはキーボードのキーが押され、上がった際に呼び出されます。
JQuery 日本語リファレンス -keyup-

keyupされたタイミングでreplaceMarkdownを呼びます。

ここで詰まったことが、この変数の宣言です。
参考にさせていただいたサイト様にてこの宣言をしておりました。

勝手に勘違いしておりまして、 v = old = elm.value で読み進めておりました。
JQueryでは変数をこのように宣言できます。
(どうりでページロード時に v を出力させると undefined になるわけです。。。)

jQueryを読むために知っておきたい6つの知識

あとはvとoldを比較して、異なれば書き換えます。

なお、marked.jsを使用してstrをマークダウンに変換すれば、ちゃんと出力されます。

さいごに

マークダウンのプレビュー機能を調べている中で、RubyにもいろいろなGemがあることを知りました。
(例えば、Redcarpet

今度はサーバーサイドでのマークダウン変換についても記事にしたいと思います!

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

vuex-module-decoratorsとTypeScriptでvuexをスマートに書く

1 はじめに2 導入3 どのように記述するか3.1 初めに3.2 state3.3 mutation3.4 action3.5 getter3.6 async MutationAction3.7 Dy ...

React Router v7 + Cloudflare PagesでのOGPタグ設定とOGP画像生成

1 はじめに2 OGPタグの設定2.1 全体で共通の設定2.2 meta()関数による動的な設定3 OGP画像の生成3.1 @vercel/ogの導入3.2 middlwareの実装4 OGPチェッカ ...

正式版Vue.js 3.0のTeleportを触ってみる

1 はじめに1.1 Vue.js 3.0のプロジェクト作成方法1.2 Teleportとは2 基本形2.1 コード2.2 画面3 別のコンポーネントの入れ子にする場合3.1 コード3.2 画面4 同じ ...

AMPに対応してモバイルページを高速に表示させる

1 はじめに2 AMPとは3 なぜAMPでは高速に表示されるのか3.1 非同期スクリプトのみを許可3.2 リソース読み込みに優先度を付ける3.3 プリレンダリング4 AMPの3要素4.1 AMP HT ...

[Rails + Materialize] DateTimePickerがなかったので…

1 はじめに2 前提条件2.1 ビューのイメージ3 モデルにゲッターとセッターを追加4 入力フォームに追加4.1 JSファイルにて使用宣言4.2 HTML4.3 コントローラーのストロングパラメータを ...

フォロー

blog-page_side_responsive

2017年3月
 1234
567891011
12131415161718
19202122232425
262728293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。