remark-altprot

A remark alternate protocols plugin.

remark plugin to identify alternate protocol links in paragraphs and convert them to links.

Install

npm install remark-altprot

Use

Check out test.js for more samples

So you have some Markdown in example.md

# Here's some great links

This link hyper://6946d4631ea3dade5d26367b96afdf8e93be638349c536e0bd446393c78a61a4/ blah blah.  Also a data link dat://6946d4631ea3dade5d26367b96afdf8e93be638349c536e0bd446393c78a61a4

Oh and have you been to cabal public? cabal://1eef9ad64e284691b7c6f6310e39204b5f92765e36102046caaa6a7ff8c02d74/ Download the app!

And the script

var remark = require('remark')
var markdown = require('remark-parse')
var altProt = require('remark-altprot')
var html = require('rehype-stringify')
var remark2rehype = require('remark-rehype')
var vfile = require('to-vfile')

 remark().use(markdown).use(altProt).use(remark2rehype).use(html).process(vfile.readSync('example.md'), function(err, file) {
    if (err) throw err
    console.log(String(file))
  })

In the example we are generating html which will return this result:

<h1>Here's some great links</h1>
<p>This link <a href="hyper://6946d4631ea3dade5d26367b96afdf8e93be638349c536e0bd446393c78a61a4/">hyper://6946d4631ea3dade5d26367b96afdf8e93be638349c536e0bd446393c78a61a4/</a> blah blah.  Also a data link <a href="dat://6946d4631ea3dade5d26367b96afdf8e93be638349c536e0bd446393c78a61a4">dat://6946d4631ea3dade5d26367b96afdf8e93be638349c536e0bd446393c78a61a4</a></p>
<p>Oh and have you been to cabal public? <a href="cabal://1eef9ad64e284691b7c6f6310e39204b5f92765e36102046caaa6a7ff8c02d74/">cabal://1eef9ad64e284691b7c6f6310e39204b5f92765e36102046caaa6a7ff8c02d74/</a> Download the app!</p>    

Use with remark-react

There's a trick to using this with remark-react because it uses github sanitize to ensure that generated html is safe. You have to add the protocols you want supported in react to the sanitize feature of remark-react and please, don't set it to false!

Here's all you need to do:

var merge = require('deepmerge')
var gh = require('hast-util-sanitize/lib/github')

const altProtSanitize = {
  sanitize: merge(gh, { protocols: { href: ['hyper', 'dat', 'cabal', 'hypergraph', 'hypermerge'] } })
}

remark().use(altProt).use(remarkReact, altProtSanitize).use(remarkEmoji).processSync(message.content).result

All your doing here is using the hast-util-sanitize github sanitization rules which is also default for remark-react and adding additional protocols to the rules by merging the additional protocols into the rule-set. Finally pass those updated rules as an option in the .use() remarkReact call!