今回はこちらで紹介されていたマークダウンのパッケージを試してみたいと思います。
まず、以下のコマンドで空のプロジェクトを作成します。※Sailを使っていますが、Dockerがインストールされていない場合は、他の方法でLaravelアプリケーションを作成してください。
curl -s "https://laravel.build/laravel-markdown" | bash
cd Laravel-markdown
sail up -d
任意のブラウザでlocalhostにアクセスして、アプリケーションが動いていることが確認できたら、下記のコマンドでパッケージをインストールします。
sail composer require spatie/laravel-markdown
※sailを使っていない場合は、sailは不要です。
ところが、依存するパッケージのバージョンが競合していてうまくインストールができませんでした。表示されるエラーは以下のとおりです。
Using version ^1.1 for spatie/laravel-markdown
./composer.json has been updated
Running composer update spatie/laravel-markdown
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.
Problem 1
- spatie/laravel-markdown[1.1.0, ..., 1.1.1] require spatie/commonmark-shiki-highlighter ^1.1 -> satisfiable by spatie/commonmark-shiki-highlighter[1.1.0, 1.1.1].
- spatie/commonmark-shiki-highlighter[1.1.0, ..., 1.1.1] require league/commonmark ^1.6.5 -> found league/commonmark[1.6.5, 1.6.6, 1.6.x-dev] but the package is fixed to 2.0.0 (lock file version) by a partial update and that version does not match. Make sure you list it as an argument for the update command.
- Root composer.json requires spatie/laravel-markdown ^1.1 -> satisfiable by spatie/laravel-markdown[1.1.0, 1.1.1].
Use the option --with-all-dependencies (-W) to allow upgrades, downgrades and removals for packages currently locked to specific versions.
Installation failed, reverting ./composer.json and ./composer.lock to their original content.
--with-all-dependenciesというオプションをつけることでバージョンの調整を試みてくれるようなので、オプションをつけて実行してみますが、似たようなエラーで失敗します。バージョンがロックされていることが問題のようだったので、composer.lockファイルを削除して、コマンドを実行してみるとインストールが完了しました。
rm composer.lock
sail composer require spatie/laravel-markdown --with-all-dependencies
次にコードハイライトを有効化するためにJavaScriptのパッケージであるshikiをインストールします。
sail npm install shiki
こちらはスムーズにインストールが完了しました。
resources/views/welcome.blade.phpの内容をすべて削除して、<x-markdown></x-markdown>で置き換え、マークダウン形式のコードを記入してみます。
<x-markdown>
# Laravel Markdown デモ
これは[本サイトへのリンク](https://www.petadocs.com/)です。
```dart
void main() async {
runApp(MyApp());
}
```
</x-markdown>
このとき、行頭にインデントが入ってしまうとうまくマークダウンが適用されないので注意してください。
上記のコードは以下のように変換されており、<h1>タグにはidが追加されていることがわかります。
<div ><h1 id="laravel-markdown">Laravel Markdown デモ</h1>
<p>これは<a href="https://www.petadocs.com/">本サイトへのリンク</a>です。</p>
<pre class="shiki" style="background-color: #fff"><code><span class="line"><span style="color: #D73A49">void</span><span style="color: #24292E"> </span><span style="color: #6F42C1">main</span><span style="color: #24292E">() </span><span style="color: #D73A49">async</span><span style="color: #24292E"> {</span></span>
<span class="line"><span style="color: #24292E"> </span><span style="color: #6F42C1">runApp</span><span style="color: #24292E">(</span><span style="color: #005CC5">MyApp</span><span style="color: #24292E">());</span></span>
<span class="line"><span style="color: #24292E">}</span></span>
<span class="line"></span></code></pre>
</div>
ブラウザには、以下のように表示されます。
参考サイト
https://spatie.be/docs/laravel-markdown/v1/installation-setup