unclear on using extensions with ng-showdown

[ciel]

I'm trying to add extensions to showdown, and am using ng-showdown to render markdown on my page. I'm a bit unclear about how this works; Assuming I've created and registered the extension...

$showdown.setOption('extension', ('myext', () => {
            return {
                type: 'lang',
                regex: /markdown/g,
                replace: 'showdown'
            };
        }));

How can I use this on my page without calling it directly? I'm rendering using the markdown-to-html directive.

I've browsed through the documentation several times and am just not understanding this. I basically want to add some custom tags, and from what I gather that should be easy with the extensions system.

[avinashjoshi]

Any luck with this? I am facing the same issue...

[ciel]

Yes, I solved it, but my health is very poor right now and I can't get to a computer to post how I did it. I will make an active effort to do that tomorrow.

[ciel]

Okay. The way you do this is to register the extensions with the ng-showdown provider, like this. Mine is in Typescript, but this code should work fine in javascript if you account for the class exports.

import 'angular';
import * as showdown from 'showdown';

export class markdownConfig {
    constructor($showdownProvider: showdown.IShowdownProvider) {
        /**
         * configure an extension to translate text into
         * alert boxes
         *
         * @format [!{css}] > {message}
         */
        showdown.extension('notice', () => {
            return {
                type: 'lang',
                regex: /^\[!(.*)\]\s+(>)\s+(.*)/gmi,
                replace: (text: string, css: string, method: string, message: string) => {
                    return text.replace(/^\[!(.*)\]\s+(>)\s+(.*)/gmi,
                        `<div markdown class="notice notice-${css}" >$3</div>`);
                }
            };
        });

        /**
         * configure links to static views on the same page
         */
        showdown.extension('viewLink', () => {
            return {
                type: 'lang',
                regex: /^(\@\[((?:\[[^\]]*]|[^\[\]])*)]\([ \t]*()<?(.*?(?:\(.*?\).*?)?)>?[ \t]*((['"])(.*?)\6[ \t]*)?\))/gmi,
                replace: (text: string, message: string, separator: string, url: string ) => {
                    return text.replace(/^(\@\[((?:\[[^\]]*]|[^\[\]])*)]\([ \t]*()<?(.*?(?:\(.*?\).*?)?)>?[ \t]*((['"])(.*?)\6[ \t]*)?\))/gmi,
                        `<div class="lookup col-xs-4 col-sm-3 col-md-3 col-lg-3"><a href="$4">$2</a></div>`);
                }
            };
        });

        // load the extensions
        $showdownProvider.loadExtension('notice');
        $showdownProvider.loadExtension('viewLink');
    }
}

Then all you need to do is make sure this code runs; It can be in the controller of your view - but I've actually strapped it into its own individual module that I just load into the main angular application.

[avinashjoshi]

Neat! Thank you @ciel for sharing your code. I'm sure there are others who will benefit from this. Hope you feel better!