Beam-Parsedown is a Laravel package of ParsedownExtra which adds several new features in it.
Here's a list of the added features:
Via Composer
$ composer require ardissoebrata/beam-parsedown
$html = BeamParsedown::text($markdown);
Set default base path for images, audios & drawio diagrams. It will only add base path to relative urls (ex. ./image.png
).
$html = BeamParsedown::setBasePath($basepath)->text($markdown);
Automatically add IDs to headings.
Markdown
# Heading 1
## Heading 2
### Heading 3
Results
<h1 id="heading-1">Heading 1</h1>
<h2 id="heading-2">Heading 2</h2>
<h3 id="heading-3">Heading 3</h3>
You can easily display fontawesome icons. To add an icon, simply write icon:
followed with the class icon that you want to display in square brackets.
Markdown
[icon: fa fa-home]
# [icon: fa fa-home] Home
## [icon: fa fa-home] Home 2 {#the-site .main .shine lang=fr}
Results
<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>
To embed audio, add audio:
followed by the link to audio file (m4a).
Markdown
[audio: audios.m4a]
[audio: http://other-example.com/audios.m4a]
Results
<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>
Display youtube videos from shared links. Write youtube:
followed by shared links from Youtube, enclosed in square bracket.
Markdown
[youtube: https://youtu.be/videoid]
Results
<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>
To display note/info block in document, enclosed block with info
followed by three tick marks (```).
Markdown
:::info
**Note:** Note contents live here.
And here too. Add blank line to test multiline alerts.
:::
:::warning
**Warning:** Warning contents live here.
:::
Results
<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>
To embed draw.io diagrams, add drawio:
followed by the link to drawio file (.drawio
).
Markdown
[drawio: sample.drawio]
Results
<div>
<div class="mxgraph w-full border" data-mxgraph="{"highlight":"#0000ff","target":"blank","nav":true,"resize":true,"toolbar":"zoom layers lightbox","url":"http:\/\/basepath.test\/data\/sample.drawio"}"></div>
<script type="text/javascript" src="https://viewer.diagrams.net/js/viewer-static.min.js"></script>
</div>
Here is one mermaid diagram:
Markdown
:::mermaid
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
:::
Results
<div class="mermaid">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
</div>
Show charts with chart.js config:
Markdown
:::chart
{
"type": "line",
"data": {
...
},
"options": {
}
}
:::
Results
<canvas class="chartjs">
{
"type": "line",
"data": {
...
},
"options": {
}
}
</canvas>
To add new or edit the default options, run the following command to make a copy of the default configuration file:
php artisan vendor:publish --tag=beam-parsedown.config --force
Please see the changelog for more information on what has changed recently.
$ composer test
Please see contributing.md for details and a todolist.
The MIT License (MIT). Please see the license file for more information.