taufik-nurrohman/parsedown-extra-plugin

Configurable Markdown to HTML converter with Parsedown Extra.

v1.3.11 2023-09-03 15:08 UTC

Requires

• erusev/parsedown: ^1.8.0@beta
• erusev/parsedown-extra: ^0.8

MIT

• Taufik Nurrohman

• parser
• markdown
• extension
• extra
• parsedown
• markdown extra
• Parsedown Extra
• markdown extra extension
• parsedown extra extension

README

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.

Usage

Manual

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}');

Composer

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}');

Features

HTML or XHTML

$Parsedown->voidElementSuffix = '>'; // HTML5

Predefined Abbreviations

$Parsedown->abbreviationData = [
    'CSS' => 'Cascading Style Sheet',
    'HTML' => 'Hyper Text Markup Language',
    'JS' => 'JavaScript'
];

Predefined Reference Links and Images

$Parsedown->referenceData = [
    'mecha-cms' => [
        'url' => 'https://mecha-cms.com',
        'title' => 'Mecha CMS'
    ],
    'test-image' => [
        'url' => 'http://example.com/favicon.ico',
        'title' => 'Test Image'
    ]
);

Automatic rel="nofollow" Attribute on External Links

$Parsedown->linkAttributes = function ($Text, $Attributes, &$Element, $Internal) {
    if (!$Internal) {
        return [
            'rel' => 'nofollow',
            'target' => '_blank';
        ];
    }
    return [];
};

Automatic 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];
};

Automatic Figure Elements

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.

Custom Code Block Class Format

$Parsedown->blockCodeClassFormat = 'language-%s';

Custom Code Block Contents

$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);
};

Put <code> Attributes on <pre> Element

$Parsedown->codeAttributesOnParent = true;

Custom Quote Block Class

$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 [];
};

Custom Table Attributes

$Parsedown->tableAttributes = ['border' => 1];

Custom Table Alignment Class

$Parsedown->tableColumnAttributes = function ($Text, $Attributes, &$Element, $Align) {
    return [
        'class' => $Align ? 'text-' . $Align : null,
        'style' => null // Remove inline styles
    ];
};

Custom Footnote ID Format

$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];
};

Custom Footnote Class

$Parsedown->footnoteAttributes = ['class' => 'notes'];

Custom Footnote Link Text

$Parsedown->footnoteLinkHtml = '[%s]';

Custom Footnote Back Link Text

$Parsedown->footnoteBackLinkHtml = '<i class="icon icon-back"></i>';

Advance Attribute Parser

• {#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">

Code Block Class Without language- Prefix

Dot 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 as Methods

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 () { … };

Support

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:

1. From the client’s point of view, this can reduce their monthly hosting expenses.
2. From the web designer’s point of view, this will increase your company’s profits.

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.