ardissoebrata / beam-parsedown
More features for Parsedown.
Installs: 4 324
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 3
Forks: 0
Open Issues: 0
Requires
- erusev/parsedown-extra: ^0.8.1
- illuminate/support: ~7|~8
Requires (Dev)
- orchestra/testbench: ~5|~6
- phpunit/phpunit: ~9.0
README
Beam-Parsedown is a Laravel package of ParsedownExtra which adds several new features in it.
Here's a list of the added features:
Installation
Via Composer
$ composer require ardissoebrata/beam-parsedown
Usage
$html = BeamParsedown::text($markdown);
BasePath
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);
Header ID
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>
Icons
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>
Audio
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>
Youtube
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>
Alerts
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>
Draw.io
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>
Mermaid JS
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>
Chart JS
Show charts with chart.js config:
Markdown
:::chart { "type": "line", "data": { ... }, "options": { } } :::
Results
<canvas class="chartjs"> { "type": "line", "data": { ... }, "options": { } } </canvas>
Configuration
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
Change log
Please see the changelog for more information on what has changed recently.
Testing
$ composer test
Contributing
Please see contributing.md for details and a todolist.
Credits
License
The MIT License (MIT). Please see the license file for more information.