erusev / parsedown

Better Markdown Parser in PHP
https://parsedown.org
MIT License
14.76k stars 1.12k forks source link

How can I wrap element inside another element? E.g. wrap img with div? #825

Open hrvoj3e opened 2 years ago

hrvoj3e commented 2 years ago

I think that it would be useful to add instructions to Wiki.

I tried this

    protected function inlineImage($excerpt)
    {
        $element = parent::inlineImage($excerpt);
        if (!is_array($element ?? null)) {
            return null;
        }

        // wrap img with div
        $block = [
            'extent' => $element['extent'],
            'element' => [
                'name' => 'div',
                'handler' => 'element',
                'text' => $element,
                'attributes' => [
                    'class' => 'my-img-wrap',
                ],
            ],
        ];

        return $block;
    }

This is my test case:

![my-image](my-image.jpg)
<div class="my-img-wrap'">
   <img src="my-image.jpg" alt="my-image">
</div>
hrvoj3e commented 2 years ago

My bad. I was testing Parsedown and ParsedownExtra

Working with

class MarkdownPlugin extends \Parsedown

Not working

class MarkdownPlugin extends \ParsedownExtra
Julienh commented 2 years ago

Hello, I tried your example but I have an empty div, how did you do please ?

hrvoj3e commented 2 years ago

Hi. I have made a sample. It seems the problem is in version 1.7.

"erusev/parsedown": "^1.7", "erusev/parsedown-extra": "^0.8.1"

PHP Warning:  Undefined array key "name" in /home/adax/code/other/github-erusev-parsedown-825/vendor/erusev/parsedown/Parsedown.php on line 1477
PHP Warning:  Undefined array key "name" in /home/adax/code/other/github-erusev-parsedown-825/vendor/erusev/parsedown/Parsedown.php on line 1477
<p><div class="my-img-wrap">< /></div></p>

<p><div class="my-img-wrap">< /></div></p>

"erusev/parsedown": "^1.8", "erusev/parsedown-extra": "^0.8.1"

➜ php issue-825.php
<p><div class="my-img-wrap"><img src="my-image.jpg" alt="my-image-1.8.0-beta-7" /></div></p>

<p><div class="my-img-wrap"><img src="my-image-extra.jpg" alt="my-image-extra-0.8.1" /></div></p>
Julienh commented 2 years ago

Thanks for your help @hrvoj3e !