UNPKG

rehype-smiles

Version:

rehype plugin wich convert SMILES molecule to SVG

github.com/Drulac/rehype-smiles

Drulac/rehype-smiles

81 lines (54 loc) • 5.42 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
# rehype-smiles [**rehype**][rehype] plugin to transform `<span class=chemical-inline>` and `<div class=chemical-display>` with [openchemlib](https://github.com/cheminfo/openchemlib-js). ## Install [npm][]: ```sh npm install rehype-smiles ``` ## Use Say we have the following file, `example.html`: ```markdown Ethanol (€CCO€) €€C1CCCC1C€€ ``` And our script, `example.js`, looks as follows: ```js 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: ```html <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 ### `rehype().use(smiles[, options])` Transform `<span class="chemical-inline">` and `<div class="chemical-display">` with [openchemlib](https://github.com/cheminfo/openchemlib-js). ## Security Use of `rehype-smiles` renders user content with [openchemlib](https://github.com/cheminfo/openchemlib-js), so any vulnerability in [openchemlib](https://github.com/cheminfo/openchemlib-js) can open you to a [cross-site scripting (XSS)][xss] attack. Always be wary of user input and use [`rehype-sanitize`][rehype-sanitize]. <!-- Definitions --> [npm]: https://docs.npmjs.com/cli/install [rehype]: https://github.com/rehypejs/rehype [xss]: https://en.wikipedia.org/wiki/Cross-site_scripting [rehype-sanitize]: https://github.com/rehypejs/rehype-sanitize