Configurable Markdown to HTML converter with Parsedown Extra.
Update 2023/09/03: I will be retiring this project due to the lack of activity on the Parsedown project to date. There is actually a draft for Parsedown version 2.0, but it seems that there has been no progress. I will consider refactoring when Parsedown version 2.0 is released, but I may no longer actively maintain this project as I am now shifting my focus to my own Markdown Extra parser. It consists of a single file and uses the same methods as Parsedown to separate blocks and inlines, so it should achieve similar (or even better) speed and efficiency.
Include ParsedownExtraPlugin.php
just after the Parsedown.php
and ParsedownExtra.php
file:
require 'Parsedown.php';
require 'ParsedownExtra.php';
require 'ParsedownExtraPlugin.php';
# Create
$Parsedown = new ParsedownExtraPlugin;
# Configure
$Parsedown->voidElementSuffix = '>'; // HTML5
# Use
echo $Parsedown->text('# Header {.sth}');
From the file manager interface, create a composer.json
file in your project folder, then add this content:
{
"minimum-stability": "dev"
}
From the command line interface, navigate to your project folder then run this command:
composer require taufik-nurrohman/parsedown-extra-plugin
From the file manager interface, create an index.php
file in your project folder then require the auto-loader file:
require 'vendor/autoload.php';
# Create
$Parsedown = new ParsedownExtraPlugin;
# Configure
$Parsedown->voidElementSuffix = '>'; // HTML5
# Use
echo $Parsedown->text('# Header {.sth}');
$Parsedown->voidElementSuffix = '>'; // HTML5
$Parsedown->abbreviationData = [
'CSS' => 'Cascading Style Sheet',
'HTML' => 'Hyper Text Markup Language',
'JS' => 'JavaScript'
];
$Parsedown->referenceData = [
'mecha-cms' => [
'url' => 'https://mecha-cms.com',
'title' => 'Mecha CMS'
],
'test-image' => [
'url' => 'http://example.com/favicon.ico',
'title' => 'Test Image'
]
);
rel="nofollow"
Attribute on External Links$Parsedown->linkAttributes = function ($Text, $Attributes, &$Element, $Internal) {
if (!$Internal) {
return [
'rel' => 'nofollow',
'target' => '_blank';
];
}
return [];
};
id
Attribute on Headers$Parsedown->headerAttributes = function ($Text, $Attributes, &$Element, $Level) {
$Id = $Attributes['id'] ?? trim(preg_replace('/[^a-z\d\x{4e00}-\x{9fa5}]+/u', '-', strtolower($Text)), '-');
return ['id' => $Id];
};
Every image markup that appears alone in a paragraph will be converted into a figure element automatically.
$Parsedown->figuresEnabled = true;
$Parsedown->figureAttributes = ['class' => 'image'];
$Parsedown->imageAttributesOnParent = ['class', 'id'];
To add a caption below the image, prepend at least one space but less than four spaces to turn the paragraph sequence that comes after the image into an image caption.
This is a paragraph.
![Image](/path/to/image.jpg)
Image caption.
This is a paragraph.
![Image](/path/to/image.jpg)
Image caption in a paragraph tag.
This is a paragraph.
![Image](/path/to/image.jpg)
This is a code block.
This is a paragraph.
FYI, this format is also valid for average Markdown files. And so, it will degraded gracefully when parsed by other Markdown converters.
$Parsedown->blockCodeClassFormat = 'language-%s';
$Parsedown->codeHtml = '<span class="my-code">%s</span>';
$Parsedown->blockCodeHtml = '<span class="my-code-block">%s</span>';
// <https://github.com/scrivo/highlight.php>
function doApplyHighlighter(string $Text, array $ClassList, &$Element) {
$Highlight = new \Highlight\Highlighter;
$Highlight->setAutodetectLanguages($ClassList);
$Highlighted = $Highlight->highlightAuto($Text);
$Element['attributes']['class'] = 'hljs ' . $Highlighted->language;
return $Highlighted->value;
}
$Parsedown->codeHtml = function ($Text, $Attributes, &$Element) {
return doApplyHighlighter($Text, [], $Element);
};
$Parsedown->blockCodeHtml = function ($Text, $Attributes, &$Element) {
$ClassList = array_filter(explode(' ', $Attributes['class'] ?? ""));
return doApplyHighlighter($Text, $ClassList, $Element);
};
<code>
Attributes on <pre>
Element$Parsedown->codeAttributesOnParent = true;
$Parsedown->blockQuoteAttributes = ['class' => 'quote'];
$Parsedown->blockQuoteAttributes = function ($Text, $Attributes, &$Element) {
if (strpos($Text, '**Danger:** ') === 0) {
return ['class' => 'alert alert-danger'];
}
if (strpos($Text, '**Info:** ') === 0) {
return ['class' => 'alert alert-info'];
}
return [];
};
$Parsedown->tableAttributes = ['border' => 1];
$Parsedown->tableColumnAttributes = function ($Text, $Attributes, &$Element, $Align) {
return [
'class' => $Align ? 'text-' . $Align : null,
'style' => null // Remove inline styles
];
};
$Parsedown->footnoteLinkAttributes = function ($Number, $Attributes, &$Element, $Name) {
return ['href' => '#to:' . $Name];
};
$Parsedown->footnoteReferenceAttributes = function ($Number, $Attributes, &$Element, $Name, $Index) {
return ['id' => 'from:' . $Name . '.' . $Index];
};
$Parsedown->footnoteBackLinkAttributes = function ($Number, $Attributes, &$Element, $Name, $Index) {
return ['href' => '#from:' . $Name . '.' . $Index];
};
$Parsedown->footnoteBackReferenceAttributes = function ($Number, $Attributes, &$Element, $Name, $Total) {
return ['id' => 'to:' . $Name];
};
$Parsedown->footnoteAttributes = ['class' => 'notes'];
$Parsedown->footnoteLinkHtml = '[%s]';
$Parsedown->footnoteBackLinkHtml = '<i class="icon icon-back"></i>';
{#foo}
→ <tag id="foo">
{#foo#bar}
→ <tag id="bar">
{.foo}
→ <tag class="foo">
{.foo.bar}
→ <tag class="foo bar">
{#foo.bar.baz}
→ <tag id="foo" class="bar baz">
{#foo .bar .baz}
→ <tag id="foo" class="bar baz">
(white-space before #
and .
becomes optional in my extension){foo="bar"}
→ <tag foo="bar">
{foo="bar baz"}
→ <tag foo="bar baz">
{foo='bar'}
→ <tag foo="bar">
{foo='bar baz'}
→ <tag foo="bar baz">
{foo=bar}
→ <tag foo="bar">
{foo=}
→ <tag foo="">
{foo}
→ <tag foo="foo">
{foo=bar baz}
→ <tag foo="bar" baz="baz">
{#a#b.c.d e="f" g="h i" j='k' l='m n' o=p q= r s t="u#v.w.x y=z"}
→ <tag id="b" class="c d" e="f" g="h i" j="k" l="m n" o="p" q="" r="r" s="s" t="u#v.w.x y=z">
language-
PrefixDot prefix in class name are now becomes optional, custom attributes syntax also acceptable:
php
→ <pre><code class="language-php">
php html
→ <pre><code class="language-php language-html">
.php
→ <pre><code class="php">
.php.html
→ <pre><code class="php html">
.php html
→ <pre><code class="php language-html">
{.php #foo}
→ <pre><code class="php" id="foo">
Property aliases are available as methods just to follow the way Parsedown set its configuration data. It uses PHP
__call()
method to generate the class methods automatically:
// This is …
$Parsedown->setBlockCodeHtml(function () { … });
// … equal to this
$Parsedown->blockCodeHtml = function () { … };
I’m looking for digital agencies and web designers who are interested in trying out my content management system, Mecha. Mecha is a minimalist content management system for building simple websites ranging from web company profile to web log for personal branding. It is a file-based content management system and does not take up too much web hosting space so:
I prefer designers who don’t really understand programming languages but understand the basics of creating web themes. So that my JavaScript and PHP skills can help you to solve the problems related to the back-end side features of your web project. Then, I can get rewarded when you use the panel feature on your clients’ projects.