remark-smiles

remark plugin to parse and stringify math

Usage no npm install needed!

<script type="module">
  import remarkSmiles from 'https://cdn.skypack.dev/remark-smiles';
</script>

README

remark-smiles

remark tokenizer for SMILES chemical syntaxe

remark plugin to parse and stringify SMILES molecules syntax.

this was created by modifing remark-math

Install

npm:

npm install remark-smiles --save

Use

SMILES molecules have to be between € or €€ signs (Ctrl+E on most (FR ?) keyboards)

Say we have the following file, example.md:

Ethanol (€CCO€)

€€C1CCCC1C€€

And our script, example.js, looks as follows:

const fs = require('fs')
const unified = require('unified')
const markdown = require('remark-parse')
const remarkSmiles = require('remark-smiles')
const remark2rehype = require('remark-rehype')
const rehypeSmiles = require('rehype-smiles')
const stringify = require('rehype-stringify')

unified()
        .use(markdown)
        .use(remarkSmiles)
        .use(remark2rehype)
        .use(rehypeSmiles)
        .use(stringify)
        .process(
                fs.readFileSync('./example.md', 'utf-8').toString(),
                function (err, file) {
                        if (err) throw err
                        console.log(String(file))
                }
        )

Now, running node example yields:

<p>Ethanol (<span class="chemical chemical-inline"><svg id="molecule" xmlns="http://www.w3.org/2000/svg" version="1.1" width="63px" height="30px" viewBox="3 -5 63 30">   <style> #molecule { pointer-events:none; } #molecule .event  { pointer-events:all; } line { stroke-linecap:round; } polygon { stroke-linejoin:round; } </style>   <text x="19.46" y="16.1" font-family=" Helvetica" font-size="12" fill="rgb(255,13,13)">O</text>   <text x="10.8" y="16.1" font-family=" Helvetica" font-size="12" fill="rgb(255,13,13)">H</text>   <line x1="59.06" y1="12.1" x2="41.6" y2="2.02" stroke="rgb(0,0,0)" stroke-width="1.21"></line>   <line x1="41.6" y1="2.02" x2="29.8" y2="8.83" stroke="rgb(0,0,0)" stroke-width="1.21"></line>   <line id="molecule:Bond:0" class="event" x1="59.06" y1="12.1" x2="41.6" y2="2.02" stroke-width="8" opacity="0"></line>   <line id="molecule:Bond:1" class="event" x1="41.6" y1="2.02" x2="24.13" y2="12.1" stroke-width="8" opacity="0"></line>   <circle id="molecule:Atom:0" class="event" cx="59.06" cy="12.1" r="8" opacity="0"></circle>   <circle id="molecule:Atom:1" class="event" cx="41.6" cy="2.02" r="8" opacity="0"></circle>   <circle id="molecule:Atom:2" class="event" cx="24.13" cy="12.1" r="8" opacity="0"></circle> </svg></span>)</p>
<p><span class="chemical chemical-inline"><svg id="molecule" xmlns="http://www.w3.org/2000/svg" version="1.1" width="74px" height="56px" viewBox="12 6 74 56">   <style> #molecule { pointer-events:none; } #molecule .event  { pointer-events:all; } line { stroke-linecap:round; } polygon { stroke-linejoin:round; } </style>   <line x1="62.3" y1="52.24" x2="78.36" y2="34.4" stroke="rgb(0,0,0)" stroke-width="1.44"></line>   <line x1="78.36" y1="34.4" x2="66.36" y2="13.62" stroke="rgb(0,0,0)" stroke-width="1.44"></line>   <line x1="66.36" y1="13.62" x2="42.88" y2="18.61" stroke="rgb(0,0,0)" stroke-width="1.44"></line>   <line x1="42.88" y1="18.61" x2="40.37" y2="42.48" stroke="rgb(0,0,0)" stroke-width="1.44"></line>   <line x1="62.3" y1="52.24" x2="40.37" y2="42.48" stroke="rgb(0,0,0)" stroke-width="1.44"></line>   <line x1="40.37" y1="42.48" x2="19.59" y2="54.48" stroke="rgb(0,0,0)" stroke-width="1.44"></line>   <line id="molecule:Bond:0" class="event" x1="62.3" y1="52.24" x2="78.36" y2="34.4" stroke-width="8" opacity="0"></line>   <line id="molecule:Bond:1" class="event" x1="78.36" y1="34.4" x2="66.36" y2="13.62" stroke-width="8" opacity="0"></line>   <line id="molecule:Bond:2" class="event" x1="66.36" y1="13.62" x2="42.88" y2="18.61" stroke-width="8" opacity="0"></line>   <line id="molecule:Bond:3" class="event" x1="42.88" y1="18.61" x2="40.37" y2="42.48" stroke-width="8" opacity="0"></line>   <line id="molecule:Bond:4" class="event" x1="62.3" y1="52.24" x2="40.37" y2="42.48" stroke-width="8" opacity="0"></line>   <line id="molecule:Bond:5" class="event" x1="40.37" y1="42.48" x2="19.59" y2="54.48" stroke-width="8" opacity="0"></line>   <circle id="molecule:Atom:0" class="event" cx="62.3" cy="52.24" r="8" opacity="0"></circle>   <circle id="molecule:Atom:1" class="event" cx="78.36" cy="34.4" r="8" opacity="0"></circle>   <circle id="molecule:Atom:2" class="event" cx="66.36" cy="13.62" r="8" opacity="0"></circle>   <circle id="molecule:Atom:3" class="event" cx="42.88" cy="18.61" r="8" opacity="0"></circle>   <circle id="molecule:Atom:4" class="event" cx="40.37" cy="42.48" r="8" opacity="0"></circle>   <circle id="molecule:Atom:5" class="event" cx="19.59" cy="54.48" r="8" opacity="0"></circle> </svg></span></p>

API

remark().use(remarkSmiles[, options])

Parse and stringify SMILES.

Get’s useful when combined with [rehype-smiles][rehype-smiles].

You can also support only inline, or online block SMILES, by importing them directly:

const smilesInline = require('remark-smiles/inline')

// …

unified()
  // …
  .use(smilesInline)
  // …

options

options.inlineSmilesDouble

Add an extra smiles-display class to inline €€ smiles (default: false).

Security

Use of remark-smiles itself doesn’t open you up to cross-site scripting (XSS) attacks.

Always be wary of user input and use rehype-sanitize.