CODEWITHSUNDEEP
javascripthtmlshowdown
punkish
punkish

Reputation: 15218

Showdown.js extension to modify html

with help from another SO question on this topic, I am trying out a Showdown.js extension that is not working on html (it works fine if I want to replace just text, but I want to modify the html).

I want to change

<img src="/path/to/image/image1.jpg" alt="bloo bap" title="" />
<img src="/path/to/image/image2.jpg" alt="shoo ba doo" title="" />

to 

<img class="foo" src="/path/to/image/image1.jpg" alt="bloo bap" title="" />
<img class="foo" src="/path/to/image/image2.jpg" alt="shoo ba doo" title="" />

My extension is

var demo = function(converter) {
    return [
        {
            type    : 'lang', 
            regex   : '<img src=(.*)\/>', 
            replace : '<img class="foo" src=$1>'
        }
    ];
}

var converter = new Showdown.converter({extensions: [demo]});

but no cigar.

Upvotes: 1

Views: 2322

Answers (3)

JCH2k
JCH2k

Reputation: 3621

A little late, but for those coming here via google:

What you need is an output extension, not a lang extension.

This is a lang extension. It replaces links to .md file with links to .html files as the first step in your markdown code:

return [
    {
        type    : 'lang', 
        regex   : /\[(.*)\]\((.*)\.md\)/g, 
        replace : '[$1]($2.html)'
    }
];

This is an output extension. It adds a class attribute to all images as the last step after all HTML has been generated

return [
    {
        type    : 'output', 
        regex   : '<img (.*)/>', 
        replace : '<img class="foo" $1>'
    }
];

Details are here: https://github.com/showdownjs/showdown/wiki/extensions

Upvotes: 2

dimacpp
dimacpp

Reputation: 758

Showdown extensions works on the html. Try this:

type: 'html',
regex: '<img src=(.*)\/>',
replace: '<img class="foo" src=$1>'

Upvotes: 2

punkish
punkish

Reputation: 15218

From my tests, I believe Showdown extensions work only on the text, not the html. That is, the extensions get called before Showdown takes over. Instead of creating an extension, I used the following code, and it works like a charm

var postProcess = function(text) {
    return text.replace(/<img src=(.*)\/>/g, '<img class="foo" src=$1>');
}

postProcess(converter.makeHtml(text));

Upvotes: 0

Related Questions