How to create a showdown.js markdown extension

Question

Using the following code, I get working output:

<html>
  <head>
    <script type="text/javascript" src="/js/showdown.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      var converter = new Showdown.converter();
      alert(converter.makeHtml('*test* abc'));
    </script>
  </body>
</html>

Returning <p><em>test</em> abc</p>

I would now like to add an extension. The github page suggests this can be done with:

<script src="src/extensions/twitter.js" />
var converter = new Showdown.converter({ extensions: 'twitter' });

However, modifying my code to:

<html>
  <head>
    <script type="text/javascript" src="/js/showdown.js"></script>
    <script type="text/javascript" src="/js/twitter.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      var converter = new Showdown.converter({ extensions: 'twitter' });
      alert(converter.makeHtml('*test* abc'));
    </script>
  </body>
</html>

Produces the error

"Uncaught Extension 'undefined' could not be loaded.  It was either not found or is not a valid extension."

Adding the following code (as listed under the Filter example)

var demo = function(converter) {
  return [
    // Replace escaped @ symbols
    { type: 'lang', function(text) {
      return text.replace(/\\@/g, '@');
    }}
  ];
}

Produces an error Uncaught SyntaxError: Unexpected token (

I would like to create an extension like this one https://github.com/rennat/python-markdown-oembed to interpret a ![video](youtube_link), but it's unclear how to begin adding this support.

score 2 · Accepted Answer · edited Mar 11 '14 at 17:38

2

In your last block you have a comma after 'lang', followed immediately with a function. This is not valid json.

EDIT

It appears that the readme was incorrect. I had to to pass an array with the string 'twitter'.

var converter = new Showdown.converter({extensions: ['twitter']});
converter.makeHtml('whatever @meandave2020');
// output "<p>whatever <a href="http://twitter.com/meandave2020">@meandave2020</a></p>"

I submitted a pull request to update this.

edited Mar 11 '14 at 17:38

Joseph Yaduvanshi

20,241
5
61
69

answered Dec 31 '13 at 22:59

Daveee

49
4

Indeed. Bad example is bad. Looking through the source, it looks like it might want to see that filter as `'function':function(){}`, although, that doesn't get me anywhere either. I've tried a few variations on how the examples looked like they might want to see an extension but haven't gotten far. – Dec 31 '13 at 23:02
1

It looks like the read me is incorrect. This seemed to work for me...```var converter = new Showdown.converter({extensions: ['twitter']})``` – Daveee Dec 31 '13 at 23:23
Aha, that'll get me started. Thank you! – Dec 31 '13 at 23:35

score 1 · Answer 2 · answered Sep 29 '16 at 11:48

The way we write extensions has changed, I found some help with the following filter example : http://codepen.io/tivie/pen/eNqOzP

showdown.extension("example", function() {
  'use strict';
  return [
    {
      type: 'lang',
      filter: function(text, converter, options) {
        var mainRegex = new RegExp("(^[ \t]*:>[ \t]?.+\n(.+\n)*\n*)+", "gm");
        text = text.replace(mainRegex, function(match, content) {
          content = content.replace(/^([ \t]*):>([ \t])?/gm, "");
          var foo = converter.makeHtml(content);
          return '\n<blockquote class="foo">' + foo + '</blockquote>\n';
        });
        return text;
      }
    }
  ]
});

How to create a showdown.js markdown extension

2 Answers2

Linked