UNPKG

remark-altprot

Version:
63 lines (46 loc) 2.86 kB
# remark-altprot A remark alternate protocols plugin. [**remark**](https://github.com/remarkjs/remark) plugin to identify alternate protocol links in paragraphs and convert them to links. ## Install ```sh 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**](https://github.com/remarkjs/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!