Laravel 中渲染 Markdown

在 Laravel 中渲染 Markdown 可以使用 spatie/laravel-markdown 包，这是一个强大的 Markdown 解析器。

除了支持常见的 Markdown 格式之外还支持一些扩展格式，比如代码高亮、代码增加、代码删除、代码聚焦等，具体编写语法可以查看这里。

前置条件

在使用 Laravel 渲染 Markdown 前需要保证运行的存在如下环境：

PHP >= 8
Node.js >= 10 用于代码高亮

并且将 node 可执行命令安装在 /usr/local/bin/ 或 /opt/homebrew/bin。使用 ln 命令可能看起来像这样：

sudo ln -s /home/some-user/.nvm/versions/node/v18.18.2/bin/node /usr/local/bin/node

安装

通过 composer 命令安装

在 Laravel 项目下使用运行以下命令来安装包：
```
composer require spatie/laravel-markdown
```

发布配置

发布配置文件以便后面进行自定义配置。

php artisan vendor:publish --provider="Spatie\LaravelMarkdown\MarkdownServiceProvider"

安装 shiki

要启用代码高亮功能，需要在项目中安装 JavaScript 包 shiki。使用 yarn 或 npm 安装它：
```
yarn add -D shiki

npm install -D shiki
```

使用

如果需要在模版中渲染 Markdown 可以使用 x-markdown 组件，如果需要在渲染完 HTML 后返回给 Api 使用，可以使用 toHtml() 方法渲染成 HTML。

使用 `x-markdown` 组件渲染

在 Blade 模版 resources/views/welcome.blade.php 中使用 <x-markdown> 组件渲染 Markdown：

Using x-markdown component rendering markdown

更多扩展语法展开查看

下面是更多突出显示和聚焦的语法示例：

```php - 不突出显示任何行
```php{4} - 仅突出显示第 4 行
```php{4-6} - 突出显示从第 4 行到第 6 行（含）的范围
```php{1,5} - 仅突出显示第 1 行和第 5 行
```php{1-3,5} - 突出显示第 1 行到第 3 行，然后突出显示第 5 行
```php{5,7,2-3} - 行的顺序无关紧要。但是，指定 3-2 不起作用。
```php{}{4} - 仅聚焦第 4 行
```php{}{4-6} - 聚焦从第 4 行到第 6 行（含）的范围
```php{}{1,5} - 仅聚焦第 1 行和第 5 行
```php{}{1-3,5} - 聚焦第 1 行到第 3 行，然后聚焦第 5 行
```php{}{5,7,2-3} - 行的顺序无关紧要。但是，指定 3-2 将不起作用。

当将行标记为突出显示、添加、删除或聚焦时，Shiki 会将一些类应用于这些行。应该在页面中添加一些 CSS 来为这些行设置样式。以下是一些 CSS 示例：

.shiki .highlight {
    background-color: hsl(197, 88%, 94%);
    padding: 3px 0;
}

.shiki .add {
    background-color: hsl(136, 100%, 96%);
    padding: 3px 0;
}

.shiki .del {
    background-color: hsl(354, 100%, 96%);
    padding: 3px 0;
}

.shiki.focus .line:not(.focus) {
    transition: all 250ms;
    filter: blur(2px);
}

.shiki.focus:hover .line {
    transition: all 250ms;
    filter: blur(0);
}

使用 `toHtml()` 方法

有时需要把 Markdown 渲染成 Html，比如作为 api 响应给客户，那么此时需要使用 toHtml() 方法。

<?php

use Spatie\LaravelMarkdown\MarkdownRenderer;

app(MarkdownRenderer::class)->toHtml($markdown);

美化代码

扩展包默认使用 github-light 主题来渲染代码。

通过在配置文件 config/markdown.php 中修改，当前可用的主题通过这里查看。

除了通过修改代码高亮的主题配置，还可以通过给标签添加一些特定样式来美化显示效果。

安装 taildinwcss 和 @tailwindcss/typography

通过 yarn 安装 tailwind 及其依赖项，运行命令以生成 tailwind.config.js 和 postcss.config.js 文件。
```
yarn add -D tailwindcss postcss autoprefixer @tailwindcss/typography
npx tailwindcss init -p
```

配置模版路径

在项目 tailwind.config.js 文件中添加所有模板文件的路径。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

添加 tailwindcss 指令

在 resources/css/app.css 文件中引入 tailwindcss。

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

开始构建

执行下面的命令开始构建样式。
```
yarn dev
```

在项目中使用 Tailwind

确保编译的 CSS 包含在 <head> 中，然后开始使用 Tailwind 的预置类来设置页面样式。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  @vite('resources/css/app.css')
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    <div class="prose prose-lg prose-slate dark:prose-dark">
      <x-markdown>
        <!--....-->
      </x-markdown>
    </div>
  </h1>
</body>
</html>

通过上面这些步骤，可以在 Laravel 中高效的渲染和美化 Markdown 内容。

前置条件

安装

使用

使用 x-markdown 组件渲染

使用 toHtml() 方法

美化代码

使用 `x-markdown` 组件渲染

使用 `toHtml()` 方法