3
3

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 3 years have passed since last update.

Laravelでマークダウンプレビュー機能を実装する

Posted at

Laravelでmarked.jsを使用したマークダウンプレビュー機能を実装したので備忘力として残して置こうと思います。

完成形

スクリーンショット 2021-06-12 10.37.45.png

1.marked.jsをインストール

$ npm install marked

インストールができたのか確認はpackage.jsondependenciesをみていただけるとmarkedが入っていると思います。

2.テンプレート作成

resources/views/posts/form.blade.php
<form class="post-page-wrapper" action="{{ route('post.create') }}" method="post">
@csrf
    <div class="row">
        <div class="col-6 m-1">
            <textarea name="body" id="markdown_editor_textarea" cols="30" rows="10" class="form-control"></textarea>
        </div>
        <div class="col-6 m-1">
            <div id="markdown_preview"></div>
        </div>
    </div>
    <div class="post-page-footer">
        <input type="submit" class="post-button m-1" value="投稿">
    </div>
</form>

マークダウンをプレビューに表示する処理をjsに記述

resources/js/markdown.js

import marked from 'marked';

// マークダウンをプレビュー画面に表示する
$(function() {
	marked.setOptions({
		langPrefix: '',
		breaks : true,
		sanitize: true,
	});

	$('#markdown_editor_textarea').keyup(function() {
		var html = marked(getHtml($(this).val()));
		$('#markdown_preview').html(html);
	});

    //マークダウンをHTMLに変換する
    var target = $('.item-body')
    var html = marked(getHtml(target.html()));
    $('.item-body').html(html);

	// 比較演算子が &lt; 等になるので置換
	function getHtml(html) {
		html = html.replace(/&lt;/g, '<');
		html = html.replace(/&gt;/g, '>');
		html = html.replace(/&amp;/g, '&');
		return html;
	}
});

app.jsに読み込ませる

resources/js/app.js
require('./markdown.js');

これでこのようにプレビュー表示できるようになります。
また、highlight.jsを使用するとプレビューにハイライトをつけたりおしゃれにすることができるので是非やって見てください。

3
3
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
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?