Showdown Markdown extension

README.md

Markdown Extensions for Wells and PrismJS

Hello

foo
```javascript:4,5-7
hello
```

---*
This is in a well
---*

Yolo

Will map to:

<p>Hello</p>
<p>foo</p>
<pre data-line="4,5-7"><code class="language-javascript">
hello
</code></pre>
<div class='well'>
This is in a well
</div>
<p>Yolo</p>

TODO

Make

**[red]Stuff**

Map to:

<strong style="color:red">Stuff</strong>

showdown-markdown.js

"use strict";

var showdown  = require('showdown');

/*
// Supports syntax in the following:

```javascript:1,3-4
console.log("hi");
console.log("hi");
console.log("hi");
console.log("hi");
```

// To map to:

<pre data-line="1,3-4"><code class="language-javascript">
console.log("hi");
console.log("hi");
console.log("hi");
console.log("hi");
</code></pre>

// This conforms to the PrismJS Standard.
*/
showdown.extension('showdown-extension-prism-js', function() {
  'use strict';
  var pattern = /```/g;

  return {
    type: 'lang',
    filter: function (text, converter, options) {
      var lines = text.split(/\r?\n/);

      var starting = true;
      let newLines = [];
      lines.forEach( (line) => {
        if( line.substr(0, 3) === '```' ) {
         if(starting) {
           const codeInfo = line.substring(3, line.length);
           const split = codeInfo.split(":");
           const language = split[0];
           const lines = split[1];
           let lineClass = "";
           if( lines ) {
             lineClass = ' data-line="' +lines + "\"";
           }
           newLines.push("<pre" + lineClass +  "><code class=\"language-" + language + "\">");
           starting = false;
         } else {
           newLines.push("</code></pre>");
           starting = true;
         }
        } else {
          newLines.push(line);
         }
      });

      return newLines.join("\n");
    },
    regex: pattern,
    replace: 'bar'
  };
});

/*
// Support including a well of additional information.  Example:

Hello
---*
Did you know?
---*

Goodbye

// To map to:

<p>Hello</p>

<div class="well">Did you know?</div>

<p>
Goodbye
</p>
*/
showdown.extension('showdown-extension-well', function() {
  'use strict';
  var pattern = /---*/g;

  return {
    type: 'lang',
    filter: function (text, converter, options) {
      var lines = text.split(/\r?\n/);

      var starting = true;
      let newLines = [];
      lines.forEach((line) => {
        if(line.substr(0, 4) === '---*') {
          if(starting) {
            starting = false;
            newLines.push("<div class='well'>")
          } else {
            starting = true;
            newLines.push("</div>")
          }
        } else {
          newLines.push(line);
        }
      });
      return newLines.join("\n");
    }
  }
});

const converter = new showdown.Converter({
  extensions: ['showdown-extension-prism-js', 'showdown-extension-well']
});

const markdownSyntax = `
Hello

foo
\`\`\`javascript:4,5-7
hello
\`\`\`

---*
This is in a well
---*

Yolo`;

const html = converter.makeHtml(markdownSyntax);
console.log(html);