[javascript] 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.

This question is related to javascript showdown

The answer is

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


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.

Questions with javascript tag:

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax Drag and drop menuitems Is it possible to execute multiple _addItem calls asynchronously using Google Analytics? DevTools failed to load SourceMap: Could not load content for chrome-extension TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app What does 'x packages are looking for funding' mean when running `npm install`? SyntaxError: Cannot use import statement outside a module SameSite warning Chrome 77 "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6 Why powershell does not run Angular commands? Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; } Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop Push method in React Hooks (useState)? JS file gets a net::ERR_ABORTED 404 (Not Found) React Hooks useState() with Object useState set method not reflecting change immediately Can't perform a React state update on an unmounted component UnhandledPromiseRejectionWarning: This error originated either by throwing inside of an async function without a catch block Can I set state inside a useEffect hook internal/modules/cjs/loader.js:582 throw err How to post query parameters with Axios? How to use componentWillMount() in React Hooks? React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory in ionic 3 How can I force component to re-render with hooks in React? What is useState() in React? How to call loading function with React useEffect only once Objects are not valid as a React child. If you meant to render a collection of children, use an array instead How to reload current page? Center content vertically on Vuetify Getting all documents from one collection in Firestore ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment How can I add raw data body to an axios request? Sort Array of object by object field in Angular 6 Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) Axios Delete request with body and headers? Enable CORS in fetch api Vue.js get selected option on @change Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) Angular 6: How to set response type as text while making http call

Questions with showdown tag:

How to create a showdown.js markdown extension