Vueは友達
ホーム
>
Laravel
>
Laravelでライブラリなしでマークダウンを使う方法

Laravelでライブラリなしでマークダウンを使う方法

Laravelでライブラリなしでマークダウンを使う方法

242 回閲覧されました

みなさんこんにちは、jonioです。

今回は値を保存する時にHTMLの形式(マークダウン)で保存して表示する方法について解説します。

宣伝

無料で使えるLaravelの学習サイトを作りました。

ユーザー登録をしてぜひ利用して下さい。

サイトはここから。

Laravelのバージョン

8ですが8以降で今回の実装方法は使えるみたいです。

モデルかコントローラー

保存の処理をする所に記述します、私はモデルです。

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use League\CommonMark\CommonMarkConverter;       //この行を追加

class Ticket extends Model
{
    use HasFactory;

    protected $fillable = [
        'content',
    ];

    function TicketStore($request){
    
        //ここから追加
        $converter = new CommonMarkConverter();
        $html_content = $converter->convertToHtml($request->input('content'));
        //ここまで追加

        Ticket::create([
            'content' => $html_content,
        ]);
    }
}

21行目の「content」はHTMLを入力したいフォームのカラム名です。

値を入力するフォームには下記の書き方をします。

<h1>要件定義</h1>

値の保存をするとテーブルにHTMLを含んだまま保存されます。

下記の書き方をしてもHTML含めて全部保存されます。

<div>
  <h1>h1タグ</h1>
  <p>pタグ</p>
</div>

またクラス名を付けても反映されます。

<p class="demo">pタグ</p>

マークダウンを表示

ただ表示させたいだけなのでコントローラーのアクションに下記の記述をします。

public function index()
{
  $tickets = Ticket::all();

  return view('ticket.index', compact('tickets'));
}

そしてビューで下記の記述をします。

@foreach($tickets as $ticket)
    <div class="ticket">
        <div class="memo">{!! $ticket->content !!}
    </div>
@endforeach

カラムの値を表示する時は通常は下記にします。

{{ $ticket->content }}

しかしマークダウンにする時は下記の書き方にします。

{!! $ticket->content !!}

これでビューにおいてHTMLで表示されるのを確認できるはずです。

これで完成です。