[SOLVED] How to create a showdown.js markdown extension

How to create a showdown.js markdown extension

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.

Solution

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.