README

Beam-Parsedown 是一个 Laravel 扩展包 ParsedownExtra，其中增加了几个新功能。

以下是新增功能列表

安装

通过 Composer

$ composer require ardissoebrata/beam-parsedown

用法

$html = BeamParsedown::text($markdown);

基础路径

设置图片、音频和 draw.io 图表的默认基础路径。它只会添加基础路径到相对URL（例如，./image.png）。

$html = BeamParsedown::setBasePath($basepath)->text($markdown);

标题ID

自动为标题添加ID。

Markdown

# Heading 1

## Heading 2

### Heading 3

结果

<h1 id="heading-1">Heading 1</h1>

<h2 id="heading-2">Heading 2</h2>

<h3 id="heading-3">Heading 3</h3>

图标

您可以轻松显示 fontawesome 图标。要添加图标，只需在方括号中写入 icon: 后跟要显示的图标类。

Markdown

[icon: fa fa-home]

# [icon: fa fa-home] Home

## [icon: fa fa-home] Home 2 {#the-site .main .shine lang=fr}

结果

<p><i class="fa fa-home"></i></p>
<h1 id="home"><i class="fa fa-home"></i> Home</h1>
<h2 id="the-site" lang="fr" class="main shine"><i class="fa fa-home"></i> Home 2</h2>

音频

要嵌入音频，请添加 audio: 后跟音频文件的链接（m4a）。

Markdown

[audio: audios.m4a]
[audio: http://other-example.com/audios.m4a]

结果

<p><audio controls="" preload="none"><source src="http://basepath.test/data/audios.m4a" /></audio></p>
<p><audio controls="" preload="none"><source src="http://other-example.com/audios.m4a" /></audio></p>

YouTube

从共享链接显示 YouTube 视频。请写入 youtube: 后跟 YouTube 的共享链接，放在方括号中。

Markdown

[youtube: https://youtu.be/videoid]

结果

<div class="overflow-hidden relative h-0" style="padding-bottom: 56.25%"><iframe src="https://www.youtube.com/embed/videoid" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="left-0 top-0 h-full w-full absolute"></iframe></div>

警报

要在文档中显示备注/信息块，用三个反引号（```) 将其包裹。

Markdown

:::info
**Note:** Note contents live here.

And here too. Add blank line to test multiline alerts.
:::

:::warning
**Warning:** Warning contents live here.
:::

结果

<div class="bg-indigo-100 rounded shadow-sm flex overflow-hidden" role="alert">
<div class="bg-indigo-500 w-20 flex justify-center items-center"><i class="fa fa-info-circle fa-2x text-white"></i></div>
<div class="flex-1 px-4">
<p><strong>Note:</strong> Note contents live here.
And here too. Add blank line to test multiline alerts.</p>
</div>
</div>

<div class="bg-yellow-50 rounded shadow-sm flex overflow-hidden" role="alert">
<div class="bg-yellow-300 w-20 flex justify-center items-center"><i class="fa fa-exclamation-triangle fa-2x"></i></div>
<div class="flex-1 px-4">
<p><strong>Warning:</strong> Warning contents live here.</p>
</div>
</div>

draw.io

要嵌入 draw.io 图表，请添加 drawio: 后跟 drawio 文件的链接（.drawio）。

Markdown

[drawio: sample.drawio]

结果

<div>
<div class="mxgraph w-full border" data-mxgraph="{&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;target&quot;:&quot;blank&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers lightbox&quot;,&quot;url&quot;:&quot;http:\/\/basepath.test\/data\/sample.drawio&quot;}"></div>
<script type="text/javascript" src="https://viewer.diagrams.net/js/viewer-static.min.js"></script>
</div>

Mermaid JS

这是一个 mermaid 图表示例

Markdown

:::mermaid
graph TD
    A[Client] --> B[Load Balancer]
    B --> C[Server1]
    B --> D[Server2]
:::

结果

<div class="mermaid">
graph TD
    A[Client] --> B[Load Balancer]
    B --> C[Server1]
    B --> D[Server2]
</div>

Chart JS

使用 chart.js 配置显示图表

Markdown

:::chart
{
  "type": "line",
  "data": {
	  ...
  },
  "options": {
  }
}
:::

结果

<canvas class="chartjs">
{
  "type": "line",
  "data": {
	  ...
  },
  "options": {
  }
}
</canvas>

配置

要添加新功能或编辑默认选项，运行以下命令以复制默认配置文件

php artisan vendor:publish --tag=beam-parsedown.config --force

变更日志

请参阅变更日志以获取有关最近更改的更多信息。

测试

$ composer test

ardissoebrata / beam-parsedown

维护者

详细信息

README

安装

用法

基础路径

标题ID

图标

音频

YouTube

警报

draw.io

Mermaid JS

Chart JS

配置

变更日志

测试

贡献

鸣谢

许可